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

Question

我最近在 Apple 的 Home 应用程序中发现了漂亮的图标动画。这是打开/关闭车库门的示例:https://giphy.com/gifs/0it1uTDtVR1Uw1FByx
我想知道如何制作这些动画。我能想到的方法有:

手动创建形状并在代码中为它们设置动画(这很难做到)

使用一些动画工具并导出 *.gif 帧(但这样我们会丢失矢量图形)

使用一些动画工具并导出 *.svg 帧(这样有效吗？)

使用一些动画工具可以生成所有形状和动画的代码(例如 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 库似乎是一个不错的中间立场。