想知道 Ant Design 首页的这些 SVG 动画可以用什么软件导出生成

[cbais7890]

https://ant.design/index-cn
https://pro.ant.design/index-cn

都十分炫酷，是用 AE 导出的么？

[lwbjing]

代码一行一行敲出来的，你是不是不信？

[cbais7890]

@lwbjing #1 只是感觉他们团队会用更高效的方式干这件事~

[Pudge1337]

在 AE 用 bodymovin 插件导出 JSON 可以实现一些比较炫酷动画，楼主可以去 https://airbnb.design/lottie/看看

[cbais7890]

@Pudge1337 #3 我记得以前 Lottie 这个项目导出来的是 CANVAS，原来现在已经可以生成效果这么好的 SVG 了。感谢分享，看来是时候深入学一波 AE 了。

[Pudge1337]

我也做过几个小动画在 Lottie preview 里看到的确是矢量的，而且还原度很高，感觉很炫酷。。就是还没学会怎么在 HTML 里引用。。😄

[cbais7890]

@Pudge1337 #5 搜到了这样一个教程 https://zhuanlan.zhihu.com/p/26304609 应该对你有帮助

[oness]

一打开网页，发现 chrome 的 cpu 35%+。。这谁敢用啊

[oness]

好像还有内存泄漏,以 0.5M/每秒 速度增加

[cbais7890]

@oness #7 没有这么严重吧，CPU 占用肯定是有，我这边最多到 10%

[vx2e]

Animate CC - adobe 出品；可以导出 canvas 动画。

[likuku]

可能 @cbais7890 电脑的 CPU 性能是 @oness 的 3 倍有于...

[oness]

i5 6500 的三倍是哪个？

[murriouz]

CPU 占用确实高，内存泄漏也确实观察到了

i5-2400@3.1GHz 一打开就占用 50% 上下

[dalieba]

Inkscape 有动画插件

[wwwwzf]

基于 ae+插件，我实现了一个效果
http://code.z01.com/lottie/


名词解解释


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



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



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 作为动画输出、帮助我们在项目中更自然便捷呈现动画的原生引

完整教程：
https://www.z01.com/blog/products/3524.shtml