通过使用这个创建动画的api，可以做出很多特效出来

下面介绍一个抽屉菜单的案例

实现代码：

wxml：

[html] view plain copy print?

1. <!--button-->  

2. <view class="btn" bindtap="powerDrawer" data-statu="open">button</view>  

3. <!--mask-->  

4. <view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>  

5. <!--content-->  

6. <!--使用animation属性指定需要执行的动画-->  

7. <view animation="{{animationData}}" class="drawer_attr_box" wx:if="{{showModalStatus}}">  

8.   <!--drawer content-->  

9.   <view class="drawer_content">  

10.     <view class="drawer_title line">菜单1</view>  

11.     <view class="drawer_title line">菜单2</view>  

12.     <view class="drawer_title line">菜单3</view>  

13.     <view class="drawer_title line">菜单4</view>  

14.     <view class="drawer_title">菜单5</view>  

15.   </view>  

16. </view>  

wxss：

[css] view plain copy print?

1. /*button*/  

2. .btn {  

3.   width: 80%;  

4.   padding: 20rpx 0;  

5.   border-radius: 10rpx;  

6.   text-align: center;  

7.   margin: 40rpx 10%;  

8.   background: #0C1939;  

9.   color: #fff;  

10. }  

11. /*mask*/  

12. .drawer_screen {  

13.   width: 100%;  

14.   height: 100%;  

15.   position: fixed;  

16.   top: 0;  

17.   left: 0;  

18.   z-index: 1000;  

19.   background: #000;  

20.   opacity: 0.2;  

21.   overflow: hidden;  

22. }  

23. /*content*/  

24. .drawer_attr_box {  

25.   width: 100%;  

26.   overflow: hidden;  

27.   position: fixed;  

28.   bottom: 0;  

29.   left: 0;  

30.   z-index: 1001;  

31.   background: #fff;  

32. }  

33. .drawer_content {  

34.   padding: 20rpx 40rpx;  

35.   height: 470rpx;  

36.   overflow-y: scroll;  

37. }  

38. .drawer_title{  

39.   padding:20rpx;  

40.   font:42rpx "microsoft yahei";  

41.   text-align: center;  

42. }  

43. .line{  

44.   border-bottom: 1px solid #f8f8f8;  

45. }  

js：

[javascript] view plain copy print?

1. Page({  

2.   data: {  

3.     showModalStatus: false  

4.   },  

5.   powerDrawer: function (e) {  

6.     var currentStatu = e.currentTarget.dataset.statu;  

7.     this.util(currentStatu)  

8.   },  

9.   util: function(currentStatu){  

10.     /* 动画部分 */  

11.     // 第1步：创建动画实例   

12.     var animation = wx.createAnimation({  

13.       duration: 200,  //动画时长  

14.       timingFunction: "linear", //线性  

15.       delay: 0  //0则不延迟  

16.     });  

17.       

18.     // 第2步：这个动画实例赋给当前的动画实例  

19.     this.animation = animation;  

20.   

21.     // 第3步：执行第一组动画：Y轴偏移240px后(盒子高度是240px)，停  

22.     animation.translateY(240).step();  

23.   

24.     // 第4步：导出动画对象赋给数据对象储存  

25.     this.setData({  

26.       animationData: animation.export()  

27.     })  

28.       

29.     // 第5步：设置定时器到指定时候后，执行第二组动画  

30.     setTimeout(function () {  

31.       // 执行第二组动画：Y轴不偏移，停  

32.       animation.translateY(0).step()  

33.       // 给数据对象储存的第一组动画，更替为执行完第二组动画的动画对象  

34.       this.setData({  

35.         animationData: animation  

36.       })  

37.         

38.       //关闭抽屉  

39.       if (currentStatu == "close") {  

40.         this.setData(  

41.           {  

42.             showModalStatus: false  

43.           }  

44.         );  

45.       }  

46.     }.bind(this), 200)  

47.     

48.     // 显示抽屉  

49.     if (currentStatu == "open") {  

50.       this.setData(  

51.         {  

52.           showModalStatus: true  

53.         }  

54.       );  

55.     }  

56.   }  

57. })  

效果：

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！