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 条评论
登录 后参与评论

相关文章

来自专栏计算机视觉及音视频工程

YVU格式Y分量存储为灰度

 Image为Android 5.0以上提供的类,用于保存YUV420格式的集合。

2276
来自专栏菩提树下的杨过

css基础:把所有背景图都集成在一张图片上,减少图片服务器请求次数

好象现在越来越流行这种玩法了,原来大家都是把背景切成单个小图片,要用背景的时候一个个定义,这样页面打开的时候,也会加载各个小图片,但是这种办法把所有小图片都集中...

18010
来自专栏互联网杂技

判断图片是否加载完成

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。有三种方式实现,下面一一介绍。 1、load事件 <!DOCTYPE HTML> <html> <hea...

3097
来自专栏前端知识分享

第100天:CSS3中animation动画详解

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;

722
来自专栏河湾欢儿的专栏

表单

在dom中提供了为我们提供了操作表单当中的一些控件的方法,比如说获取,操作还有一些特殊的属性。 获取:表单元素的操作 onchange事件 表单事件:o...

792
来自专栏木头编程 - moTzxx

HTML 图片映射<map>标签整理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

914
来自专栏天天

iconfont的使用

672
来自专栏debugeeker的专栏

《coredump问题原理探究》windows版8.3节堆布局堆块遍历的第一种方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

452
来自专栏全沾开发(huā)

React-native踩坑小记

React-native踩坑小记 最近开始研究ReactNative咯,大概一两周了吧已经,略略说一下遇到的一些坑爹问题 问题一般都...

4078
来自专栏Android开发小工

利用Android嵌套滑动机制轻松实现顶部布局置顶

传统的Android事件分发是子控件消费了事件,那么父控件就不能再处理这个事件了。也就是说一旦内部的滑动控件消费了滑动操作,外部的滑动控件就不能获取到这个滑动动...

603

扫码关注云+社区