页面与脚本完全分离(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

     });