动态 SVG 制作软件有哪些？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1871 天前的主题，其中的信息可能已经有所发展或是发生改变。

大佬

软件

svg

图片

8 条回复 • 2019-09-30 12:19:22 +08:00

OSF2E

2019-09-29 10:56:32 +08:00

业余 UI 一枚，我只知道 Adobe Animate

damngood

2019-09-29 11:03:48 +08:00 via iPhone

designer code 上面有一个专题，貌似叫什么 Green sock 还是什么的

zhangyu911013

2019-09-29 11:08:38 +08:00 via Android

after effect 制作，bodymovin 插件导出 json，前端直接用

vsitebon

2019-09-29 11:51:54 +08:00

有一个办法是 After efect 结合 bodymovin 导出
有一个收费的在线编辑器是 svgator.com
有一个免费的在线编辑器是 svgartista.net
有一个本地的编辑器是 synfig （非常简单，只能做很简单的效果）
有一个强大免费开源的本地编辑器是 blender （易用性不够 AE ）
----------
以下是使用 JS 结合静态 SVG 实现的动画
有两个是使静态 svg 动起来的 JS 库，snapsvg.io ，zzz.dog （这个是基于二维图，制作 3D 动态）
有一个但是我没试过的 JS 库是 d3.js （可以让你制作动态图表，前段时间特别火）

no1xsyzy

2019-09-29 14:05:22 +08:00

@vsitebon 我觉得 JS+SVG 就没必要指出了，这个连 Angular/React/Vue 三大框架都行，甚至模板化更亲民（这大概也是为什么 d3 突然又没什么声音了）。
现在炫技的 “动态 SVG” 都是在拿 CSS 动画做，虽然我不会。一方面 CSS 可以在不支持 JS 的地方用，另一方面 CSS 可以使用 GPU 加速（变换运算），而 JS+SVG 不行。

当然，用二维做 3D （伪 3D ？）也算是个独立方向。

LucasW

2019-09-29 19:17:38 +08:00

选择不多 snapsvg.io 正在使用，还不错，但是做复杂动画的话已经完全被 Canvas 和 WebGL 取代。

vsitebon

2019-09-29 19:20:36 +08:00

@no1xsyzy 嗯，zzz.dog 就是二维做伪 3D，其它我其实只是列出来一些方案来抛砖引玉。更重要的是分割线以上的方案，我觉得那些才是楼主想要的

fenx

2019-09-30 12:19:22 +08:00

之前在 DN 碰到一个 [帖子]( https://www.designernews.co/stories/104091-what-tools-are-best-for-animating-svgs) 讲这个的