微信小程序之animation动画的实现

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。注意: export 方法每次调用后会清掉之前的动画操作

调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。 通过事件绑定动画即可调用动画执行。

示例代码：

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.1 绑定动画

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

示例代码

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

2.2 触发动画

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

示例代码：

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

相关推荐：

css的animation动画的使用教程

利用CSS3 animation动画属性实现轮播图效果的方法详解

巧用css3 animation动画特效插件方法介绍

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