【小程序】微信小程序重复循环平移动画

1.说明

需求是让一张图片不断重复地从下往上移动，实现方法由多种，wx.createAnimation、关键帧动画、swiper等都能实现

2.wx.createAnimation

最先想到的是使用wx.createAnimation()API，它的好处是兼容性好，只要小程序基础库版本不低于1.9.6就可以正常工作

wxml

<view style="width: 100%; height: 100%;">
  <image src="/pages/images/img1.png" animation="{{animationData}}" style="width: 100%; height: 300rpx;" />
</view>

js

Page({

  data: {
    animationData: null
  },

  onLoad(options) {
    let animation = wx.createAnimation({
      delay: 0,
      duration: 1000,
      timingFunction: 'linear',
    })
    this.animation = animation
    this.moveDistance = 200

    animation.translateY(-this.moveDistance).step()
    this.setData({
      animationData: animation.export()
    })
    this.reAnimation()
  },
  
  reAnimation: function () {
    setInterval(() => {
      console.log("000")
      this.animation.translateY(this.moveDistance).step({
        duration: 0
      })
      this.setData({
        animationData: this.animation.export()
      })
      setTimeout(() => {
        this.animation.translateY(-this.moveDistance).step()
        this.setData({
          animationData: this.animation.export()
        })
      }, 60)
    }, 2000)
  },

})

参考效果

2.animate关键帧动画

从小程序基础库 2.9.0 开始支持一种更友好的动画创建方式，用于代替旧的 wx.createAnimation。我们可以在js文件里直接调用this.animate(selector, keyframes, duration, callback)接口

wxml

<view style="width: 100%; height: 100%;">
  <image src="/pages/images/img1.png" id="bannerImg" style="width: 100%; height: 300rpx; margin-top: 300rpx;" />
</view>

js

Page({
  data: {},

  onLoad(options) {
    this.startAnimation()
  },

  startAnimation: function () {
    this.moveDistance = -300
    setInterval(() => {
      console.log("111")
      this.animate('#bannerImg', [{
          translateY: 0,
        },
        {
          translateY: this.moveDistance,
        },
      ], 2000, function () {
        this.clearAnimation('#bannerImg', {}, function () {})
      }.bind(this))

      this.animate('#bannerImg', [{
          translateY: this.moveDistance,
        },
        {
          translateY: 0,
        },
      ], 0, function () {
        this.clearAnimation('#bannerImg', {}, function () {})
      }.bind(this))
    }, 2000)

  }

})

参考效果

3.swiper

虽然wx.createAnimation()能做的动画很多，但如果只是简单的垂直或水平方向上的平移动画，其实使用swiper组件也可以完成的，swiper从基础库1.0.0 开始支持

wxml

<swiper style="height: 200rpx;" autoplay='true' circular='true' interval='1000' duration='1000' vertical='true' easing-function='linear'>
  <swiper-item wx:for="{{imgList}}" wx:key="key" wx:for-item="item">
    <image style="height: 200rpx; width: 100%;" src="{{item}}"></image>
  </swiper-item>
</swiper>

js

Page({

  data: {
    imgList: [
      "/pages/images/img1.png",
      "/pages/images/img1.png"
    ],
  },
  onLoad: function (options) {

  },
})

参考效果