小程序动画wx.createAnimation

Posted 苡米阳光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序动画wx.createAnimation相关的知识,希望对你有一定的参考价值。

首先上官网

将动画封装到一个函数,在需要的时候调用,也可以在满足一定条件时重复调用.

<view animation="{{animationData}}" ></view>
onLoad: function(){
    this.newInfor();
}



newInfor(){
      var animation = wx.createAnimation({
        duration: 1000,
        timingFunction: ‘linear‘,
      })

      this.animation = animation

      animation.translate(150).step()

      this.setData({
        animationData: animation.export()
      })

      setTimeout(function () {
        animation.translate(-150).step()
        this.setData({
          animationData: animation.export()
        })
      }.bind(this), 2000)
    }

 

以上是关于小程序动画wx.createAnimation的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序--动画animation

微信小程序---动画

微信小程序-实现渐入渐出动画效果

微信小程序自定义加载动画

程序源代码父亲节-html小动画

微信小程序旋转大师的代码是啥