页面与脚本完全分离(2)

五、Ext.Fx类
正如前面所说，Extjs的动画大部分定义在Ext.Fx中，尽管如此，Ext.Element类也定义了部分动画函数。我们先来看看Ext.Fx类中的重要方法。


1、slideIn ( [String anchor], [Object options] )：
功能：滑入效果，作动画显示。
参数：
anchor：推出的方向，定义了8种不同的方向，值不区别大小写，可选。

值
说明

tl
左上角

t
顶部中央

tr
右上角

l
左边中央

r
右边中央

bl
左下角

b
底部中央

br
右下角


options：选项配置，比较典型的是duration属性，用于定义动画持续的时间，可选。以下是默认配置：

slideIn('t', {

easing: 'easeOut',

duration: .5

});

示例：在10秒钟之内将div从右边中央滑入

5_5_1.html

<div id="a1"> slideIn </div>

5_5_1.js

Ext.onReady(function(){

Ext.get("a1").applyStyles({position: "absolute", top: 200, left: 200, backgroundColor: "red", width: 100, height: 100}).slideIn("r", {duration: 10});

})

applyStyles是Ext.Element的方法，用于定义指定元素的样式。


2、slideOut ( [String anchor], [Object options] )：滑出效果，作动画隐藏。参数及用法同上。以下是该方法的默认配置：

slideOut('t', {

easing: 'easeOut',

duration: .5,

remove: false,

useDisplay: false

}

);


3、highlight ( [String color], [Object options] )：根据设置的颜色高亮显示 Element 对象，然后渐隐为原始颜色。默认情况，高亮显示的背景颜色为黄色。

参数：

color：起始颜色

options：选项配置

一个能应用在项目中的典型例子是：

Ext.get("a2").applyStyles({

position: "absolute",

top: 200,

left: 300,

backgroundColor: "red",

width: 100,

height: 100}).highlight("0000ff"/*起始颜色*/,

{

attr: 'background-color', /*我们改变的是背景颜色*/

duration: 2,/*动画持续时间*/

endColor: "ff0000" /*结束颜色*/

}

);

如果可以把attr属性值改成color，我们发现颜色改变的不再是背景，而是文字颜色。endColor的颜色值不能是形如red之类的英文单词，只能是16进制表示。起始颜色为蓝色，终止颜色为红色，中间的渐变由Extjs自动完成，非常自然。

4、frame ( [String color], [Number count], [Object options] )：展示一个展开的波纹，伴随着渐隐的边框以突出显示 Element 对象。默认情况下展示的是一个淡蓝色的波纹。
参数：
color：波纹颜色
count：波纹的个数
options：选项配置
示例：三个红色的波纹并持续3秒。
Ext.get("a3").applyStyles({

position: "absolute",

top: 200,

left: 400,

backgroundColor: "red",

width: 100,

height: 100}).frame("ff0000", 3, { duration: 3 });


5、fadeIn ( [Object options] )：将元素从透明渐变为不透明。结束时的透明度可以根据"endOpacity"选项来指定。
示例：
Ext.get("a4").applyStyles({

position: "absolute",

top: 200,

left: 500,

backgroundColor: "red",

width: 100,

height: 100}).fadeIn({

endOpacity: 1, //可以是 0 到 1 之前的任意值（例如：.5）
duration: 4

});