丰富的UI图标动画是怎么做的？

Question

我最近在 Apple 的家庭应用程序中发现了漂亮的图标动画。这是 opening/closing 个车库门的示例：https://giphy.com/gifs/0it1uTDtVR1Uw1FByx

我想知道如何制作这些动画。我能想到的方法有：

手动创建形状并在代码中设置动画（这很难做到）
使用一些动画工具导出*.gif帧（但这样会丢失矢量图）
使用一些动画工具并导出 *.svg 帧（这样有效吗？）
使用一些动画工具生成所有形状和动画的代码（例如 JS/CSS）（这样的 tool/program 存在吗？）

有没有人有制作此类动画的经验？如果你能分享这个经验就太好了:)

Answer 1

显然没有答案是详尽无遗的。纯“CSS3 艺术”是我见过人们使用的路线，因为它可以精确定义复杂的几何图形和动画。但这里有一些我研究过的使用 SVG 的方法。

您实际上可以在 SVG 中嵌入一个脚本标签来为元素设置动画。像这样：

<svg>
    <!-- svg objects -->
    <script><![CDATA[!
        //... Javascript to animate svg objects...
    ]]></script>
</svg>

您也可以使用像 snapsvg.io where the construction of an animated svg is done purely with JavaScript. Here's the example they use for their quickstart 页面这样的库：

var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});
var smallCircle = s.circle(100, 150, 70);
var discs = s.group(smallCircle, s.circle(200, 150, 70));
discs.attr({
    fill: "#fff"
});
bigCircle.attr({
    mask: discs
});
smallCircle.animate({r: 50}, 1000);

否则你可以使用像 this one 这样的无代码动画 svg 创建器。

免责声明：我没有通过演示计划测试无代码站点，可能永远不会使用它。我个人的喜好可能是第一个建议，但是像 snapsvg.io 这样的 JavaScript 库似乎是一个不错的中间立场。

Answer 2

我会选择 4. Using some animation tool that will generate code (for example JS/CSS) with all the shapes and animation

我认为可以使用名为 lottie 的工具来完成，该工具使用名为 bodymovin.

的 AfterEffects 插件导出的 json 文件

Lottie web docs

丰富的UI图标动画是怎么做的？

How are rich UI icon animations done?

user-interface

animation

icons

user-experience