丰富的UI图标动画是怎么做的?
How are rich UI icon animations done?
我最近在 Apple 的家庭应用程序中发现了漂亮的图标动画。这是 opening/closing 个车库门的示例:https://giphy.com/gifs/0it1uTDtVR1Uw1FByx
我想知道如何制作这些动画。我能想到的方法有:
- 手动创建形状并在代码中设置动画(这很难做到)
- 使用一些动画工具导出*.gif帧(但这样会丢失矢量图)
- 使用一些动画工具并导出 *.svg 帧(这样有效吗?)
- 使用一些动画工具生成所有形状和动画的代码(例如 JS/CSS)(这样的 tool/program 存在吗?)
有没有人有制作此类动画的经验?如果你能分享这个经验就太好了:)
显然没有答案是详尽无遗的。纯“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 库似乎是一个不错的中间立场。
我会选择 4. Using some animation tool that will generate code (for example JS/CSS) with all the shapes and animation
我认为可以使用名为 lottie
的工具来完成,该工具使用名为 bodymovin
.
的 AfterEffects 插件导出的 json 文件
我最近在 Apple 的家庭应用程序中发现了漂亮的图标动画。这是 opening/closing 个车库门的示例:https://giphy.com/gifs/0it1uTDtVR1Uw1FByx
我想知道如何制作这些动画。我能想到的方法有:
- 手动创建形状并在代码中设置动画(这很难做到)
- 使用一些动画工具导出*.gif帧(但这样会丢失矢量图)
- 使用一些动画工具并导出 *.svg 帧(这样有效吗?)
- 使用一些动画工具生成所有形状和动画的代码(例如 JS/CSS)(这样的 tool/program 存在吗?)
有没有人有制作此类动画的经验?如果你能分享这个经验就太好了:)
显然没有答案是详尽无遗的。纯“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 库似乎是一个不错的中间立场。
我会选择 4. Using some animation tool that will generate code (for example JS/CSS) with all the shapes and animation
我认为可以使用名为 lottie
的工具来完成,该工具使用名为 bodymovin
.