这是一个提供基础动画和视觉效果支持的类。注意:此类被引用后会自动应用于 Ext.Element 的接口,
因此所有的效果必须通过 Element 对象来实现。反过来说,既然 Element 对象实际上并没有定义这些效果,
Ext.Fx 类必须被 Element 对象引用后才能使那些效果生效。
值得注意的是,虽然 Fx 的方法和许多非 Fx Element 对象的方法支持“方法链”,即他们返回 Element 对象本身作为方法的返回值,
但是并非每次都能将两个对象混合在一个方法链中。Fx 的方法使用一个内部的效果队列以使每个效果能够在适当的时候按次序展现。
另一方面,对于非 Fx 的方法则没有这样的一个内部队列,它们总是立即生效。正因为如此,虽然可以在一个单链中混合调用 Fx 和非 Fx 的方法,
但是并非总能得到预期的结果,而且必须小心处理类似的情况。
移动类的效果支持8个方向的定位锚,这意味着你可以选择 Element 对象所有8个不同的锚点中的任意一个来作为动画的起点或终点。
下面是所有支持的定位锚点位置:
值 说明
----- -----------------------------
tl 左上角
t 顶部中央
tr 右上角
l 左边中央
r 右边中央
bl 左下角
b 底部中央
br 右下角
尽管某些 Fx 方法可以接受特殊的自定义配置参数,然而下面的配置选项区域内显示了可供所有 Fx 方法使用的公共选项。
@cfg {Function} callback 指定当效果完成时调用的函数
@cfg {Object} scope 特效函数的作用域
@cfg {String} easing 指定特效函数使用的合法的 Easing 值
@cfg {String} afterCls 特效完成后应用的CSS样式类
@cfg {Number} duration 以秒为单位设置的特效持续时间
@cfg {Boolean} remove 特效完成后是否从 DOM 树中完全删除 Element 对象
@cfg {Boolean} useDisplay 隐藏 Element 对象时是否使用
display CSS样式属性替代
visibility属性(仅仅应用于那些结束后隐藏 Element 对象的等效,其他的等效无效)
@cfg {String/Object/Function} afterStyle 特效完成后应用于 Element 对象的指定样式的字符串,例如:"width:100px",或者形如 {width:"100px"} 的对象,或者返回值为类似形式的函数
@cfg {Boolean} block 当特效生效时是否阻塞队列中的其他特效
@cfg {Boolean} concurrent 是否允许特效与队列中的下一个特效并行生效,或者确保他们在运行队列中
@
| |
slideIn
(
[String anchor],
[Object options]
)
: Ext.Element
将元素滑入到视图中。作为可选参数传入的定位锚点将被设置为滑入特效的起始...
将元素滑入到视图中。作为可选参数传入的定位锚点将被设置为滑入特效的起始点。该函数会在需要的时候自动将元素与一个固定尺寸的容器封装起来。 有效的定位锚点可以参见 Fx 类的概述。 用法:
// 默认情况:将元素从顶部滑入
el.slideIn();
// 自定义:在2秒钟内将元素从右边滑入
el.slideIn('r', { duration: 2 });
// 常见的配置选项及默认值
el.slideIn('t', {
easing: 'easeOut',
duration: .5
});
|
Fx
|
| |
slideOut
(
[String anchor],
[Object options]
)
: Ext.Element
将元素从视图中滑出。作为可选参数传入的定位锚点将被设置为滑出特效的结束...
将元素从视图中滑出。作为可选参数传入的定位锚点将被设置为滑出特效的结束点。特效结束后,元素会被隐藏(visibility = 'hidden'), 但是块元素仍然会在 document 对象中占据空间。如果需要将元素从 DOM 树删除,则使用'remove'配置选项。 该函数会在需要的时候自动将元素与一个固定尺寸的容器封装起来。有效的定位锚点可以参见 Fx 类的概述。 用法:
// 默认情况:将元素从顶部滑出
el.slideOut();
// 自定义:在2秒钟内将元素从右边滑出
el.slideOut('r', { duration: 2 });
// 常见的配置选项及默认值
el.slideOut('t', {
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
|
Fx
|
| |
puff
(
[Object options]
)
: Ext.Element
渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后,元素会被隐藏(...
渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后,元素会被隐藏(visibility = 'hidden'), 但是块元素仍然会在 document 对象中占据空间。如果需要将元素从 DOM 树删除,则使用'remove'配置选项。 用法:
// 默认
el.puff();
// 常见的配置选项及默认值
el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
参数项:
options : Object
(可选)由任何 Fx 的配置选项构成的对象
返回:
|
Fx
|
| |
switchOff
(
[Object options]
)
: Ext.Element
类似单击过后般地闪烁一下元素,然后从元素的中间开始收缩(类似于关闭电视...
类似单击过后般地闪烁一下元素,然后从元素的中间开始收缩(类似于关闭电视机时的效果)。 特效结束后,元素会被隐藏(visibility = 'hidden'),但是块元素仍然会在 document 对象中占据空间。 如果需要将元素从 DOM 树删除,则使用'remove'配置选项。 用法:
// 默认
el.switchOff();
// 所有的配置选项及默认值
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
参数项:
options : Object
(可选)由任何 Fx 的配置选项构成的对象
返回:
|
Fx
|
| |
highlight
(
[String color],
[Object options]
)
: Ext.Element
根据设置的颜色高亮显示 Element 对象(默认情况下应用于 bac...
根据设置的颜色高亮显示 Element 对象(默认情况下应用于 background-color 属性,但是也可以通过"attr"配置选项来改变), 然后渐隐为原始颜色。如果原始颜色不可用,你应该设置"endColor"配置选项以免动画结束后被清除。 用法:
// 默认情况:高亮显示的背景颜色为黄色
el.highlight();
// 自定义:高亮显示前景字符颜色为蓝色并持续2秒
el.highlight("0000ff", { attr: 'color', duration: 2 });
// 常见的配置选项及默认值
el.highlight("ffff9c", {
attr: "background-color", //可以是任何能够把值设置成颜色代码的 CSS 属性
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});
|
Fx
|
| |
frame
(
[String color],
[Number count],
[Object options]
)
: Ext.Element
展示一个展开的波纹,伴随着渐隐的边框以突出显示 Element 对象。...
展示一个展开的波纹,伴随着渐隐的边框以突出显示 Element 对象。 用法:
// 默认情况:一个淡蓝色的波纹
el.frame();
// 自定义:三个红色的波纹并持续3秒
el.frame("ff0000", 3, { duration: 3 });
// 常见的配置选项及默认值
el.frame("C3DAF9", 1, {
duration: 1 //整个动画持续的时间(不是每个波纹持续的时间)
// 注意:这里不能使用 Easing 选项在,即使被包含了也会被忽略
});
|
Fx
|
| |
pause
(
Number seconds
)
: Ext.Element
在任何后续的等效开始之前创建一次暂停。如果队列中没有后续特效则没有效果...
在任何后续的等效开始之前创建一次暂停。如果队列中没有后续特效则没有效果。 用法:
el.pause(1);
参数项:
seconds : Number
以秒为单位的暂停时间
返回:
|
Fx
|
| |
fadeIn
(
[Object options]
)
: Ext.Element
将元素从透明渐变为不透明。结束时的透明度可以根据"endOpacity...
将元素从透明渐变为不透明。结束时的透明度可以根据"endOpacity"选项来指定。 用法:
// 默认情况:将可见度由 0 渐变到 100%
el.fadeIn();
// 自定义:在2秒钟之内将可见度由 0 渐变到 75%
el.fadeIn({ endOpacity: .75, duration: 2});
// 常见的配置选项及默认值
el.fadeIn({
endOpacity: 1, //可以是 0 到 1 之前的任意值(例如:.5)
easing: 'easeOut',
duration: .5
});
参数项:
options : Object
(可选)由任何 Fx 的配置选项构成的对象
返回:
|
Fx
|
| |
fadeOut
(
[Object options]
)
: Ext.Element
将元素从不透明渐变为透明。结束时的透明度可以根据"endOpacity...
将元素从不透明渐变为透明。结束时的透明度可以根据"endOpacity"选项来指定。 用法:
// 默认情况:将元素的可见度由当前值渐变到 0
el.fadeOut();
// 自定义:在2秒钟内将元素的可见度由当前值渐变到 25%
el.fadeOut({ endOpacity: .25, duration: 2});
// 常见的配置选项及默认值
el.fadeOut({
endOpacity: 0, 可以是 0 到 1 之前的任意值(例如:.5)
easing: 'easeOut',
duration: .5
remove: false,
useDisplay: false
});
参数项:
options : Object
(可选)由任何 Fx 的配置选项构成的对象
返回:
|
Fx
|
| |
scale
(
Number width,
Number height,
[Object options]
)
: Ext.Element
以动画展示元素从开始的高度/宽度转换到结束的高度/宽度。 用法:
以动画展示元素从开始的高度/宽度转换到结束的高度/宽度。 用法:
// 将宽度和高度设置为 100x100 象素
el.scale(100, 100);
// 常见的配置选项及默认值。如果给定值为 null,则高度和宽度默认被设置为元素已有的值。
el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
});
|
Fx
|
| |
shift
(
Object options
)
: Ext.Element
以动画展示元素任意组合属性的改变,如元素的尺寸、位置坐标和(或)透明度...
以动画展示元素任意组合属性的改变,如元素的尺寸、位置坐标和(或)透明度。 如果以上属性中的任意一个没有在配置选项对象中指定则该属性不会发生改变。 为了使该特效生效,则必须在配置选项对象中设置至少一个新的尺寸、位置坐标或透明度属性。 用法:
// 将元素水平地滑动到X坐标值为200的位置,同时还伴随着高度和透明度的改变
el.shift({ x: 200, height: 50, opacity: .8 });
// 常见的配置选项及默认值。
el.shift({
width: [element's width],
height: [element's height],
x: [element's x position],
y: [element's y position],
opacity: [element's opacity],
easing: 'easeOut',
duration: .35
});
参数项:
options : Object
由任何 Fx 的配置选项构成的对象
返回:
|
Fx
|
| |
ghost
(
[String anchor],
[Object options]
)
: Ext.Element
将元素从视图滑出并伴随着渐隐。作为可选参数传入的定位锚点将被设置为滑出...
将元素从视图滑出并伴随着渐隐。作为可选参数传入的定位锚点将被设置为滑出特效的结束点。 用法:
// 默认情况:将元素向下方滑出并渐隐
el.ghost();
// 自定义:在2秒钟内将元素向右边滑出并渐隐
el.ghost('r', { duration: 2 });
// 常见的配置选项及默认值。
el.ghost('b', {
easing: 'easeOut',
duration: .5
remove: false,
useDisplay: false
});
|
Fx
|
| |
syncFx
(
)
: Ext.Element
确保元素调用 syncFx 方法之后所有队列中的特效并发运行。它与 {...
确保元素调用 syncFx 方法之后所有队列中的特效并发运行。它与 {@link #sequenceFx} 的作用是相反的。
|
Fx
|
| |
sequenceFx
(
)
: Ext.Element
确保元素调用 sequenceFx 方法之后所有队列中的特效依次运行。...
确保元素调用 sequenceFx 方法之后所有队列中的特效依次运行。它与 {@link #syncFx} 的作用是相反的。
|
Fx
|
| |
hasActiveFx
(
)
: Boolean
当元素拥有任何活动的或队列中的特效时返回 true,否则返回 false。
当元素拥有任何活动的或队列中的特效时返回 true,否则返回 false。
参数项:
返回:
Boolean 如果元素拥有特效为 true,否则为 false。
|
Fx
|
| |
stopFx
(
)
: Ext.Element
停止运行中的任何特效,如果元素的内部特效队列中还包含其他尚未开始的特效...
停止运行中的任何特效,如果元素的内部特效队列中还包含其他尚未开始的特效也一并清除。
|
Fx
|
| |
hasFxBlock
(
)
: Boolean
如果元素的当前特效阻塞了特效队列以致于在当前特效完成前其他特效无法排队...
如果元素的当前特效阻塞了特效队列以致于在当前特效完成前其他特效无法排队,则返回 true。如果元素没有阻塞队列则返回 false。 此方法一般用于保证由用户动作启动的特效在相同的特效重新启动之前能够顺利完成(例如:即使用户点击了很多次也只触发一个效果)。
参数项:
返回:
Boolean 如果阻塞返回 true,否则返回 false。
|
Fx
|
| |
fxWrap
(
)
|
Fx
|
| |
getFxRestore
(
)
|
Fx
|
| |
getFxEl
(
)
|
Fx
|