小程序動(dòng)畫(huà)效果是一個(gè)基本的開(kāi)發(fā)實(shí)現(xiàn)案例，那么如何利用微信小程序開(kāi)發(fā)工具來(lái)實(shí)現(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. //實(shí)例化
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()//原點(diǎn)順時(shí)針旋轉(zhuǎn)180度也可以不加.step()不加的話便是動(dòng)畫(huà)同時(shí)執(zhí)行
17. .rotate(-180).step()//原點(diǎn)逆時(shí)針旋轉(zhuǎn)180度
18. .rotate(0).step()//回到初始
19. .scale(1.3).step()//x,y軸同時(shí)縮放1.3倍
20. .translateX(90).step()//x軸偏移90px
21. .translateY(20).step()//y軸偏移20px
22. .skew(30).step()//x軸沿順時(shí)針偏移30度
23. .skew(-30).step()//x軸沿逆時(shí)針偏移30度
24. .skew(0).step()//返回不偏移時(shí)
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. })},

二. 小程序動(dòng)畫(huà) Animation API

wx.createAnimation(OBJECT)

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

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

OBJECT參數(shù)說(shuō)明：

timingFunction 有效值：

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

animation

動(dòng)畫(huà)實(shí)例可以調(diào)用以下方法來(lái)描述動(dòng)畫(huà)，調(diào)用結(jié)束后會(huì)返回自身，支持鏈?zhǔn)秸{(diào)用的寫(xiě)法。

animation 對(duì)象的方法列表：

樣式：

旋轉(zhuǎn)：

縮放：

偏移：

傾斜：

矩陣變形：

動(dòng)畫(huà)隊(duì)列

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