时间戳

首页 > 解决方案 > 丰富的 UI 图标动画是怎么做的？

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

问题描述

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

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

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

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

标签： user-interfaceanimationiconsuser-experience

解决方案

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

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

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

您还可以使用像snapsvg.io这样的库，其中动画 svg 的构建完全使用 JavaScript 完成。这是他们用于快速入门页面的示例：

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 创建器。

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

推荐阅读