微信小程序開發(fā)教程之實現(xiàn)動畫效果

小程序動畫效果是一個基本的開發(fā)實現(xiàn)案例，那么如何利用微信小程序開發(fā)工具來實現(xiàn)這一效果呢。

[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()//原點順時針旋轉(zhuǎn)180度也可以不加.step()不加的話便是動畫同時執(zhí)行
17. .rotate(-180).step()//原點逆時針旋轉(zhuǎn)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軸旋轉(zhuǎn)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)

創(chuàng)建一個動畫實例animation。調(diào)用實例的方法來描述動畫。最后通過動畫實例的export方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的animation屬性。

注意:export方法每次調(diào)用后會清掉之前的動畫操作

OBJECT參數(shù)說明：

timingFunction 有效值：

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

animation

動畫實例可以調(diào)用以下方法來描述動畫，調(diào)用結(jié)束后會返回自身，支持鏈?zhǔn)秸{(diào)用的寫法。

animation 對象的方法列表：

樣式：

旋轉(zhuǎn)：

縮放：

偏移：

傾斜：

矩陣變形：

動畫隊列

調(diào)用動畫操作方法后要調(diào)用step()來表示一組動畫完成，可以在一組動畫中調(diào)用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。step 可以傳入一個跟wx.createAnimation()一樣的配置參數(shù)用于指定當(dāng)前組動畫的配置。