微信小程序中动画动画的实现方法

微信小程序中动画动画的实现方法具有一定的参考价值。有兴趣的朋友可以参考一下。希望可以帮助到大家。

1。创建动画实例

wx.createAnimation(OBJECT)

创建动画实例的动画。调用实例的方法来渲染动画。最后，使用动画实例的导出方法导出动画数据，并将其传递给组件的动画属性。 ？完成后，就可以调用动画组中的多个动画方法了。动画组中的所有动画同时开始，直到一个动画组完成后，下一个动画组才会进行。步骤可以传递一个类似于wx.createAnimation()的配置参数来指定当前组动画配置。可以通过将动画绑定到事件来调用动画执行。

创建的动画实例可以通过调用animation方法来描述。通话结束后，自动返回支持链式调用打字。
在同一个动画实例中，您可以定义多个动作形式和多个绑定到不同标签的动画。

示例代码：

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>