总结

内容综述

本文将描述在小程序中使用JS动画添加一些效果。

JS动画

再次检查小程序后，我发现页面有些单调。例如，登录成功后，仅仅会弹出一个提示，告知用户登录成功。为此，我进一步设想，可以添加一个动画，使页面看上去更有趣一点。

起初，我想使用较简易的CSS动画，但功能不好描述，并且无法控制其状态。所以，我决定使用微信小程序的JavaScript动画。

查看官方文档，找到Animation类的创建方法：

其参数如下：

可以看出，其参数都是与CSS动画中一致的。返回得到的是一个Animation对象。

再看Animation类，其介绍如下：

显然，需要使用export方法导出动画队列，使用step方法完成一系列动画步骤。

官方文档给出了一些示例代码：

wxml代码：

<view animation="{
   
   {animationData}}" style="background:red;height:100rpx;width:100rpx"></view>

js代码：

Page({
  data: {
    animationData: {}
  },
  onShow: function(){
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    this.animation = animation

    animation.scale(2,2).rotate(45).step()

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

    setTimeout(function() {
      animation.translate(30).step()
      this.setData({
        animationData:animation.export()
      })
    }.bind(this), 1000)
  },
  rotateAndScale: function () {
    // 旋转同时放大
    this.animation.rotate(45).scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateThenScale: function () {
    // 先旋转后放大
    this.animation.rotate(45).step()
    this.animation.scale(2, 2).step()
    this.setData({
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {
    // 先旋转同时放大，然后平移
    this.animation.rotate(45).scale(2, 2).step()
    this.animation.translate(100, 100).step({ duration: 1000 })
    this.setData({
      animationData: this.animation.export()
    })
  }
})

官方代码给view指定了animation属性值为animationData对象。在js代码的onShow方法中，首先使用createAnimation方法创建动画对象，配置其函数、时间等，时长1000ms，然后使用step方法指定第一组动画步骤，这样在1000ms之内完成第一组动画。要想使该动画生效，就要使用animation.export方法导出，并赋值给animationData，这样就可以使view执行该动画。在1000ms后，又为动画指定了新的一组步骤，并同样赋值给animationData。

基本逻辑理清，就可以动手写代码了。