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

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

 

效果图

 

 

 

代码示例

xxx.wxml

 

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

　　
www.wxjs

Page({     /**    * 页面的初始数据    */   data: {     widthScreen:null,     moveData:null,     rotateData:null,     alphaData:null,     scaleData:null,     skewData:null,     matrixData:null   },     moveClick: function(){     var animation = wx.createAnimation({       duration: 3000,       delay: 0,       timingFunction: "ease",     });          animation.translate((this.data.widthScreen - 60), 0).step({duration: 3000})     this.setData({moveData: animation.export()})   },     rotateClick: function(even) {     var animation = wx.createAnimation({})     animation.rotate(180).step({duration:3000})     this.setData({rotateData: animation.export()})   },     alphaClick: function(even) {     var animation = wx.createAnimation({})     animation.opacity(0.1).step({duration: 2000})     this.setData({alphaData: animation.export()})   },      scaleClick: function(even) {     var animation = wx.createAnimation({})     animation.scale(1.6).step({duration: 2000})     this.setData({scaleData: animation.export()})   },      skewClick: function(even) {     var animation = wx.createAnimation({})     animation.skew(160).step({duration: 2000})     this.setData({skewData: animation.export()})   },      matrixClick: function(even) {     var animation = wx.createAnimation({})     animation.matrix(1,3,4,5,2,2).step({ duration: 2000 })     this.setData({ matrixData: animation.export() })   },      queueClick: function() {     var animation = wx.createAnimation({});     animation.translate((this.data.widthScreen - 60), 0).scale(0.3).opacity(0.5).step({duration: 3000})     this.setData({queueData: animation.export() })   },     /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {     // 获取屏蔽宽     var thisBlock = this;     wx.getSystemInfo({       success: function(res) {         thisBlock.setData({           widthScreen: res.screenWidth         })       },     })   } }

　　

本文链接：https://blog.csdn.net/potato512/article/details/80000566

本人，认为 例子挺实用的，自己收藏变成工具类哈，感觉分享。有个轮子可以大把时间做自己喜欢的事。

热爱生活，热爱编程！

 

来源：博客园

作者：尊龙

链接：https://www.cnblogs.com/liliuyu/p/11510601.html