bodymovin 的使用场景初步调研

本文作者:ivweb caorich

bodymovin是什么

专业制作动画采用Adobe公司的after effect软件。做出来的动画可以导出为json文件,bodymovin就是这个动画json文件的前端播放器,支持渲染为svg\canvas\html三种格式。它不仅可以播放动画,可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。可以说是不可多得的好工具。

使用方法

bodymovin官网

首先机子要装AE(adobe after effect),如果没装,就需要找设计师要动画的json文件。

这里假设已经获取到动画导出的json文件了。我扒了codepen的例子到我的站点,大家可以用这个json文件来测试:

动画基本播放

以下所有代码默认都已经导入了bodymovin.min.js

 var animData = {
    wrapper: document.getElementById('bodymovin'),
    animType: 'svg',   //svg/canvas/html
    loop: false,  //是否循环播放
    autoplay: true,
    path: 'http://makto.win/bodymovin/bodymovin/data1.json'

};
var anim = bodymovin.loadAnimation(animData);

控制动画窗口的大小

bodymovin会将对应的svg或者canvas节点插入容器节点中。例如

 <div id="container">
    <canvas width=".." height=".."/>
</div>

canvas的大小将被动态调整为容器宽度或高度按照画布比例的最小值。

虽然bodymovin提供了在已有canvas上渲染的能力,实测试效果并不理想,且没有api文档说明如何进行调整。所以建议控制container的大小来控制动画的大小。

控制帧率

 anim.stop();  //停止
anim.play();   //开始播放
anim.pause()  //暂停
anim.setSpeed(1) //播放速度
anim.goToAndStop(1000, false);  //播放1秒钟后的画面
anim.goToAndStop(2, true);  //播放第2帧
anim.setDirection(-1);   //倒叙播放
anim.playSegments([1,4], false)  //播放第1帧到第4帧
anim.playSegments([[1,4],[30,40],[100,104]], false)  //依次播放1~4帧,30~40帧,100~104帧,之后如果loop:true的话,会循环播放最后一个片段,即循环播放100~104帧
anim.playSegments([1,4], true);  //结束当前片段的播放,立即播放1~4帧。

所以,运用以上的接口,我们可以很好的控制动画对象的播放。

举个例子

一个动画完整的包含一个控件的出现和消失。

我们可以通过以上的api将动画拆分成两个片段: 开始片段和消失片段。步骤是:

  • 通过anim.totalFrames获取到动画的总帧数。
  • 和设计沟通一下,得知前30帧是出现,后30帧是消失。
  • 将前30帧和后30帧拆分成两个不同的片段。在点击事件中分别播放。

事件

  • complete 一次播放完成
  • loopComplete循环播放一次完成,每次都会触发
  • enterFrame播放过程中不断触发,慎用,在无性能瓶颈的情况下,最高触发次数为250fps,所以不要给这个事件加句柄。
  • segmentStart不同片段播放开始时候触发,如果是相同片段的循环,第一次后就不会触发此事件了。

  • 目前bodymovin的文档支持得不是太好。git上的issue能解决的问题也很有限。api几乎看不到,需要自己慢慢试。
  • animType:'html' 支持得不是太好。
  • rendererSettings 用于在已有的canvas上渲染动画,work效果不是很好。不推荐使用

性能

选取大小约为300K的动画json文件,在不同平台不同价位的机器上进行测试。(采用QQ X5内核)

同时播放N个动画

N

IOS(iphone)

Android(MOTO X1085)

1

表现良好

明显掉帧

3

轻微掉帧

无法正常播放

5

明显掉帧

无法正常播放

所以,这个动画框架在低端android上的可用性还是很低的。如果对UA进行判断,只在ios上采用此动画解决方案,其实也不失很好的办法。

ios

ANDROID

实在是有点卡~

原文链接:http://www.ivweb.io/topic/5900ccce06f26845b620dd7b

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端

Vuejs --01 起步

一、是什么      1、是一套构建用户界面的渐进式框架,Vue采用自底向上增量开发的设计           1.1     解释:框架譬如angular,是...

2085
来自专栏Albert陈凯

Scala如何改变了我的编程风格:从命令式到函数式

51CTO编辑推荐: Scala编程语言专题 【51CTO快译】编者前言:这篇文章最初写于2008年底,作者Bill Venners一方面是美国著名开发网站A...

2233
来自专栏程序员的诗和远方

Tips-移动端滑动固顶效果(position: sticky)

先放个图看看滑动固顶是啥效果: image.png 中间那个 tab 条,平常的时候是固定的,等到页面滑上去的时候,又像 fixed 一样贴在顶部。 pos...

2836
来自专栏代码世界

Python之面向对象二

面向对象的三大特性: 继承 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类 pyt...

3507
来自专栏xiaoxi666的专栏

积累一些不太常用的C/C++语言知识(不断更新)

441
来自专栏V站

PHP两个图片合并,并添加文字

4895
来自专栏java学习

面试题37(关于运算符的理解?)

Considerthe following code: String s=null; Which code fragments cause an object ...

2626
来自专栏aCloudDeveloper

漫谈递归转非递归

一:递归的思想       之前面试腾讯,面试官问了一个问题:说说递归和循环的区别?当时没有答出问题的本质,只是简单地解释了这两个词的意思,囧,今天就借由这篇文...

2187
来自专栏开源优测

[快学Python3]HTTP处理 - urllib模块

概述 urllib是python最基础、最核心的HTTP协议支持库,诸多第三方库都依赖urllib,所以urllib是必须掌握的HTTP库。 掌握了urllib...

3175
来自专栏java学习

Java每日一练(2017/7/16)

最新通知 ●回复"每日一练"获取以前的题目! ●【新】Ajax知识点视频更新了!(回复【学习视频】获取下载链接) ●答案公布时间:为每期发布题目的第二天 ★【新...

2827

扫码关注云+社区