Ext.fx动画特效用法（转）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Eg.html</title> <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" /> <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../../ext/ext-all.js"></script><script type="text/javascript" src="./animation.js"></script><script type="text/javascript"> Ext.onReady(function(){ });</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="刷新" > <input type="button" value="逐渐放大" > <input type="button" value="淡出" > <input type="button" value="淡入" > <input type="button" value="连续动画" > <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="执行" > </div></body></html>// 图片宽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 });}
http://dl.iteye.com/upload/attachment/163191/9ecc5ac6-7971-305f-8f39-71bb5716ad1d.jpg
fadeIn( ) : 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( ) : Ext.Element 渐隐
fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});
frame( , , ) : Ext.Element 边框变亮扩展然后渐隐
例:el.frame("ff0000", 10, { duration: 3 })
ghost( , ) : 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( , ) : 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( ) : Ext.Element 元素渐大并隐没
例:el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
scale( Number width, Number height, ) : Ext.Element 缩放
例:el.scale(
,
, {
easing: 'easeOut',
duration: .35
});
sequenceFx() 特效序列
shift( Object options ) : Ext.Element 位移,并可重置大小,透明度等
例:
el.shift({
width: ,
height: ,
x: ,
y: ,
opacity: ,
easing: 'easeOut',
duration: .35
});
slideIn( , ) : Ext.Element 淡入
slideOut( , ) : Ext.Element 淡出
例:el.slideIn('t', {
easing: 'easeOut',
duration: .5
});
stopFx() : Ext.Element 停止特效
switchOff( ) : Ext.Element 收起并隐没
例:
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
syncFx() : Ext.Element 异步特效
页:
[1]