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

在进行Javascript开发,有时会有一些动画效果的实现需要,这往往浪费了开发人员不必要的精力。而Ext开发小组则提供了Fx类集中处理了大部分常用的js动画特效,减少了我们自己手写代码的复杂度。

下面我给出一个简单的实例代码,其中囊括了大部分的Ext动画效果:

效果图如下:



操作图片如下:


CartoonExt.js
// 图片宽
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
    }
);
}


CartoonExt.html
< 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 >

部分参数如下:

fadeIn( [Object options] ) : Ext.Element 渐显 options参数有以下属性
callback:Function    完成后的回叫方法
scope:Object        目标
easing:String        行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的
easeNone:匀速
easeIn:开始慢且加速
easeOut:开始快且减速
easeBoth:开始慢且减速
easeInStrong:开始慢且加速,t的四次方
easeOutStrong:开始快且减速,t的四次方
easeBothStrong:开始慢且减速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
afterCls:String        事件完成后元素的样式
duration:Number        事件完成时间(以秒为单位)
remove:Boolean        事件完成后元素销毁?
useDisplay:Boolean    隐藏元素是否使用display或visibility属性?
afterStyle:String/Object/Function        事件完成后应用样式
block:Boolean        块状化
concurrent:Boolean    顺序还是同时执行
stopFx :Boolean    当前效果完成后随合的效果是否将停止和移除

fadeOut( [Object options] ) : Ext.Element 渐隐 
fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});

frame( [String color], [Number count], [Object options] ) : Ext.Element 边框变亮扩展然后渐隐
例:el.frame("ff0000", 10, { duration: 3 })

ghost( [String anchor], [Object options] ) : Ext.Element 渐渐滑出视图,anchor定义
tl     左上角(默认)
t      上居中
tr     右上角
l      左边界的中央
c      居中
r      右边界的中央
bl     左下角
b      下居中
br     右下角
例:
el.ghost('b', {
    easing: 'easeOut',
    duration: .5
    remove: false,
    useDisplay: false
});

hasActiveFx() : Boolean 指示元素是否当前有特效正在活动

hasFxBlock() : Boolean 是否有特效阻塞了

highlight( [String color], [Object options] ) : Ext.Element 高亮显示当前元素
例:el.highlight("ffff9c", {
    attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
    endColor: (current color) or "ffffff",
    easing: 'easeIn',
    duration: 1
});

pause( Number seconds ) : Ext.Element 暂停

puff( [Object options] ) : Ext.Element 元素渐大并隐没
例:el.puff({
    easing: 'easeOut',
    duration: .5,
    remove: false,
    useDisplay: false
});

scale( Number width, Number height, [Object options] ) : Ext.Element 缩放
例:el.scale(
    [element's width],
    [element's height], {
    easing: 'easeOut',
    duration: .35
});

sequenceFx() 特效序列

shift( Object options ) : Ext.Element 位移,并可重置大小,透明度等
例:
el.shift({
    width: [element's width],
    height: [element's height],
    x: [element's x position],
    y: [element's y position],
    opacity: [element's opacity],
    easing: 'easeOut',
    duration: .35
});

slideIn( [String anchor], [Object options] ) : Ext.Element 淡入

slideOut( [String anchor], [Object options] ) : Ext.Element 淡出
例:el.slideIn('t', {
    easing: 'easeOut',
    duration: .5
});


stopFx() : Ext.Element  停止特效

switchOff( [Object options] ) : Ext.Element 收起并隐没
例:
el.switchOff({
    easing: 'easeIn',
    duration: .3,
    remove: false,
    useDisplay: false
});

syncFx() : Ext.Element 异步特效



本文转自 cping 51CTO博客,原文链接:http://blog.51cto.com/cping1982/129937

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值