看逐浪CMS技术小哥做SVG动画（附使用Bodymovin和Lo

2020-02-24 本文已影响0人 zoomlaCMS

image

名词解解释

adobe After Effects

AE：adobe After Effects，adobe公司的专业视频制作软件。

Bodymovin插件预览

Bodymovin：是一个AE的插件，它可以把动画直接输出成代码，直接给程序员使用放在各个终端上使用,是airbnb团队开发的一个插件，其原理是将动画转成json文件格式，然后通过JS程序输出，转换成svg、canvas或html5动画。

Lottie官网界面
Lottie：是集成BodyMovin一系列服务的总称，其官网是https://airbnb.design/lottie/
你可以称这一系列技术为lottie库，其官网如此介绍：

Lottie is the native engine that Airbnb’s awesome team built. It uses Bodymovin as the animation exporter and is the ideal complement for getting animations to play natively everywhere.

它是一款由Airbnb团队开发出的，完美地依托Bodymovin作为动画输出、帮助我们在项目中更自然便捷呈现动画的原生引

技术背景

前段时间听部门老大说，Airbnb出了个移动端的动画库Lottie，可以和一个名叫Bodymovin的AE插件结合起来，把在AE上做好的动画导出为json文件，然后以Android/iOS原生动画的形式在移动设备上渲染播放。AE（Adobe After Effects）是视频后期特效和动画制作的行家，前段时间充斥视野的MG动画就是用它制作的。如果真的可以实现，就会大大方便前端动画的设计。

2017年4月8日，第二届中国前端开发者大会（FDCon2017），有日程提到了Lottie和Bodymovin。渚薰的主题是“H5互动的正确打开方式”，有作相关推荐。

下面是一个PPT截图，讲解了其中原理：

FDCon2017论坛PPT讲解原理

这个AE插件可以把AE上做好的合成（Composition，类似于Pr里的剪辑序列）导出成带有矢量动画信息的json文件，并可以在以下平台播放：

Web页面，以svg/canvas/html+js的形式。Airbnb提供了作为Player的js库——lottie-web；
Android原生，通过Airbnb的开源项目“lottie-android”实现；
iOS原生，通过Airbnb的开源项目“lottie-ios”实现；
React Native，通过Airbnb的开源项目“lottie-react-native”实现。

详细使用指引

下面就分步骤总结下Bodymovin的安装和使用，以及导出的动画如何在Web页面上播放：

1. 如果电脑上没有AE的话，需要安装AE CC2014或更高版本。以AE CC2019为例：

AE CC2019 欢迎界面

2. AE安装完成后，安装Bodymovin插件。

安装插件有几种方法，比如直接到Adobe的插件中心下载插件（链接：Adobe Add-ons，一般不是最新版），也可以到Bodymovin的GitHub首页下载最新版的插件并安装。我推荐第二种方法，这个方法步骤如下：

