说明：这篇文章的大部分内容来源于网上，经过自己实现其效果后，整理如下：
在进行 Javascript 开发，有时会有一些动画效果的实现需要，这往往浪费了开发人员不必要的精力。而 Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效，减少了我们自己手写代码的复杂度。
下面我给出一个简单的实例代码，其中囊括了大部分的 Ext 动画效果：
（注意导入js和css文件的目录，图片自己设置）
CartoonExt.js
var WIDTH = 300; // 图片宽
var HEIGHT = 300; // 图片高
/**
* 刷新
*/
function reset() {
// 以 Ext 获得指定元素，并指定此元素左边距、上方边距、右边距、下方边距
Ext. get ( 'picture' ).highlight().setBounds(10, 10, WIDTH + 10, HEIGHT + 10);
}
/**
* 逐渐放大
*/
function enlarge() {
reset();
// 在指定时间内移动到指定位置
Ext. get ( 'picture' ).setBounds(150, 80, WIDTH + 50, WIDTH + 80, { // 指定的位置
duration : 1.0 //duration:Number 事件完成时间（以秒为单位）
});
}
/**
* 连续动画
*/
function play() {
Ext. get ( 'picture' ).highlight().fadeOut().fadeIn().pause(2).switchOff().puff();
// IE 下不支持 switchOn() 方法，这是一个 Ext 的 bug
}
/**
* 淡出
*/
function fadeout() {
// 设定最后不透明度为 0.0( 完全透明 ), 持续时间为 1.0 ，方式为 easeNone
Ext. get ( 'picture' ).setOpacity (0.0, {
duration : 1.0,
easing : 'easeNone' //easing:String 行为方法 默认值是 :easeOut
});
}
/**
* 淡入
*/
function fadein() {
Ext. get ( 'picture' ).setOpacity (1.0, {
duration : 1.0,
easing : 'easeNone'
});
}
function execution() {
reset();
var easingMethod = document.getElementById( 'easing' ).value;
Ext. get ( 'picture' ).setLocation(150, 150, {
duration : 1.0,
easing : easingMethod
});
}