微信小程序开发——动画效果

动画效果的实现，使用wx.createAnimation实现。具体实现时，首先，创建动画对象，并设置相关的参数；其次，设置动画类型，并执行动画；第三，导出并设置动画数据；最后，将设置的动画数据动态配置相应的组件，以此实现组件的动画效果。

效果图

代码示例

xxx.wxml

[html]  view plain  copy

1. <view style='width:60px;height:60px;background-color:yellow;' animation="{{moveData}}" bindtap='moveClick'>移动</view>  
2.   
3. <view style='width:60px;height:60px;background-color:red;' animation="{{rotateData}}" bindtap='rotateClick'>旋转</view>  
4.   
5. <view style='width:60px;height:60px;background-color:green;' animation="{{alphaData}}" bindtap='alphaClick'>透明度</view>  
6.   
7. <view style='width:60px;height:60px;background-color:orange;' animation="{{scaleData}}" bindtap='scaleClick'>缩放</view>  
8.   
9. <view style='width:60px;height:60px;background-color:blue;' animation="{{skewData}}" bindtap='skewClick'>倾斜</view>  
10.   
11. <view style='width:60px;height:60px;background-color:black;color:white' animation="{{matrixData}}" bindtap='matrixClick'>变形</view>  
12.   
13. <view style='width:60px;height:60px;background-color:yellow;' animation="{{queueData}}" bindtap='queueClick'>移动\n变小\n透明</view>  

www.wxjs

[html]  view plain  copy

1. Page({  
2.   
3.   /**  
4.    * 页面的初始数据  
5.    */  
6.   data: {  
7.     widthScreen:null,  
8.     moveData:null,  
9.     rotateData:null,  
10.     alphaData:null,  
11.     scaleData:null,  
12.     skewData:null,  
13.     matrixData:null  
14.   },  
15.   
16.   moveClick: function(){  
17.     var animation = wx.createAnimation({  
18.       duration: 3000,  
19.       delay: 0,  
20.       timingFunction: "ease",  
21.     });  
22.       
23.     animation.translate((this.data.widthScreen - 60), 0).step({duration: 3000})  
24.     this.setData({moveData: animation.export()})  
25.   },  
26.   
27.   rotateClick: function(even) {  
28.     var animation = wx.createAnimation({})  
29.     animation.rotate(180).step({duration:3000})  
30.     this.setData({rotateData: animation.export()})  
31.   },  
32.   
33.   alphaClick: function(even) {  
34.     var animation = wx.createAnimation({})  
35.     animation.opacity(0.1).step({duration: 2000})  
36.     this.setData({alphaData: animation.export()})  
37.   },  
38.     
39.   scaleClick: function(even) {  
40.     var animation = wx.createAnimation({})  
41.     animation.scale(1.6).step({duration: 2000})  
42.     this.setData({scaleData: animation.export()})  
43.   },  
44.     
45.   skewClick: function(even) {  
46.     var animation = wx.createAnimation({})  
47.     animation.skew(160).step({duration: 2000})  
48.     this.setData({skewData: animation.export()})  
49.   },  
50.     
51.   matrixClick: function(even) {  
52.     var animation = wx.createAnimation({})  
53.     animation.matrix(1,3,4,5,2,2).step({ duration: 2000 })  
54.     this.setData({ matrixData: animation.export() })  
55.   },  
56.     
57.   queueClick: function() {  
58.     var animation = wx.createAnimation({});  
59.     animation.translate((this.data.widthScreen - 60), 0).scale(0.3).opacity(0.5).step({duration: 3000})  
60.     this.setData({queueData: animation.export() })  
61.   },  
62.   
63.   /**  
64.    * 生命周期函数--监听页面加载  
65.    */  
66.   onLoad: function (options) {  
67.     // 获取屏蔽宽  
68.     var thisBlock = this;  
69.     wx.getSystemInfo({  
70.       success: function(res) {  
71.         thisBlock.setData({  
72.           widthScreen: res.screenWidth  
73.         })  
74.       },  
75.     })  
76.   }  
77. }