mpvue动画

作者: 幽小鬼 | 来源:发表于2020-01-08 17:41 被阅读0次

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

    1.wx.createAnimation

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

    <view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>
    
    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和小程序原生的写法稍微有点不同:

    <div :animation="animationData"></div>
    
    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 接口:

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

    参数列表如下:

    • selector 选择器
    • keyframes 关键帧信息
    • duration 动画持续时长(毫秒为单位)
    • callback 动画完成后的回调函数
      之前已经说了,在mpvue里面的this和原生小程序中的this不同,所以就不能直接使用this.animate接口(暂时不知道怎么在mpvue中直接使用this.animate接口,留个坑)
      举个在原生小程序里使用的例子:
    <div id="container"></div>
    
    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动画来写:

    div {
      animation: animation 1s;
    }
    @keyframes animation {
      from {background: red;}
      to {background: yellow;}
    }
    

    OK,一下子就搞定了

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

    相关文章

      网友评论

        本文标题:mpvue动画

        本文链接:https://www.haomeiwen.com/subject/lyzjactx.html