微信小程序封装wx.createAnimation（动画效果）

如下图所示

三个方法内容很少我是直接封装在app.js

app.js

App({
  //渐变
  fadein: function (that, param, opacity) {
    var select = wx.createAnimation({
      duration: 800,
      timingFunction: 'ease',
    });
    select.opacity(opacity).step()
    var json = '{"' + param + '":""}'
    json = JSON.parse(json);
    json[param] = select.export()
    that.setData(json)
  },

  //垂直滑动 渐入渐出
  slideupshow: function (that, param, px, opacity) {
    var select = wx.createAnimation({
      duration: 800,
      timingFunction: 'ease',
    });
    select.translateY(px).opacity(opacity).step()
    var json = '{"' + param + '":""}'
    json = JSON.parse(json);
    json[param] = select.export()
    that.setData(json)
  },

  //平行滑动 渐入渐出
  sliderightshow: function (that, param, px, opacity) {
    var select = wx.createAnimation({
      duration: 800,
      timingFunction: 'ease',
    });
    select.translateX(px).opacity(opacity).step()
    var json = '{"' + param + '":""}'
    json = JSON.parse(json);
    json[param] = select.export()
    that.setData(json)
  }

})

.js

const app = getApp()
Page({
  data: {
  },
  //页面展示时，触发动画
  onShow: function () {
    let that = this
    app.fadein(that, 'current1', 0)
    app.fadein(that, 'current2', 0)
    app.slideupshow(that, 'current2', -200, 0)
    app.fadein(that, 'current3', 0)
    app.sliderightshow(that, 'current3', -400, 0)
    
    setTimeout(function () {
      app.fadein(that, 'current1',1)

      setTimeout(function () {
        app.fadein(that, 'current2',1)
        app.slideupshow(that, 'current2', 0, 1)
      }, 500)
      setTimeout(function () {
        app.fadein(that, 'current3', 1)
        app.sliderightshow(that, 'current3', 0, 1)
      }, 1000)
    }, 500)
  },
  //页面隐藏时，触发渐出动画
  onHide: function () {
    let that = this
    app.fadein(that, 'current1', 1)
    app.fadein(that, 'current2', 1)
    app.slideupshow(that, 'current2', 200, 1)
    app.fadein(that, 'current3', 1)
    app.sliderightshow(that, 'current3', 200, 1)
  },
  navto:function(e){
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },
})

.wxml

<view class="navto" bindtap="navto">
<view animation="{{current1}}" style="background-color:#e54d42;"></view>
<view animation="{{current2}}" style="background-color:#f37b1d;"></view>
<view animation="{{current3}}" style="background-color:#fbbd08;"></view>
</view>

.css

.navto{
  width: 100%;
  float: left;
}
.navto>view{
  width: 94%;
  float: left;
  margin: 30rpx 3% 0 3%;
  height: 200rpx;
  border-radius: 10rpx;
}

想要什么样的效果可以自己任意搭配，一定要在.wxml声明animation="{{变量名}}"才能使用哦


有什么问题欢迎评论留言，我会及时回复你的