微信小程序开发之animation动画实现

1. 创建动画实例

wx.createAnimation(OBJECT)

示例代码：

animation1: {} animation2: {} touch: function () {   let animation1 = wx.createAnimation({     transformOrigin: "50% 50%",     duration: 1000,     timingFunction: "ease",     delay: 0   });   animation1.translateX(-app.globalData.windowWidth * 0.7).step({ duration: 1000 });   this.setData({     animation1: animation1.export()   });   let animation2 = wx.createAnimation({     transformOrigin: "50% 50%",     duration: 1000,     timingFunction: "ease",     delay: 0   });   animation2.opacity(0.7).step({ duration: 1000 });   this.setData({     animation2: animation2.export()   }); }

2. 调用动画执行

2.1 绑定动画

将所创建的动画实例绑定到相应标签

示例代码

<view animation="{{animation1}}"></view> <view animation="{{animation2}}"></view>

2.2 触发动画

通过页面事件调用动画执行

示例代码：

<view bindtap="touch"></view>

以上就是微信小程序开发之animation动画实现的详细内容，更多内容请关注技术你好其它相关文章！