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

Question

我最近在 Apple 的 Home 应用中发现了漂亮的图标动画。这是打开/关闭车库门的示例：https://giphy.com/gifs/0it1uTDtVR1Uw1FByx

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

1. 手动创建形状并在代码中为其设置动画（这很难做到）
2. 使用一些动画工具并导出 *.gif 帧（但这样会丢失矢量图形）
3. 使用一些动画工具并导出 *.svg 帧（这样效率高吗？）
4. 使用会生成包含所有形状和动画的代码（例如 JS/CSS）的动画工具（是否存在此类工具/程序？）

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

Answer 1

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

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

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

您还可以使用像 snapsvg.io 这样的库，其中动画 svg 的构建完全使用 JavaScript 完成。这是他们用于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);

否则，您可以使用无代码的动画 svg 创建器，例如 this one。

免责声明：我没有在演示计划之后测试过无代码站点，并且可能永远不会使用它。我个人的偏好可能是第一个建议，但像 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