Skip to content

Latest commit

 

History

History
103 lines (79 loc) · 3.12 KB

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

File metadata and controls

103 lines (79 loc) · 3.12 KB
Raw

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

效果图

代码示例

xxx.wxml

移动

旋转

透明度

缩放

倾斜

变形

移动\n变小\n透明

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 }) }, }) } }