Ext Js入门第6篇-动画处理

来源：互联网发布：java获取当天0点时间编辑：程序博客网时间：2024/06/05 05:04

Ext Js动画主要由Ext.fx.Anim和Ext.fx.Animator两个类完成，区别如下：

Ext.fx.Anim：用于定义简单的Tween动画

Ext.fx.Animator：主要用于定义关键帧的动画

1.使用Ext.fx.Anim实现简单动画

alternate：当iterations值大于1，动画需要重复播放，将该选项设为true，保证动画播放结束，动画从开始到结束

callback：定义动画执行结束后触发的回调函数

delay：指定动画延迟多长实践后开始播放

duration：指定动画持续时间

easing：指定动画的执行方式，该选项支持backIn，backOut，bouneIn，bounceOut，ease，easeIn，等值，这些不同值控制动画的播放速度

form：指定动画的开始状态

<body><div id="a" style="background-color: #afa;">fjaa</div></body><script>   Ext.onReady(function()   {      Ext.create('Ext.fx.Anim',      {         //对a创建动画         target:"a",         //动画持续时间         duration:2000,         //指定动画循环播放         alternate:true,         //指定播放时间次数10次         iterations:10,         //指定动画开始状态         from:{             width:160,             height:60         },         //指定动画的结束状态         to:{             width:300,             height:150,             opacity:0.5         }      });   });</script>

使用Ext.fx.Animator实现多个关键帧

<body><div id="a" style="background-color: #afa;">fjaa</div></body><script>   Ext.onReady(function()   {       Ext.create('Ext.fx.Animator',{       //对a创建动画       target:"a",           //动画持续时间           duration:10000,           //定义多个关键帧信息           keyframes:{           0:{           opacity:1,           backgroundColor:'f00',           width:500           },           20:{           x:30,           height:35,           opcaity:0.5           },           40:{           x:130,           width:300,           height:60,           backgroundColor:'00f'           },           60:{           y:80,           height:40,           opcaity:0.3           },           80:{           width:200,           y:160           },           100:{           opcaity:1,           backgroundColor:'0f0'           }           }       });          });</script>

2.为元素增加动画

Ext.dom.Element提供大量setXxx()方法在改变该元素的大小，位置时，都允许额外地传入一个动画配置对象。

<body><div id="a" style="background-color: #afa;">fjaa</div><button id="zoomIn">放大</button><button id="zoomOut">缩小</button></body><script>   Ext.onReady(function()   {       var target=Ext.get("a");       //为zoomin按钮的click事件绑定事件处理函数       Ext.fly("zoomIn").on("click",function()       {       target.setSize(400,400,{       duration:1000,       easing:"backIn"       });       });       //为zoomOut按钮的click事件绑定事件处理函数       Ext.fly("zoomOut").on("click",function()       {       target.setSize(40,40,{       duration:1000,       easing:"easeInOut"       });       });   });</script>

除了上面的方式增加动画之外，因此Ext.util.Animate提供下面的两种方法混入：

animate(Object config):根据config来执行动画

stopAnimation():停止正在执行的动画

<body><div id="a" style="background-color: #afa;">fjaa</div></body><script>   Ext.onReady(function()   {       var target=Ext.get("a");       //开始执行动画       target.animate({       //指定动画执行时间       duration:2000,       //指定动画结束状态       to:{       width:350,       height:130,       backgroundColor:'#faa',       opcaity:0.5       }       });   });</script>

除此之外，还可以使用keyframes指定多个关键帧

阅读全文

0 0