ExtJS简单的动画效果 -1

说明：这篇文章的大部分内容来源于网上，经过自己实现其效果后，整理如下：

在进行 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

    });

}