富UI图标动画是如何完成的？
富UI图标动画是如何完成的？
提问于 2021-06-23 09:29:13
最近，我在苹果的家庭应用程序中看到了漂亮的图标动画。这是打开/关闭车库门的示例：https://giphy.com/gifs/0it1uTDtVR1Uw1FByx
我想知道如何制作这些动画。有一些方法我可以想到：
- 手动创建形状并在代码中动画(这很难做到)
- 使用一些动画工具并导出*.gif框架(但这样我们就失去了矢量图形)
- 使用一些动画工具并导出*.svg框架(这是否有效？)
- 使用一些动画工具来生成所有形状和动画的代码(例如JS/CSS) (这样的工具/程序存在吗？)
有没有人有制作这类动画的经验？如果你能分享这段经历，那就太好了:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-06-30 15:07:44
显然，没有任何答案是详尽无遗的。纯粹的"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这样的snapsvg.io库似乎是一个不错的中间点。
Stack Overflow用户
发布于 2021-07-05 10:21:11
我会选择4. Using some animation tool that will generate code (for example JS/CSS) with all the shapes and animation
我认为这可以通过一个名为lottie的工具来完成，该工具使用AfterEffects插件bodymovin导出的json文件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68097173
复制相关文章
相似问题
腾讯云开发者
