Ext中的动画处理 -

huoyunshen888

浏览: 83474 次
性别:
来自: 西安

最近访客更多访客>>

wangning1125

taiji8497

qq_15167443

BlackGray

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ext中的动画处理

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>
        
        <script type="text/javascript" src="adapter/ext/ext-base.js">...
        </script>
        <script type="text/javascript" src="ext-all.js">...
        </script>
        
        <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 异步特效

分享到：