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

相关文章

来自专栏夏时

两款 Js 插件为你的网站添彩

1381
来自专栏大前端开发

微信小程序的样式机制

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机制。...

993
来自专栏小程序之家

如何使用小程序媒体组件

图片,视频,音乐是小程序使用中不可缺少的部分,这篇文章中,我们将介绍小程序媒体组件的使用。媒体组件分为audio音频组件,image图像组件,video视频组件...

5821
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第一天 HTML【悟空教程】

一天的学习需要使用众多独立没有关联的标签,为了大家更好的吸收,现给出标签总览,以“重要程度”排序。例如:“表格标签”为今天最重要的标签。

2645
来自专栏非著名程序员

Android官方支持百分比设置宽和高的控件及示例

Android官方支持百分比设置宽和高的控件及示例 非著名程序员 Android官方终于支持按百分比来设置控件的宽和高了。有了这样的控件,写起来就比较方便了。其...

1999
来自专栏攻城狮的动态

iOS视图编程指南(View Programming Guide for iOS)(译)

2844
来自专栏程序员叨叨叨

Mac使用小技巧

许多从windows转向Mac的童鞋们都会感觉鼠标的滚动方向不习惯,这里告诉大家如何修改鼠标滚动方向:

621
来自专栏大前端开发

微信小程序中实现瀑布流布局和无限加载

瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感。

2422
来自专栏移动开发

Material Design Button 的 disable 效果

针对 Material Design Button 的 disable 效果这里提一下. 我们经常有这样的需要,在按钮在 disable 状态下,背景色会呈现深...

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

01-工具 面板 视图

网页分为两步: 1.从设计稿中切出网页素材 比如说:按钮 logo 图片 背景等 2.编写代码,按效果图实现静态页面

971

扫码关注云+社区