微信小程序API-animation(动画)

小程序动画官方文档

需要使用 wx.createAnimation({}) 创建一个动画实例 animation 调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

大部分的动画实例上的方法都是设置动画样式,他们返回的还是动画实例对象本身,所以我们可以采用链式写法。需要注意animation.step() 和 animation.export() 两个方法

  • step() 表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画
  • export() 导出动画队列。**export 方法每次调用后会清掉之前的动画操作**
  data: {
    myanimation:null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    var animation = wx.createAnimation({
      delay: 0,
      duration:2000
    })
    console.log(animation)
    //表示动画 放大2倍 step表示一组动画结束
    animation.scale(1.5,5).opacity(0.5).backgroundColor("#000").step()
    //导出对应的动画数据
    var arr = animation.export()
    console.log(arr)
    //将动画数据赋值给对应组件的animation属性
    this.setData({
      myanimation:arr
    })
  },

猜你喜欢

转载自blog.csdn.net/weixin_41040445/article/details/114585210