Hierarchy
Ext.BaseExt.util.AnimateMixed into
Uses
Files
本动画类是一个掺合模式类(mixin).
Ext.util.Animate 提供了创建动画的属性域样式的API接口. 本类作为一个掺和类使用,当前被 Ext.Element, Ext.CompositeElement, Ext.draw.Sprite, Ext.draw.CompositeSprite, 和 Ext.Component 这些类调用. 需要注意的是,组件(Components) 的属性只有一部分是可以进行动画的,包括: top, left, x, y, height, width, 和 opacity (而 color, paddings, and margins 这几类样式不能作为动画).
动画的三要素 - easing, duration, 和 to (每个属性(property)最终的值).
Easing 和 duration 默认为下面多指定的值.
缓动效果(easing) 描述了在过渡过程中如何计算中间值.
Easing 在动画过程中的速度.
可以使用 easing 和 duration 的默认值, 但一般来说，必须指定一个
to 属性值 作为 所有动画效果的最终结果值.
'to' 常用的配置项元素包括:
'to' 流行的效果(sprite,精灵)配置项包括:
动画的持续时间默认为 250 (四分之一秒). 持续时间的单位是毫秒(milliseconds). 因此 1 秒就代表 1000 , 1分钟就是 60* 1000, 以此类推. 所有动画的 动画曲线 默认为 'ease'. 常用的缓动函数(easing functions) 请参考 Easing.
用默认的 easing 和 duration 来淡出一个元素,示例如下:
var p1 = Ext.get('myElementId');
p1.animate({
to: {
opacity: 0
}
});
让淡出效果在十分之一秒内完成:
var p1 = Ext.get('myElementId');
p1.animate({
duration: 100,
to: {
opacity: 0
}
});
默认地,所有的动画都被加入到一个队列中,此队列通过一个链式的 API来 执行动画. 以下的代码示例, 把 4 个动画加入队列,让其串行地发生 (串行就是一个接一个地执行):
p1.animate({
to: {
x: 500
}
}).animate({
to: {
y: 150
}
}).animate({
to: {
backgroundColor: '#f00' //红色
}
}).animate({
to: {
opacity: 0
}
});
你可以调用 syncFx 方法来改变这种默认的行为. 某个元素在调用 syncFx 方法之后, 后续添加到此元素上的动画特效将会并行地执行(在同一时刻执行).
p1.syncFx(); //让p1上所有动画同时执行
p1.animate({
to: {
x: 500
}
}).animate({
to: {
y: 150
}
}).animate({
to: {
backgroundColor: '#f00' //红色
}
}).animate({
to: {
opacity: 0
}
});
以上代码等价于:
p1.animate({
to: {
x: 500,
y: 150,
backgroundColor: '#f00', //红色
opacity: 0
}
});
stopAnimation 方法可用于停止当前所有正在执行的动画,并清空所有在队列中的动画.
你也可以采用关键帧 keyframes 设置复杂的动画效果,只要遵循CSS3的动画配置模式. 需要注意,只有 CSS精灵(sprites) 才可以使用 旋转(rotation), 平移(translation), 以及 缩放(scaling). 上面的代码也可以写成如下格式的代码:
p1.animate({
duration: 1000, //总共时间 1000 毫秒 = 1秒
keyframes: {
25: { //从 0 到 250ms (25%)
x: 0
},
50: { //从 250ms 到 500ms (50%)
y: 0
},
75: { //从 500ms 到 750ms (75%)
backgroundColor: '#f00' //红
},
100: { //从 750ms 到 1sec
opacity: 0
}
}
});
EXT的每个动画都有 beforeanimate, afteranimate, 和 lastframe 事件. 关键帧 动画 还有一个附加的 keyframe 事件,在动画前进道每个关键帧将会触发一次.
所有的动画都支持监听器 listeners 配置项, 用来对这些事件进行处理.
startAnimate: function() {
var p1 = Ext.get('myElementId');
p1.animate({
duration: 100,
to: {
opacity: 0
},
listeners: {
beforeanimate: function() {
// 自己调用相关的逻辑
this.myBeforeAnimateFn();
},
afteranimate: function() {
// 动画完成后,执行相关操作
this.myAfterAnimateFn();
},
scope: this
});
},
myBeforeAnimateFn: function() {
// 自定义属性函数
},
myAfterAnimateFn: function() {
// 自定义函数
}
基于动画是异步执行这种机制, 你可以在某个元素上通过方法 getActiveAnimation 来判断动画是否正在执行. 如果当前没有活跃的动画,将会返回false,否则返回当前元素上当前运行的 Ext.fx.Anim 实例.
下面的示例中, 我们取得当前的动画,等待其完成后,停止其他所有在队列中的动画特效, 然后将元素淡出,让可见程度渐变为0:
var curAnim = p1.getActiveAnimation();
if (curAnim) {
curAnim.on('afteranimate', function() {
p1.stopAnimation();
p1.animate({
to: {
opacity: 0
}
});
});
}
扩展事件
Defaults to: []
本身
获取当前类的引用，此对象被实例化。不同于 statics,
this.self是依赖范围，它意味着要使用动态继承。
参见 statics 详细对比
Ext.define('My.Cat', {
statics: {
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
alert(this.self.speciesName); // 依赖 'this'
},
clone: function() {
return new this.self();
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
}
});
var cat = new My.Cat(); // alerts 'Cat' 猫
var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' 雪豹
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
成员
在 this 这个对象上执行自定义动画.
动画方法适用于 Component 类和 Element 类. 它在指定的时间内,对this对象的特定属性进行动画.
唯一的参数是一个配置对象, 该对象定义了开始属性值, 结束属性值,以及描述时间线的属性.
当一个元素进行动画时, 下列的属性都可定义在 from, to, 以及 keyframe 这几个配置对象中:
x - 页面 X 位置,单位:像素.
y - 页面 Y 位置,单位:像素.
left - 元素的 CSS left 值. 必须指定单位(比如: "6px").
top - 元素的 CSS top 值. 必须指定单位(比如: "6px").
width - 元素的 CSS width 值. 必须指定单位(比如: "6px").
height - 元素的 CSS height 值. 必须指定单位(比如: "6px").
scrollLeft - 元素的 scrollLeft 值.
scrollTop - 元素的 scrollLeft 值.
opacity - 元素的 opacity 值. 透明度,值只能位于 0 和 1之间.
需要注意的是, 如果动画一个被 Ext Component 所使用的元素,却不以某种方式通知组件Component 元素改变过后的状态, 可能会导致错误的 Component 行为. 这是因为 Component会继续使用元素旧的状态. 想要规避这个问题, 直接对Components 特定的属性值进行动画即可(而不要动画其内部的元素).
当组件进行动画的时候, 下列的属性都可定义在 from, to, and keyframe 这几个配置对象中:
x - 组件在页面内的 X 位置,单位:像素.
y - 组件在页面内的 Y 位置,单位:像素.
left - 组件的 left 值,单位:像素.
top - 组件的 top 值,单位:像素.
width - 组件的 width 值,单位:像素.
height - 组件的 height 值,单位:像素.
dynamic - 指定为 true, 则动画的每一帧都会 更新组件的布局 (如果是容器的话).
需要注意,每次组件大小改变,立即就重新进行布局是一种昂贵的操作.请根据实际需要进行取舍
要将一个 Window 通过动画效果改变大小, 确保其内部的布局,以及所有的阴影都正确,代码如下:
myWindow = Ext.create('Ext.window.Window', {
title: 'Test Component animation',
width: 500,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
title: 'Left: 33%',
margins: '5 0 5 5',
flex: 1
}, {
title: 'Left: 66%',
margins: '5 5 5 5',
flex: 2
}]
});
myWindow.show();
myWindow.header.el.on('click', function() {
myWindow.animate({
to: {
width: (myWindow.getWidth() == 500) ? 700 : 500,
height: (myWindow.getHeight() == 300) ? 400 : 300,
}
});
});
基于效率和性能的考虑, 默认情况下, Window 的内部布局只在其达到 "to" 所指定的大小时才进行刷新.
如果需要动态更新 Window 的子组件, 可以指定动画的属性 dynamic: true ,
此时两个子item在动画过程中都保持其比例.
一个对象,包含动画相关的属性,这些属性包括: 指定起始状态,结束状态,以及动画的时间线 相关的值.
下面所列出的属性中,只有 to 是强制必须有的.
config的属性值包括:
一个对象,指定动画开始时的相关CSS属性值. 如果没有指定,则默认使用元素当前实际的值. 实际的属性可能受此对象前面的动画所影响. 参见下面的元素与组件动画小节.
一个对象,指定动画结束时需要达到的相关CSS属性值.
每次动画的持续时间，单位: 毫秒 milliseconds.
一个字符串值.用于描述 如何从默认的线下 变为 非线性 的速率的类型. 其值 可以 是下列英文字符串 之一:
关键帧; 此参数是一个描述在时间轴(时间线)中特定点动作属性的对象. 其包含的属性, 名称是时间轴百分比的数字,对应的值指定在这个点的动画状态.
这是一个标准的 监听器 配置对象,
可用于在beforeanimate 事件 或者 afteranimate 事件中注入行为.
this
调用原来的方法，这是以前的override重写
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
this.callOverridden();
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
This method has been deprecated since 4.1
版本 使用 callParent 代替.
参数的参数，数组或'参数'对象
来自当前方法，例如： this.callOverridden(arguments)
返回调用重写方法的结果。
所谓的"parent"方法是指当前的方法。 这是以前的方法派生或重写(参见 Ext.define)。
Ext.define('My.Base', {
constructor: function (x) {
this.x = x;
},
statics: {
method: function (x) {
return x;
}
}
});
Ext.define('My.Derived', {
extend: 'My.Base',
constructor: function () {
this.callParent([21]);
}
});
var obj = new My.Derived();
alert(obj.x); // alerts 21
这可以用来重写如下:
Ext.define('My.DerivedOverride', {
override: 'My.Derived',
constructor: function (x) {
this.callParent([x*2]); // 调用原来的My.Derived构造
}
});
var obj = new My.Derived();
alert(obj.x); // 现在提示 42
This also works with static methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
statics: {
method: function (x) {
return this.callParent([x*2]); // 调用 My.Base.method
}
}
});
alert(My.Base.method(10); // alerts 10
alert(My.Derived2.method(10); // alerts 20
然后，它也可以重写静态方法。
Ext.define('My.Derived2Override', {
override: 'My.Derived2',
statics: {
method: function (x) {
return this.callParent([x*2]); // 调用 My.Derived2.method
}
}
});
alert(My.Derived2.method(10); // 现在提示 40
这个参数, 通过当前方法得到数组或者 arguments 对象,
例如: this.callParent(arguments)
返回调用父类的方法的结果。
返回此元素当前是否有正在进行或在队列中的动画效果, 没有则返回 false.
This method has been deprecated
废弃的方法; 4.0以后使用 getActiveAnimation 替代
如果元素有正在进行的动画效果则返回 true, 否则返回 false
这个类的初始化配置。典型例子:
Ext.define('My.awesome.Class', {
// 这是默认配置
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome' 超级棒
配置
mixins 混入原型 键-值对
获取从该对象被实例化的类的引用。 请注意不同于 self,
this.statics()是独立的作用域，无论this是否运行，总是返回其中的调用类。
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // 总是等于'Cat'，无论'this'是什么，
// 相当于：My.Cat.speciesName
alert(this.self.speciesName); // 依赖 'this'
statics.totalCreated++;
},
clone: function() {
var cloned = new this.self; // 依赖 'this'
cloned.groupName = this.statics().speciesName; // 相当于: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', 然后提示 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', 然后提示 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
停止所有正在运行的特效,并清空此对象内部特效队列,如果此队列包含有尚未开始执行的那些特效.
This method has been deprecated
从 4.0 开始被 stopAnimation 替代
The Element
配置扩展
方法/属性添加到这个类的原型。
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
成员
添加/重写这个类的静态属性。
Ext.define('My.cool.Class', {
...
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { ... }, // My.cool.Class.method1 = function() { ... };
method2: function() { ... } // My.cool.Class.method2 = function() { ... };
});
成员
this
这个类的原型借用另一个类的成员
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
this 借用成员
创建这个类的新实例。
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
所有参数传递至类的构造。
创建的实例。
创建现有的原型方法的别名。例如：
Ext.define('My.cool.Class', {
method1: function() { ... },
method2: function() { ... }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
别名新方法的名称，或对象设置多个别名。 参见flexSetter
原来的方法名
以字符串格式，获取当前类的名称。
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
className 类名
重写这个类的成员。通过callParent重写的方法可以调用。
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
this.callParent(arguments);
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!我要成为一只猫！"
// alerts "I'm a cat!我是一只猫！"
// alerts "Meeeeoooowwww"
在4.1版本, 直接利用这种方法已经过时了。 使用 Ext.define 代替:
Ext.define('My.CatOverride', {
override: 'My.Cat',
constructor: function() {
alert("I'm going to be a cat!");
this.callParent(arguments);
alert("Meeeeoooowwww");
}
});
以上完成了相同的结果，但可以由Ext.Loader重写， 其目标类和生成过程中，可以决定是否需要根据目标类所需的状态覆盖管理(My.Cat)。
This method has been deprecated since 4.1.0
使用 Ext.define 代替
添加到这个类的属性。 这应当被指定为一个对象包含一个或多个属性的文字。
this class 当前类