微信小程序开发教程之实现动画效果

小程序动画效果是一个基本的开发实现案例，那么如何利用微信小程序开发工具来实现这一效果呢。

[html]view plaincopy

[css]view plaincopy

1. .sure{
2. width:10%;
3. height:80rpx;
4. margin-top:0rpx;
5. margin-left:45%;
6. background:#00ddff;
7. border-radius:50rpx;
8. text-align:center;
9. line-height:80rpx;
10. color:#fff;
11. }
12. .view_a{
13. width:100%;
14. height:900rpx;
15. display:flex;
16. background-image:url('https://img.blog.csdn.net/20170615103714645?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center');
17. }
18. .a_img{
19. margin-top:600rpx;
20. margin-left:100rpx;
21. width:80rpx;
22. height:80rpx;
23. }

[javascript]view plaincopy

data:{

1. animation:''
2. },
3. dh:function(){
4. varthat=this;
5. //实例化
6. that.animation=wx.createAnimation({
7. duration:200,
8. timingFunction:"ease",
9. delay:1000,
10. transformOrigin:'center',
11. success:function(res){
12. console.log(res)
13. }
14. })
15. that.animation
16. .rotate(180).step()//原点顺时针旋转180度也可以不加.step()不加的话便是动画同时执行
17. .rotate(-180).step()//原点逆时针旋转180度
18. .rotate(0).step()//回到初始
19. .scale(1.3).step()//x,y轴同时缩放1.3倍
20. .translateX(90).step()//x轴偏移90px
21. .translateY(20).step()//y轴偏移20px
22. .skew(30).step()//x轴沿顺时针偏移30度
23. .skew(-30).step()//x轴沿逆时针偏移30度
24. .skew(0).step()//返回不偏移时
25. .rotateY(180).step()//Y轴旋转180度
26. .translateY(-222).step()//在y轴偏移-222px
27. .matrix3d(0.8,0,28).step();
28. that.setData({
29. animation:that.animation.export()
30. })},

二. 小程序动画 Animation API

wx.createAnimation(OBJECT)

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

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

OBJECT参数说明：

timingFunction 有效值：

var animation = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
})

animation

动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

animation 对象的方法列表：

样式：

旋转：

缩放：

偏移：

倾斜：

矩阵变形：

动画队列

调用动画操作方法后要调用step()来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟wx.createAnimation()一样的配置参数用于指定当前组动画的配置。