小程序使用动画的流程

this.animation = wx.createAnimation({ //初始化创建一个实列
  duration: 2000,
  timingFunction: 'ease',
  delay: 100
})

//进行动画函数的编译
    this.animation.translateY(0).translateX(-152 / 750 * wx.getSystemInfoSync().windowWidth).step();
      this.setData({
        mouserightpo: this.animation.export()
      })

看面代码

1 html代码

<view>
<view>
<image class="Airlines" src="./../../images/Activityone/Shenzhen Airlines.png"></image>
</view>

<view>
<image  animation="{{scal}}" class="Struggle" src="./../../images/Activityone/Struggle.png"></image>
</view>
 
<view>
  <button plain class="btn" catchtap="toWave">
  <image 
  class="fillet filletAnimation"  src="./../../images/Activityone/fillet.png"></image> 
  </button>
</view>


<view class="laoshu"> 


<view class="pr">

<view class=" Mousecenterpo" animation="{{mousecenterpo}}">
<image 
class="Mousecenter"
src="./../../images/Activityone/Mousecenter.png"></image> </view>

<view class=" Mouserightpo" animation="{{mouserightpo}}"><image
class="Mouseright"
 src="./../../images/Activityone/Mouserleft.png"></image> </view>

<view class=" Mouserleftpo" animation="{{mouserleft}}"><image 
class="Mouserleft"
src="./../../images/Activityone/Mouseright.png"></image> </view>

 
<view class="layerpo">
<image
class="layer"
src="./../../images/Activityone/layer.png"></image>
</view>


</view>
</view>



</view>
 

2 js代码

// pages/ActiveHomePage/ActiveHomePage.js
Page({
 
  /** 
   * 页面的初始数据
   */
  data: { 
    mousecenterpo:'',//第一个老鼠
  }, 
  /**
   * 
   * 生命周期函数--监听页面加载 
   */
  onLoad: function (options) {
    this.animation = wx.createAnimation({ //
      duration: 2000,
      timingFunction: 'ease',
      delay: 100
    })
  },
  /*第一页 第一只老鼠动画*/
  usermottoblack() { 
    this.animation.translateY(-160 / 750 * wx.getSystemInfoSync().windowWidth).step();
    this.setData({
      mousecenterpo: this.animation.export()
    })
  },
   /*第一页  第二只老鼠动画*/
  mouserightpo(){

    this.animation.translateY(0).translateX(-152 / 750 * wx.getSystemInfoSync().windowWidth).step();
      this.setData({
        mouserightpo: this.animation.export()
      })

  },
     /*第一页  第三只老鼠动画*/
  mouserleft(){


    this.animation.translateY(0).translateX(80 / 750 * wx.getSystemInfoSync().windowWidth).step();
      this.setData({
        mouserleft: this.animation.export()
      })


  },
  //第一页 点击康康缩放
  scal() {
    this.animation.translateY(-40).scale(2, 2).step();
    this.setData({
      scal: this.animation.export()
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.usermottoblack();//第一个老鼠
    this.mouserightpo();//第二个老鼠
    this.mouserleft();//第三个老鼠
    this.scal();//缩放效果
  },
//点击康康
  toWave() {
    wx.reLaunch({
      url: '/pages/wave/wave',
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function(){

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (options) {

    var shareObj = {
      title: "深航商旅人奋斗基因",
      path: '/pages/ActiveHomePage/ActiveHomePage',
      imageUrl: '',
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == 'shareAppMessage:ok') {

        }
      }
    }

    // 来自页面内的按钮的转发
    if (options.from == 'button') {
      // 此处可以修改 shareObj 中的内容
      shareObj.path = '/pages/ActiveHomePage/ActiveHomePage'
    }
    return shareObj;

  }
})