Ext中的动画处理
在进行Javascript开发，有时会有一些动画效果的实现需要，这往往浪费了开发人员不必要的精力。而Ext开发小组则提供了Fx类（类Ext.Fx ）集中处理了大部分常用的js动画特效，减少了我们自己手写代码的复杂度。这是一个提供基础动画和视觉效果支持的类。注意：此类被引用后会自动应用于 Ext.Element 的接口， 因此所有的效果必须通过 Element 对象来实现。反过来说，既然 Element 对象实际上并没有定义这些效果， Ext.Fx 类必须被 Element 对象引用后才能使那些效果生效。
下面我给出一个简单的实例代码，其中囊括了大部分的Ext动画效果：
// 通过id获取
var el = Ext.get("my-div");
// 通过DOM元素引用by DOM element reference
var el = Ext.get(myDivElement);
1、 fadeIn( ) :
Ext.Element 渐显 options参数有以下属性
callback:Function 完成后的回叫方法
scope:Object 目标
easing:String 行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的
easeNone: 匀速
easeIn: 开始慢且加速
easeOut: 开始快且减速
easeBoth: 开始慢且减速
easeInStrong: 开始慢且加速,t的四次方
easeOutStrong: 开始快且减速,t的四次方
easeBothStrong: 开始慢且减速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
afterCls:String 事件完成后元素的样式
duration:Number 事件完成时间（以秒为单位）
remove:Boolean 事件完成后元素销毁?
useDisplay:Boolean 隐藏元素是否使用display或visibility属性?
afterStyle:String/Object/Function 事件完成后应用样式
block:Boolean 块状化
concurrent:Boolean 顺序还是同时执行
stopFx ：Boolean 当前效果完成后随合的效果是否将停止和移除
2、fadeOut( ) : Ext.Element 渐隐
fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});
3、frame( , , ) : Ext.Element 边框变亮扩展然后渐隐
例:el.frame("ff0000", 10, { duration: 3 })
4、ghost( , ) : Ext.Element 渐渐滑出视图,anchor定义
tl 左上角(默认)
t 上居中
tr 右上角
l 左边界的中央
c 居中
r 右边界的中央
bl 左下角
b 下居中
br 右下角
例:
el.ghost('b', {
easing: 'easeOut',
duration: .5
remove: false,
useDisplay: false
});
5、hasActiveFx() : Boolean 指示元素是否当前有特效正在活动
6、hasFxBlock() : Boolean 是否有特效阻塞了
7、highlight( , ) : Ext.Element 高亮显示当前元素
例:el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});
8、pause( Number seconds ) : Ext.Element 暂停
9、puff( ) : Ext.Element 元素渐大并隐没
例:el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
10、scale( Number width, Number height, ) : Ext.Element 缩放
例:el.scale(
,
, {
easing: 'easeOut',
duration: .35
});
11、sequenceFx() 特效序列
12、shift( Object options ) : Ext.Element 位移,并可重置大小,透明度等
例:
el.shift({
width: ,
height: ,
x: ,
y: ,
opacity: ,
easing: 'easeOut',
duration: .35
});
13、slideIn( , ) : Ext.Element 淡入
14、slideOut( , ) : Ext.Element 淡出
例:el.slideIn('t', {
easing: 'easeOut',
duration: .5
});
15、stopFx() : Ext.Element 停止特效
16、switchOff( ) : Ext.Element 收起并隐没
例:
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
17、syncFx() : Ext.Element 异步特效
页:
[1]