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

mmdev

浏览: 12928203 次
性别:
来自: 大连

最近访客更多访客>>

jklwan

u012363178

anttu

devcang

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (15973)

社区版块

存档分类

2013-03 ( 14)
2013-02 ( 88)
2013-01 ( 196)
更多存档...

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

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

效果图如下：

操作图片如下：

CartoonExt.js

//图片宽

varWIDTH=300;

//图片高

varHEIGHT=262;

functionreset(){

//以Ext获得指定元素，并指定此元素左边距、上方边距、右边距、下方边距

Ext.get('target').highlight().setBounds(10,10,WIDTH+10,HEIGHT+10);

}

functionact(){

//刷新

reset();

//在指定时间内移动到指定位置

Ext.get('target').setBounds(150,80,WIDTH+150,WIDTH+80,{duration:1.0});

}

/**

*播放连续动作

functionAnime(){

Ext.get('target').highlight().fadeOut().fadeIn().pause(2).switchOff().puff();

//IE下不支持switchOn()方法，这是一个Ext的bug

}

/**

*淡出

functionfadeout(){

//设定最后不透明度为0.0(完全透明),持续时间为1.0，方式为easeNone

Ext.get('target').setOpacity(0.0,{duration:1.0,easing:'easeNone'});

}

/**

*淡入

functionfadein(){

Ext.get('target').setOpacity(1.0,{duration:1.0,easing:'easeNone'});

}

functionact2(){

reset();

vareasingMethod=document.getElementById('easing').value;

Ext.get('target').setLocation(150,150,{

duration:1.0,

easing:easingMethod

});

}

CartoonExt.html

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">

<title>CartoonExt</title>

<scripttype="text/javascript"src="adapter/ext/ext-base.js">

</script>

<scripttype="text/javascript"src="ext-all.js">

</script>

<scripttype="text/javascript"src="CartoonExt.js">

</script>

</head>

<body>

<divstyle="width:300px;height:450px;">

<imgid="target"src="sprite1.jpg">

</div>

<divstyle="text-align:center;">

<inputtype="button"value="刷新"onclick="reset();">

<inputtype="button"value="逐渐放大"onclick="act();">

<inputtype="button"value="淡出"onclick="fadeout();">

<inputtype="button"value="淡入"onclick="fadein();">

<inputtype="button"value="连续动画"onclick="Anime();">

<BR>

　效果列表

<selectid="easing">

<optionvalue="easeNone">easeNone</option>

<optionvalue="easeIn">easeIn</option>

<optionvalue="easeOut">easeOut</option>

<optionvalue="easeBoth">easeBoth</option>

<optionvalue="easeInStrong">easeInStrong</option>

<optionvalue="easeOutStrong">easeOutStrong</option>

<optionvalue="easeBothStrong">easeBothStrong</option>

<optionvalue="elasticIn">elasticIn</option>

<optionvalue="elasticOut">elasticOut</option>

<optionvalue="elasticBoth">elasticBoth</option>

<optionvalue="backIn">backIn</option>

<optionvalue="backOut">backOut</option>

<optionvalue="backBoth">backBoth</option>

<optionvalue="bounceIn">bounceIn</option>

<optionvalue="bounceOut">bounceOut</option>

<optionvalue="bounceBoth">bounceBoth</option>

</select>

<inputtype="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 异步特效

分享到：