| « | October 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | | |
|
公告 |
| 本博客在此声明所有文章均为转摘，只做资料收集使用。并无其他商业用途。 |
| Blog信息 |
|
blog名称:
日志总数:210
评论数量:205
留言数量:-19
访问次数:923027
建立时间:2007年5月10日 |
| |
|
 ExtJS2.0开发与实践笔记[4]——Ext中的动画处理
文章收藏, 网上资源, 软件技术, 电脑与网络
李小白 发表于 2008/4/24 23:01:20 |
| 在进行Javascript开发，有时会有一些动画效果的实现需要，这往往浪费了开发人员不必要的精力。而Ext开发小组则提供了Fx类集中处理了大部分常用的js动画特效，减少了我们自己手写代码的复杂度。下面我给出一个简单的实例代码，其中囊括了大部分的Ext动画效果：效果图如下：500)this.width=500'>操作图片如下：500)this.width=500'>CartoonExt.js
500)this.width=500'>//图片宽500)this.width=500'>var WIDTH=300;500)this.width=500'>//图片高500)this.width=500'>var HEIGHT=262;500)this.width=500'>500)this.width=500'>function reset() ...{500)this.width=500'> //以Ext获得指定元素，并指定此元素左边距、上方边距、右边距、下方边距500)this.width=500'> Ext.get('target').highlight().setBounds(10,10,WIDTH+10,HEIGHT+10);500)this.width=500'>}500)this.width=500'> 500)this.width=500'>500)this.width=500'>function act() ...{500)this.width=500'> //刷新500)this.width=500'> reset();500)this.width=500'> //在指定时间内移动到指定位置500)this.width=500'>500)this.width=500'> Ext.get('target').setBounds(150,80,WIDTH+150,WIDTH+80,...{duration:1.0});500)this.width=500'>}500)this.width=500'>500)this.width=500'>/**//**500)this.width=500'> * 播放连续动作500)this.width=500'> */500)this.width=500'>500)this.width=500'>function Anime()...{500)this.width=500'> Ext.get('target').highlight().fadeOut().fadeIn().pause(2).switchOff().puff();500)this.width=500'> //IE下不支持switchOn()方法，这是一个Ext的bug500)this.width=500'>}500)this.width=500'>500)this.width=500'>/**//**500)this.width=500'> * 淡出500)this.width=500'> */ 500)this.width=500'>500)this.width=500'>function fadeout() ...{500)this.width=500'> //设定最后不透明度为0.0(完全透明),持续时间为1.0，方式为easeNone500)this.width=500'>500)this.width=500'> Ext.get('target').setOpacity(0.0,...{ duration:1.0,easing:'easeNone'});500)this.width=500'>}500)this.width=500'>500)this.width=500'>500)this.width=500'>/**//**500)this.width=500'> * 淡入500)this.width=500'> */500)this.width=500'>500)this.width=500'>function fadein() ...{500)this.width=500'>500)this.width=500'> Ext.get('target').setOpacity(1.0,...{duration:1.0,easing:'easeNone'});500)this.width=500'>}500)this.width=500'>500)this.width=500'>500)this.width=500'>function act2() ...{500)this.width=500'> reset();500)this.width=500'> var easingMethod=document.getElementById('easing').value;500)this.width=500'>500)this.width=500'> Ext.get('target').setLocation(150,150,...{500)this.width=500'> duration:1.0,500)this.width=500'> easing:easingMethod500)this.width=500'> });500)this.width=500'>}CartoonExt.html
500)this.width=500'><html>500)this.width=500'> <head>500)this.width=500'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">500)this.width=500'> <title>CartoonExt</title>500)this.width=500'> <!--加载ExtJs资源-->500)this.width=500'>500)this.width=500'> <script type="text/javascript" src="adapter/ext/ext-base.js">...500)this.width=500'> </script>500)this.width=500'>500)this.width=500'> <script type="text/javascript" src="ext-all.js">...500)this.width=500'> </script>500)this.width=500'> <!--我的js-->500)this.width=500'>500)this.width=500'> <script type="text/javascript" src="CartoonExt.js">...500)this.width=500'> </script>500)this.width=500'> </head>500)this.width=500'> <body>500)this.width=500'> <div style="width:300px; height:450px;">500)this.width=500'> <!--被移动的元素-->500)this.width=500'> <img id="target" src="sprite1.jpg">500)this.width=500'> </div>500)this.width=500'> <div style="text-align: center;">500)this.width=500'> <input type="button" value="刷新" onclick="reset();">500)this.width=500'> <input type="button" value="逐渐放大" onclick="act();">500)this.width=500'> <input type="button" value="淡出" onclick="fadeout();">500)this.width=500'> <input type="button" value="淡入" onclick="fadein();">500)this.width=500'> <input type="button" value="连续动画" onclick="Anime();">500)this.width=500'> <BR>500)this.width=500'> <BR>500)this.width=500'> 效果列表500)this.width=500'> <select id="easing">500)this.width=500'> <option value="easeNone">easeNone</option>500)this.width=500'> <option value="easeIn">easeIn</option>500)this.width=500'> <option value="easeOut">easeOut</option>500)this.width=500'> <option value="easeBoth">easeBoth</option>500)this.width=500'> <option value="easeInStrong">easeInStrong</option>500)this.width=500'> <option value="easeOutStrong">easeOutStrong</option>500)this.width=500'> <option value="easeBothStrong">easeBothStrong</option>500)this.width=500'> <option value="elasticIn">elasticIn</option>500)this.width=500'> <option value="elasticOut">elasticOut</option>500)this.width=500'> <option value="elasticBoth">elasticBoth</option>500)this.width=500'> <option value="backIn">backIn</option>500)this.width=500'> <option value="backOut">backOut</option>500)this.width=500'> <option value="backBoth">backBoth</option>500)this.width=500'> <option value="bounceIn">bounceIn< |
|
|