ExtJs之Ext.Fx类,让界面动起来
slideIn('t', {easing: 'easeOut',duration: .5});
?示例：在10秒钟之内将div从右边中央滑入
?
html文件代码如下:
?
<div id="a1"> slideIn </div>
?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] )：滑出效果，作动画隐藏。参数及用法同
上。以下是该方法的默认配置：
?
?
el.slideOut('t', { easing: 'easeOut', duration: .5, remove: false, useDisplay: false});?
?
?
3、highlight ( [String color], [Object options] )：根据设置的颜色高亮显示Element 对象，
然后渐隐为原始颜色。默认情况，高亮显示的背景颜色为黄色。
参数：
color：起始颜色
options：选项配置
常见的配置选项及默认值
?
el.highlight("ffff9c", { attr: "background-color", //可以是任何能够把值设置成颜色代码的 CSS 属性 endColor: (current color) or "ffffff", easing: 'easeIn', duration: 1});?
一个能应用在项目中的典型例子是：
?
?
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.onReady(function() {Ext.get("a4").applyStyles({position : "absolute",top : 200,left : 400,backgroundColor : "red",width : 100,height : 100}).frame("ff0000", 3, { // 内个波纹duration : 3 //每个波纹持续的时间});});?
?
?
5、fadeIn ( [Object options] )：将元素从透明渐变为不透明。结束时的透明度可以根据"endOpacity"选项来指定。
?
示例：
?
Ext.onReady(function() {Ext.get("a4").applyStyles({position : "absolute",top : 200,left : 500,backgroundColor : "red",width : 100,height : 100}).fadeIn({endOpacity : .75, // 可以是0 到1 之前的任意值（例如：.5）duration : 4 //在4秒钟之内将可见度由 0 渐变到 75%});});?
?
?
6、fadeOut ( [Object options] )：将元素从不透明渐变为透明。结束时的透明度可以根据"endOpacity"选项来指定。
示例：
?
?
Ext.onReady(function() {Ext.get("a4").applyStyles({position : "absolute",top : 200,left : 600,backgroundColor : "red",width : 100,height : 100}).fadeOut({endOpacity : 0, // 可以是0 到1 之前的任意值（例如：.5）duration : 4,remove : false,useDisplay : false});});?
?
?
7、scale ( Number width, Number height, [Object options] )：以动画展示元素从开始的高度/宽度转换到结束的高度/宽度。
参数：
width：结束宽度，如果为undefined则保持原始宽度
height：结束高度，如果为undefined为保持原始高度
示例：
?
?
Ext.onReady(function() {Ext.get("a4").applyStyles({position : "absolute",top : 200,left : 700,backgroundColor : "red",width : 10,height : 10}).scale(100, 100, {duration : 2});});?
?
?
8、shift ( Object options )：以动画展示元素任意组合属性的改变，如元素的尺寸、位置坐标和（或）透明度。如果以上属性中的任意一个没有在配置选项对象中指定则该属性不会发生改变。为了使该特效生效，则必须在配置选项对象中设置至少一个新的尺寸、位置坐标或透明度属性。
下面是一个比较有实用性的示例：
?
?
Ext.onReady(function() {Ext.get("a4").applyStyles({position : "absolute",top : 200,left : 800,backgroundColor : "red",width : 10,height : 10}).shift({width : 100,// 动画终止之后的宽度height : 100,// 动画终止之后的高度x : 0,// 动画终止之后的x坐标y : 0,// 动画终止之后的y坐标opacity : .5, // 动画终止之后的透明度，0-1之间的任意值duration : 5 // 动画持续的时间(5秒)});});?
?
9.ghost ( [String anchor], [Object options] )：将元素从视图滑出并伴随着渐隐。作为可
选参数传入的定位锚点将被设置为滑出特效的结束点。
参数：
anchor：同slideIn
示例：
Ext.onReady(function() {Ext.get("a4").applyStyles({position : "absolute",top : 200,left : 900,backgroundColor : "red",width : 100,height : 100}).ghost('b', {easing : 'easeOut',duration : .5,remove : false,useDisplay : false});});?
Ext.Element 类中的动画函数
?
1、setWidth ( Number width, Boolean/Object animate)：设置元素宽度
参数：
width：新宽度；
animate：是否以动画方式设置新的宽度，为true 时有动画效果。也可以配置动画参数。
示例：
Ext.onReady(function() {Ext.onReady(function() {Ext.get("e1").applyStyles({position : "absolute",left : 300,top : 100,width : 200,height : 200,backgroundColor : "red"}).setWidth(500, true);})});元素e1是一个div元素（<div id="e1">setWidth</div>），初始宽度为200px，通过setWidth()方法宽度设置为500px，并且以动画方式将div拉宽。?
?
2、setHeight ( Number height, Boolean/Object animate)：设置高度，意义和使用同上。
?
3、setSize ( Number width, Number height, Boolean/Object animate)：同时设置元素的宽度和高度，并设置是否以动画显示。
参数：
width：新的宽度
height：新的高度
animate：是否带有动画效果，或者配置动画参数
示例：
Ext.onReady(function() {Ext.onReady(function() {Ext.get("a4").applyStyles({position : "absolute",left : 300,top : 100,width : 200,height : 200,backgroundColor : "red"}).setSize(500, 500, true);})});div的初始大小为100*100,通过setSize()将大小变成500*500,并以动画显示。?
?
4、setBounds ( Number x, Number y, Number width, Number height, Boolean/Object?animate)：设置元素的位置和大小。
参数：
x：新的左上角x 坐标
y：新的左上角y坐标
width：新的宽度
height：新的高度
animate：是否以动画显示，或者配置动画参数
示例：
Ext.onReady(function() {Ext.get("a4").applyStyles({position : "absolute",left : 100,top : 100,width : 100,height : 100,backgroundColor : "blue"}).setBounds(0, 0, 500, 500, true);});?将 div元素的位置从100*100 变到0*0，并将大小从100*100变化到500*500。
?
5、show ( Boolean/Object animate)：显示元素。
?
6、hide ( Boolean/Object animate)：隐藏元素。
?
?
?
?
?
?