mpvue动画

发表于 | 分类于

记录一下用mpvue开发微信小程序遇到的问题
背景是小程序上需要写一个简单的循环动画，试了几种方法，留下了一堆坑，之后如果有空或者又遇到这个问题了再填吧（跑）

1.wx.createAnimation

先调用createAnimation API创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的 animation 属性。官方文档的例子如下：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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)
  }
})

mpvue和小程序原生的写法稍微有点不同：

1
<div :animation="animationData"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const app = new Vue({
  data: {
      animationData: {}
    },
  onShow () {
    let animation = mpvue.createAnimation({
        duration: 1000,
        timingFunction: 'ease',
      })

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

    this.animationData = animation.export()
  }
})

大体上都是相同的，不一样的地方在于mpvue没有this.animation，因为原生的小程序this指的是最外面的Page，而mpvue中this指的是外层vue对象，两者虽然看起来一样，但是指向不同，编译以后会报错（暂时没有解决mpvue中不能使用微信小程序的this.animation的问题，这个坑，之后有空再填orz），但是可以直接把创建的动画实例animation赋值给已经绑定在动画节点上的this.animationData，就可以该元素的动画效果了，我暂时没有搞明白为什么原生小程序还需要给this.animation赋值一个动画实例，明明可以直接给绑定在动画节点上的变量赋值实现动画效果（留个坑）

2.关键帧动画

从小程序基础库2.9.0开始支持一种更友好的动画创建方式，用于代替旧的wx.createAnimation。它具有更好的性能和更可控的接口。在页面或自定义组件中，当需要进行关键帧动画时，可以使用 this.animate 接口：

1
this.animate(selector, keyframes, duration, callback)

参数列表如下：

  • selector 选择器
  • keyframes 关键帧信息
  • duration 动画持续时长（毫秒为单位）
  • callback 动画完成后的回调函数
    之前已经说了，在mpvue里面的this和原生小程序中的this不同，所以就不能直接使用this.animate接口（暂时不知道怎么在mpvue中直接使用this.animate接口，留个坑）
    举个在原生小程序里使用的例子：
    1
    <div id="container"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Page({
  data: {
      animationData: {}
    },
  onShow: function() {
    this.animate('#container', [
      { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
      { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'},
      { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' },
      ], 5000, function () {
        this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
          console.log("清除了#container上的opacity和rotate属性")
        })
    }.bind(this))
  }
})

调用animate API 后会在节点上新增一些样式属性覆盖掉原有的对应样式。如果需要清除这些样式，可在该节点上的动画全部执行完毕后，在回调函数中使用this.clearAnimation清除这些属性。

3.css3动画

看了一圈发现原生小程序的动画对mpvue不是很友好，而且只能执行一次，要想循环还需要写定时器，所以还可以直接选择用css3动画来写：

1
2
3
4
5
6
7
div {
  animation: animation 1s;
}
@keyframes animation {
  from {background: red;}
  to {background: yellow;}
}

OK，一下子就搞定了

看了看文档，写完以后还是对小程序动画一知半解，留下了不少坑没有解决，希望之后会把这些坑补上orz。如果上面有什么写的不对的地方或者想法可以指正