?
?
? ? ? ?界面具有动画效果最后归结为元素的动画效果。Extjs 定义了若干个方法用于完成元素动画的实现，一些是内置的，一些需要程序员自己编程。简单说，动态修改元素的样式是实现动态效果最直接最常见的方法，所以，这其中并无奥妙可言，看清楚了事实的真相，只要具备足够丰富的想象力，任何人都可以做出叹为观止的动画。
?
? ? ? ?虽然动画效果应用于Ext.Element 对象，却并不定义在Ext.Element 类中，而是定义在另一个类Ext.Fx 中。这让我非常疑惑，仔细查看了Ext.Element的源代码，愣是没发现Ext.Fx的身影，最终，在Ext.Fx 中看到了玄机，该类的最后一个语句告诉了我们事情的原委：Ext.apply(Ext.Element.prototype, Ext.Fx);，看看他的解释：Ext.Fx is automatically applied to?Element so that all basic effects are available directly via the Element API（Ext.Fx 自动应用于Element 对象，所有的基本效果直接通过Element 调用）。
?
?
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从右边中央滑入
?
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,