mpvue动画

记录一下用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。如果上面有什么写的不对的地方或者想法可以指正

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容