2.1 到Bodymovin的GitHub首页（链接：[airbnb/lottie-web](https://github.com/airbnb/lottie-web）克隆项目到本地，或者下载.zip包。

lottie-web仓库

小技巧：有朋友反馈从github下载过慢，你可以注册一个gitee码云的帐号，将github的仓库克隆到gitee再下载，速度会有很大的改善。

2.2 git到文件包后，在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件，这个就是插件包了。

2.3 获取到了插件，你可能是无法打开的，这时需要安装一个ZXP install插件工具。

点击http://aescripts.com/learn/zxp-installer/ 根据网站界面，选择你的操作系统版本（windows或mac）下载ZXP install插件工具。

zxp-installer下载界面

下载完成，打开它，点击“File”>“Open”菜单项载入上述.zxp插件包，ZXP Installer会自动开始安装。安装完成后的软件主页面如下图所示，表示插件已成功安装。

安装ZXP install插件

维护ZXP install插件

3. 打开AE，点击“编辑”>“首选项”>“常规”菜单项，选中“允许脚本写入文件和访问网络”，点击确定。

ae 2019中的设置

如果是旧版，则可能是在：“编辑”>“首选项”>“脚本和表达式”菜单项，选中“允许脚本写入文件和访问网络”中，如下图

[图片上传失败...(image-abe546-1582519383050)]

4. 点击“窗口”>“扩展”>“Bodymovin”菜单项，就可以打开Bodymovin的界面使用插件了。

在ae中调用插件

5. 我们在空的AE项目里，新建一个名为“合成1”的合成，并制作一段简单的动画：

image

6. 打开Bodymovin插件窗口，可以发现“合成1”出现在了下面的列表中。选中“合成1”，设置好json文件输出位置，点击“Render”。

image

7. Bodymovin还为生成出的json文件提供了预览功能，点击插件界面上的“Preview”按钮，点击“Browse”载入刚刚生成的json文件，就会看到，动画被原汁原味地导出了：

image

可以从上图看到，预览中还提示该动画有多少帧。

8. 接下来我们新建一个网页来播放这段动画

你需要进入刚刚从Github下载的lottie-web项目目录下“\build\player\lottie.min.js”和刚刚生成的json文件复制到网页根目录，新建一个html文件。

下面的代码则提供了CDN的lottie.min.js地址：代码如下：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Bodymovin Demo</title>
<meta name="Generator" content="Zoomla!逐浪®CMS">
<meta name="Author" content="去上云73ic.com">
<meta name="Others" content="字体呈现基于逐浪字库f.ziti163.com">
<script src="http://code.z01.com/lottie.min.js"></script>
</head>
<body>
    <div id="animation"></div>
    <script>
        lottie.loadAnimation({
            path:'data.json',   //json文件路径
            loop:true,
            autoplay:true,
            renderer:'canvas',  //渲染方式，有"html"、"canvas"和"svg"三种
            container:document.getElementById('animation')
        });
        //lottie-web的完整api文档见GitHub项目首页(https://github.com/airbnb/lottie-web)
    </script>
</body>
</html>

9 用http方式打开这个页面，就会发现动画成功跑起来了，是不是很黑科技？

在http中运行的效果

记得，这时你要用http或https的方式将你的这个静态Html页面跑起来，才能看到动画，如果直接点击这个html用file模式是无法看到动画的。

为何推荐

记得在FDCon2017大会上，演讲完毕后，有个人提出了我一直想问的问题：

Adobe已经推出HTML5动画设计软件An（Adobe Animate CC），为什么不用An而要用这种方式？

主讲人答道，An的前身就是Flash，它生成出来的H5动画是用js写的（使用CreateJS库），后期修改和维护会更复杂。

确实如此，用过Lottie之后，不难看出它的灵活性的确很高，而且json形式的动画也远比js写出来的动画更适合跨平台。实在叹服，为Lottie点10086个赞。

学习总结

缺点：

1，Bodymovin渲染的动画，如果是在AE里面创建的矢量元素，则直接生产json代码。如果动画里有导入位图，则会导出编号后的图片文件到image文件夹里。

2，AE里里制作动画注意不要有太多的合成嵌套，原生环境下有些会出现渲染不出的情况。

3，用AE的朋友可能留意到上面的WD动画使用了修剪路径的效果，这里要提醒使用该效果时，不宜同时修改start和End等多个参数，渲染出来的效果会有些许偏差。然后路径动画的stroke值越大，误差可能会越大，需要人为调整。

4，原生环境下运行json动画时，出现了起步延迟的状况。所以也不太适合对动画时间有精密要求的项目里使用。

5，安卓Android 5.0以下的机型会不支持SVG动画，所以对接安卓的时候需要做好两手准备。

优点：

所谓凯撒的还给凯撒，上帝的还给上帝。Bodymovin让设计开发各自专注在自己的领域而不用去在意动画实现过程中的一些繁缛细节。而且只要保存好AE源文件我们可以随时导出替换json文件，方便动画调试。懂一些基础前端代码的小伙伴们，甚至可以自己发挥脑洞，自己调试出一些有趣的原型动画出来。一套json文件，就能同时满足web 原生 reactNative不同环境的动画制作需求。

相信Bodymoivn还会不断的迭代升级，开放更多的定制化参数。有兴趣下载试玩起来。

制作要领

由于lottie是用来适配移动库的，如果你只是PC上使用要好些，如果要在多个安卓版本中使用，则需要选择正确的版本。

下面这一节如果你不是做移动开发可以忽略半部份，但后面的制图要领建议要看

开始的开始，使用前需要确认的事情

• 请确认好你们使用的bodymovin版和两个客户端不同的版本

并不是最新版就一定适用，这个是个误区。因为是多端协同工作的，可能bodymovin这里有5.5.6的最新版本，但并不代表安卓端可以调配并使用到最新版本的json文件，所以使用之前，一定要先确认好设计师和客户端可以使用的版本。下面贴上我自己最后找到的版本确认作为例子给大家参考。那么在哪里可以找到并测试适合自己的版本呢？接下来也会和大家说明。
[图片上传失败...(image-6a9369-1582519383050)]
• 如何找到适合的bodymovin插件版本？

AE使用的bodymovin的各个版本可以在github上面找到。具体各个版本的下载，只需要下载对应的压缩包，然后解压后找到你要的对应的bodymovin插件即可。

image

🌍bodymovin插件下载：https://github.com/airbnb/lottie-web/releases

• 程序怎么找到适合自己的版本？

其实这个具体我也不清楚，但我们自己程序那边都是看他们的GitHub相关信息啦，相信程序猿们总有办法。这里奉上他们对应的github网址。

🌍安卓：https://github.com/airbnb/lottie-android

🌍iOS：https://github.com/airbnb/lottie-ios

• 怎么测试版本之间的兼容？

  大原则：一个版本的bodymovin输出的json文件可以在两个客户端app上运行，并且它的动画和设计效果是一样的，就代表它们兼容。

  测试的时候，你需要准备iOS和安卓两个不同机型的手机，然后分别下载他们对应的软件即可。iOS的叫「Lottie preview」，安卓的叫「Lottie」。若最终手机上看到的效果是和自己原效果一样，那就代表这个动画生成的json文件可以在这些版本的客户端上使用。因为手机可以看到，就代表当前客户端app的版本可以编译到这个版本的json文件。

   如果高版本的bodymovin输出的json文件客户端app运行不到，那就试试低一点的版本吧。



• 怎么下载较早之前的iOS/安卓Lottie app？

当我们遇到官方发布在应用市场的app版本并不适合我们动画json文件的版本，我们怎么样找到之前的app包测试使用呢？答案还是上github上面找。因为iOS第一次测试最新版本就完美匹配版本了lol，所以我就没怎么查过。这里奉上找安卓app包的方法：

 1. 找到Lottie-Android的GitHub网址，点击release

  🌍：https://github.com/airbnb/lottie-android

image

 2.查看对应的版本有无apk包下载

image

• 怎么查看当前的这个json文件版本是多少？

再次强调一下～json文件的版本等于bodymovin的版本。那么如果你当前只有一个json文件而你不知道它是什么版本，那怎么查看呢？很简单，使用代码编辑器打开它，你就知道它的版本是多少了。如果你电脑没有安装任何代码编辑器，使用笔记本打开方式也可以查看到。

image

🌟作图前

• 认真观看官方文档，bodymovin并不支持所有动画特效的输出

试用之前大佬和我说先试试我们常规做法的动画有什么是bodymovin输出不了的。然后我把我们自己做动画常用的渐变、描边、透明度、模糊这几个都尝试了一遍。结果发现插件最后的导出支持只有两个。所以，使用bodymovin前，一定要先试一下你的效果能否实现。而且一定要看官网写的特效支持文档！看清楚不同终端它支持的效果是否一样！

🌍bodymovin支持导出效果：http://airbnb.io/lottie/#/supported-features

• bodymovin不支持AE表达式输出

其实这个和第二点说的是一样的，而且官方那个文档也说了。只不过因为这个很重要，所以务必提醒大家不要踩坑～如果要做抖动的效果还是自己乖乖K帧吧。如果是做循环效果的话就交给程序吧！因为转化成json文件之后，程序有更大的发挥空间。（循环、改颜色等程序都可以帮到你）如果是要和程序员沟通的话，强烈建议不同客户端都看一下文档。抛个网站给你们，到时候给你们的客户端各取所需吧。

🌍文档官网：http://airbnb.io/lottie/#/

• 检查测试一下特别的图片特效是否支持

这里说的图片特效是指你在sketch或者ai里面画的图片是否可以支持导出，图片导出后是否会出现错位的效果。这一步很重要，如果你没有搞清楚自己常用的特效能否支持就急急忙忙开始弄了，这样以后浪费的时间更多。下面贴上我大佬叫我确认的东西，大家可以参考一下。（此处照例膜拜大佬）。

image

🌟创作动画前

• 使用AE里面的「从矢量图层创建形状」，使动画素材可代码化

动画的图片我们一般都是使用sketch或者AI画好以后再导进去AE。但是最好的解决方案把图片重新在AE里面重新绘制。而在AE里面重新绘制就需要用到「从矢量图层创建形状」这个了。因为设计师把图片“画”进AE之后，连图片包都不需要了，直接一个动画一段代码就完成了。这样就省去很多沟通时间和解决适配的问题了。这里提供两个方法给大家。

  1. sketch导出svg格式后转成.ai文件

第一种方法比较复杂，但不会踩雷。其实就是把切图转成ai格式导进去ae再创建形状。可是这样处理后导入AE，形状可以保留更多编辑。具体步骤如下：

         1.sketch里面把切图导出svg格式

         2.svg转成.ai格式导进去AE

         3.使用AE的「从矢量图层创建形状」重新绘制



  2. 使用「AEUX」插件

这个对于比较简单的图形还是支持导出的。但是遇到相对应复杂的图形，例如使用了布尔运算绘制的图形，就会有一些效果缺失等奇奇怪怪的问题，所以各位还是看看哪个对你们方便了。下面会奉上插件链接下载和教程网址。

🌍：https://oursketch.com/plugin/aeux

• 切图之前请确定好@1x的尺寸时的动画大小

因为是矢量动画，程序可以自动根据不同机型去做适配。所以就要养好一些设计习惯，确定好素材之后，把动画@1x时候的尺寸确定好动画尺寸。

🌟导出动画后

• 如何查看自己的动画效果是否完美输出？

当你把动画导出一个json文件之后，你可以把自己的json文件放到LottieFiles上面查看效果。进去后下载了Lottie的客户端后直接扫码就可以看到自己动画在手机上的效果，超方便的！

给

🌍LottieFiles：https://lottiefiles.com/

• 提高动画通过率的小tips

你以为这个网站只能丢一个json文件上去吗？把含有图片和json文件的压缩包丢上去，它也可以跑起来，只不过你在网站上可以看到那些图片文件，但在扫描二维码后再客户端上就看不到图片了。这个方法最适合交货给PM和老板的时候给他们看了，越高保真越容易提高通过率嘛～

附参考信息：
https://airbnb.design/lottie/
https://zhuanlan.zhihu.com/p/26304609
http://sjnk88.com/design/32.html
https://www.zcool.com.cn/article/ZOTk2MDgw.html

看逐浪CMS技术小哥做SVG动画（附使用Bodymovin和Lo

名词解解释

技术背景

详细使用指引

1. 如果电脑上没有AE的话，需要安装AE CC2014或更高版本。以AE CC2019为例：

2. AE安装完成后，安装Bodymovin插件。

2.1 到Bodymovin的GitHub首页（链接：[airbnb/lottie-web](https://github.com/airbnb/lottie-web）克隆项目到本地，或者下载.zip包。

2.2 git到文件包后，在项目目录的“/build/extension”目录下找到“bodymovin.zxp”文件，这个就是插件包了。

2.3 获取到了插件，你可能是无法打开的，这时需要安装一个ZXP install插件工具。

3. 打开AE，点击“编辑”>“首选项”>“常规”菜单项，选中“允许脚本写入文件和访问网络”，点击确定。

4. 点击“窗口”>“扩展”>“Bodymovin”菜单项，就可以打开Bodymovin的界面使用插件了。

5. 我们在空的AE项目里，新建一个名为“合成1”的合成，并制作一段简单的动画：

6. 打开Bodymovin插件窗口，可以发现“合成1”出现在了下面的列表中。选中“合成1”，设置好json文件输出位置，点击“Render”。

7. Bodymovin还为生成出的json文件提供了预览功能，点击插件界面上的“Preview”按钮，点击“Browse”载入刚刚生成的json文件，就会看到，动画被原汁原味地导出了：

8. 接下来我们新建一个网页来播放这段动画

9 用http方式打开这个页面，就会发现动画成功跑起来了，是不是很黑科技？

为何推荐

学习总结

缺点：

优点：

制作要领

猜你喜欢

热点阅读