创新实训——记录13

目录

内容综述

JS动画

index页面动画

社区帖子头像点击动画

总结

---

内容综述

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

JS动画

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

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

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

其参数如下：

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

再看Animation类，其介绍如下：

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

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

wxml代码：

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。

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

index页面动画

在index页面，我设计将登录成功提示换为小程序的图标进行浮动，最终消失的一个过程。因此，首先需要准备一个元素放置小程序图标：

与Tabs同级，设置一个view元素，为它指定animation属性，同时，还需要保证只有ifShowToast为真的时候才显示。

在js文件中准备需要的值：

当登录成功时，ifShowToast会置为true。

此外，view应该进行绝对定位或者fixed定位，以保证不会影响其他元素的布局。所以在wxss文件中设置：

接下来，在js文件中完成相应的函数。先准备一个showAnimation方法，以生成animation对象。首先是调用createAnimation、step方法，并指定animationData对象和ifShowToast的值：

 这是指定了第一步。然后继续指定第二步、第三步：

如此下去，直到最后一步：

最后指定了scale为0，表示图标逐渐消失，然后才设置ifShowToast为false。

最终，需要在登录成功的时候调用这个showAnimation方法了：

如此，代码完成。

实现效果：

 

 效果成功！

社区帖子头像点击动画

有了上面的基础，我想再次尝试在社区帖子的头像上加一个点击效果，让头像动起来。找到Post组件，对其头像image元素添加一个animation属性：

在js文件中准备数据和方法。首先是animationData对象：

其中，timing和timeoutId是我用来设置防抖 *** 作的变量，即用户在点击一次头像后，若在动画执行时间内再次点击，则清除之前的计时器，改为新的计时器。

showAnimation方法：

 

这个动画就很简单了，只是在很短的时间内放大和缩小动画。只是其中，通过两个变量记录了动画的状态，以进行防抖 *** 作。

实现效果：

效果成功！

此外，我还在my页面中，也给用户头像加了同样的点击效果，这里就不赘述了。

总结

本文介绍了小程序使用的JS动画，并在首页、社区、个人中心均做了实现。接下来，将要完成的是web端的扫码登录，以使两端的用户衔接起来。