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

最新推荐文章于 2021-04-17 21:51:53 发布

淡忘过去努力未来

最新推荐文章于 2021-04-17 21:51:53 发布

阅读量337

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_29258777/article/details/72675222

版权

web前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
Ext Js入门第6篇-动画处理

Ext Js动画主要由Ext.fx.Anim和Ext.fx.Animator两个类完成，区别如下： Ext.fx.Anim：用于定义简单的Tween动画 Ext.fx.Animator：主要用于定义关键帧的动画1.使用Ext.fx.Anim实现简单动画 a
复制链接

扫一扫