ExtJS2.0开发与实践笔记[4]——Ext中的动画处理
|
zhaoxq
老紫竹  
管理员
|
1 # 大 中 小 发表于 2008-04-29 12:58:15
http://blog.csdn.net/cping1982/archive/2008/03/29/2227120.aspx
在进行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 异步特效 20080829_ext_fx.gif sprite1.jpg
快乐渡过每一天，减肥坚持每一天
关联主题 |
|||||
|
