ExtJS2.0开发与实践笔记[4]——Ext中的动画处理

// 图片宽
var  WIDTH = 300 ;
// 图片高
var  HEIGHT = 262 ;
function  reset()  {
    //以Ext获得指定元素，并指定此元素左边距、上方边距、右边距、下方边距
    Ext.get('target').highlight().setBounds(10,10,WIDTH+10,HEIGHT+10);
}
 
function  act()  {
    //刷新
    reset();
    //在指定时间内移动到指定位置
    Ext.get('target').setBounds(150,80,WIDTH+150,WIDTH+80,{duration:1.0});
}
/**
 * 播放连续动作
 */
function  Anime() {
    Ext.get('target').highlight().fadeOut().fadeIn().pause(2).switchOff().puff();
    //IE下不支持switchOn()方法，这是一个Ext的bug
}
/**
 * 淡出
 */  
function  fadeout()  {
    //设定最后不透明度为0.0(完全透明),持续时间为1.0，方式为easeNone
    Ext.get('target').setOpacity(0.0,{ duration:1.0,easing:'easeNone'});
}

/**
 * 淡入
 */
function  fadein()  {
    Ext.get('target').setOpacity(1.0,{duration:1.0,easing:'easeNone'});
}

function  act2()  {
    reset();
    var easingMethod=document.getElementById('easing').value;
    Ext.get('target').setLocation(150,150,{
        duration:1.0,
        easing:easingMethod
    });
}

< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" >
         < title > CartoonExt </ title >
         <!-- 加载ExtJs资源 -->
         < script  type ="text/javascript"  src ="adapter/ext/ext-base.js" >
         </ script >
         < script  type ="text/javascript"  src ="ext-all.js" >
         </ script >
         <!-- 我的js -->
         < script  type ="text/javascript"  src ="CartoonExt.js" >
         </ script >
     </ head >
     < body >
         < div  style ="width:300px; height:450px;" >
           <!-- 被移动的元素 -->
             < img  id ="target"  src ="sprite1.jpg" >
         </ div >
         < div  style ="text-align: center;" >
             < input  type ="button"  value ="刷新"  onclick ="reset();" >
             < input  type ="button"  value ="逐渐放大"  onclick ="act();" >
             < input  type ="button"  value ="淡出"  onclick ="fadeout();" >
             < input  type ="button"  value ="淡入"  onclick ="fadein();" >
             < input  type ="button"  value ="连续动画"  onclick ="Anime();" >
             < BR >
             < BR >
            　  效果列表
             < select  id ="easing" >
                 < option  value ="easeNone" > easeNone </ option >
                 < option  value ="easeIn" > easeIn </ option >
                 < option  value ="easeOut" > easeOut </ option >
                 < option  value ="easeBoth" > easeBoth </ option >
                 < option  value ="easeInStrong" > easeInStrong </ option >
                 < option  value ="easeOutStrong" > easeOutStrong </ option >
                 < option  value ="easeBothStrong" > easeBothStrong </ option >
                 < option  value ="elasticIn" > elasticIn </ option >
                 < option  value ="elasticOut" > elasticOut </ option >
                 < option  value ="elasticBoth" > elasticBoth </ option >
                 < option  value ="backIn" > backIn </ option >
                 < option  value ="backOut" > backOut </ option >
                 < option  value ="backBoth" > backBoth </ option >
                 < option  value ="bounceIn" > bounceIn </ option >
                 < option  value ="bounceOut" > bounceOut </ option >
                 < option  value ="bounceBoth" > bounceBoth </ option >
             </ select >
             < input  type ="button"  value ="执行"  onclick ="act2();" >
         </ div >
     </ body >
</ html >