微信小程序--如何实现动画效果

作者：模板之家 2017-12-19 10:32 819人关注

view plaincopyviewclass=view_aimageanimation={{animation}}class=a_imgsrc=http://img.blog.csdn.net/20170614190537974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fonts ... v ...

view plaincopyviewclass="view_a"imageanimation="{{animation}}"class="a_img"src="http://img.blog.csdn.net/20170614190537974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fonts ...

[html] view plain copy
						 
					<view  class="view_a">  

					<image animation="{{animation}}" class="a_img" src="http://img.blog.csdn.net/20170614190537974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"></image>  

					</view>  

					<view class="sure" bindtap="dh">发射</view>

[css] view plain copy
						 
					.sure{  

					  width: 10%;  

					  height:80rpx;  

					  margin-top: 0rpx;  

					  margin-left: 45%;  

					  background: #00ddff;  

					  border-radius: 50rpx;  

					  text-align: center;  

					  line-height: 80rpx;  

					  color: #fff;  

					}  

					.view_a{  

					  width: 100%;  

					  height: 900rpx;  

					  display: flex;  

					  background-image: url('http://img.blog.csdn.net/20170615103714645?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center');  

					}  

					.a_img{  

					  margin-top: 600rpx;  

					  margin-left:100rpx;  

					  width: 80rpx;  

					  height:80rpx;  

					}

[javascript] view plain copy
						 
					data: {  

					    animation : ''  

					 },  

					 dh: function(){  

					    var that = this;  

					     //实例化  

					     that.animation = wx.createAnimation({  

					       duration: 200,  

					       timingFunction: "ease",  

					       delay: 1000,  

					       transformOrigin: 'center',  

					       success: function (res) {  

					         console.log(res)  

					       }  

					     })  

					     that.animation  

					     .rotate(180).step()   //原点顺时针旋转180度  也可以不加.step() 不加的话便是动画同时执行  

					     .rotate(-180).step()  //原点逆时针旋转180度  

					     .rotate(0).step()     //回到初始  

					     .scale(1.3).step()    // x,y轴同时缩放1.3倍  

					     .translateX(90).step()//x轴偏移90px  

					     .translateY(20).step()//y轴偏移20px  

					     .skew(30).step()      //x轴沿顺时针偏移30度  

					     .skew(-30).step()     //x轴沿逆时针偏移30度  

					     .skew(0).step()       //返回不偏移时  

					     .rotateY(180).step()  //Y轴旋转180度  

					     .translateY(-222).step()//在y轴偏移-222px  

					     .matrix3d(0.8, 0, 28).step();  

					     that.setData({  

					       animation: that.animation.export()  

					     })},

二. 小程序动画 Animation API

wx.createAnimation(OBJECT)

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

注意: export 方法每次调用后会清掉之前的动画操作

OBJECT参数说明：

参数	类型	必填	默认值	说明
duration	Integer	否	400	动画持续时间，单位ms
timingFunction	String	否	"linear"	定义动画的效果
delay	Integer	否	0	动画延迟时间，单位 ms
transformOrigin	String	否	"50% 50% 0"	设置transform-origin