微信小程序动画创建

三步走

1.创建动画实例

    this.ani=wx.createAnimation({
      duration:1000,
      timingFuntion:'linear',
    })

2.实现动画效果

clickMe(){
    this.ani.left(0).step().top(50).step();

3.导出动画

 this.setData({
     donghua:this.ani.export()
})

全部代码

wxml

<view class="aniBox">
  <button bindtap="clickMe">点我</button>
  <view animation="{{donghua}}" class="test">测试测试测试测试测试测试测试测试测试</view>
</view>

wxss

.aniBox{
  position:relative;
}
.test{
  position:absolute;
  left:-100%;
  top:20px;
}

js

data:{
    donghua:''
},
  onLoad:function(options){
    console.log(this)
    //1.创建动画实例
    this.ani=wx.createAnimation({
      duration:1000,
      timingFuntion:'linear',
    })
  },
  // 实现微信小程序动画
  clickMe(){
    // 2.实现动画效果
    //step表示一组动画的完成
    this.ani.left(0).step().top(50).step();
    //3.导出动画
    this.setData({
      donghua:this.ani.export()
    })
  },