Extjs卡通效果(自定义动画)

Ext  Core 通过预置的动画功能，可以让轻松实现动画功能。通过自定义动画配置，可实现更多的动画效果。动画完成后，可通过回调函数实现后续处理
 Ext Core 动画 8 个定位点的值与描述
值                                        描述
tl                                         左上角
t                                         顶边中心
tr                                         右上角
l                                         左边中心
r                                         右边中心
bl                                         左下角
b                                         底边中心
br                                         右下角
下面开始介绍 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: 'abcdef'
});
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：已垂直或水平滚动方式运动。