Ext动画功能

Ext Core通过预置的动画功能，可以让开发人员轻松实现动画功能。通过自定义动画配置，可实现更多的动画效果。在动画完成后，开发人员可通过回调函数实现后续处理。

Ext Core动画插件可选择8个不同定位点来开始或结束动画。这8个定位点的值与描述请看表1-1。




下面开始介绍Ext Core预置的12个动画功能。

slideIn/slideOut：元素的滑进或滑出效果。默认slideIn是从顶部滑进的，而slideOut是从底部滑出的，可通过修改第1个参数设置滑进或滑出位置。其使用方法请看下面代码。

var el = Ext.get('elId');  //从顶部滑进  el.slideIn();  //从底部滑出  el.slideOut();  //从左边滑进  el.slideIn('l',{    easing: 'easeOut',    duration: .5  }); puff：元素慢慢向四周扩大并逐渐消失。当效果完成后，元素将隐藏（visibility属性为hidden），不过元素原来所占位置将继续存在。如果需要删除元素，请设置remove属性为true。其使用方法请看下面代码。

var el = Ext.get('elId');  //默认方式  el.puff();  //自定义方式，元素消失后删除元素  el.puff({    easing: 'easeOut',    duration: .5,    remove: true,    useDisplay: false }) switchOff：元素闪烁一下，然后往中心折叠（类似关掉电视）。当效果完成后，元素将隐藏（visibility属性为hidden），不过元素原来所占位置将继续存在。如果需要删除元素，请设置remove属性为true。其使用方法请看下面代码。

var el = Ext.get('elId');  //默认方式  el.switchOff();  //自定义方式，元素消失后删除元素  el.switchOff({    easing: 'easeOut',    duration: .5,    remove: true,    useDisplay: false }); highlight：利用设置的颜色高亮显示元素，然后逐渐消隐回原有颜色。默认是设置元素背景颜色，可通过设置attr属性设置高亮显示方式。如果没有初始颜色，可以使用endColor属性设置消隐后的颜色。其使用方法请看下面代码。

var el = Ext.get('elId');  //默认方式  el.highlight();  //自定义方式   el.highlight('0f0f0f',{    easing: 'easeOut',    attr: 'color'   duration: .5,    endColor: 'dddddd' }); frame：从元素边界开始以水波扩散的方式提示用户。其使用方法请看下面代码。

var el = Ext.get('elId');  //默认方式   el.frame();  //自定义方式   el.frame('0f0f0f',{    duration: .5,  }); pause：在队列中的动画开始之前产生一个停顿。其使用方法请看下面代码。

el.pause(1); //停顿1秒 fadeIn/fadeout：实现渐变效果。fadeIn方法从透明渐变到不透明。fadeOut方法从不透明渐变到透明。通过endOpacity属性可设置渐变结束后的不透明度。要注意在IE中可能要设置useDisplay属性为true。其使用方法请看下面代码。

var el = Ext.get('elId');  el.fadeIn();  el.fadeOut();  //自定义方式   el.fadeIn({    endpacity: 1,    easing: 'easeOut',    duration: .5  }); scale：将元素的尺寸从原有尺寸过渡到设置的尺寸。其使用方法请看下面代码。

var el = Ext.get('elId');  el.scale(100，200);  //自定义方式   el.fadeIn(100，200，{    easing: 'easeOut',    duration: .5  }); shift：元素渐变到新的位置、新的尺寸和不透明度。该方法至少需要位置、尺寸和不透明度其中一项设置，不然元素不会被改变。其使用方法请看下面代码。

var el = Ext.get('elId');  el.shift({    width:100, //元素的新宽度    height: 100, //元素的新高度    x: 10 , //元素的新x坐标    y: 10 , //元素的新y坐标    opacity: .8， //元素的新不透明度    easing: 'easeOut',    duration: .5  });   //以上属性width、height、x、y、opacity至少必须有一项 ghost：当元素渐隐时，元素同时滑出。可通过第1个参数设置滑出位置。其使用方法请看下面代码。

var el = Ext.get('elId');  el.ghost();  //自定义方式，从左边滑出  el.ghost('l'，{    easing: 'easeOut',    duration: .5,    remove:false,    userDisplay:fase  }); animate：通过该方法可自定义复杂的动画效果。其使用方法请看下面代码。

var el = Ext.get('elId');  el.animate(  {      borderWith:{to : 3,from:0},      opacity: {to: .5, from:1}      height: {to 100 , from:el.getHeight()},      widht: {to 200 , from:el.getwidth()},      top:{by:-100,unit: 'px'}   },    1,//动画长度，单位为秒，该参数可选    null, //回调函数，该参数可选    'easeOut',//渐变方式，该参数可选    'run' //动画类型  ); 在定义中，borderWidth、opactiy等属性可以为元素的任何样式属性。动画类型包括以下几个类型：

run：默认类型。

color：动画渐变背景、文本或边界颜色。

motion：在渐变过程中使用Bezier曲线作为运动轨迹。

scroll：已垂直或水平滚动方式运动。