我正在尝试做最基本的SVG动画，我发现的一切都试图教我关键帧和类似的高级东西。我在 After Effects 中了解关键帧，但这根本不是我需要的。
我想做的就是按顺序为相同的 8 个 svg 路径设置动画，就像翻书一样，我可以在其中轻松编辑循环速度。我希望图像改变颜色，所以我会重复使用不同颜色保存的相同的 8 个 SVG，或者也许有更好的方法可以使用代码来做到这一点，我不知道。我提供了一个示例 GIF，它展示了我正在寻找的确切效果。基本上我想以可扩展的 SVG 格式重新创建该 GIF。你看到的是 8 张独立的图画。
我想在我的网站上显示此动画作为主图形，因此它需要可扩展。
我需要尽快完成我的投资组合审查。
以下是使用 CSS 为 8 个 SVG 帧设置动画的示例。
我们使组元素（即框架）在 1/8 (12.5%) 秒内可见，然后使用@keyframe定义。每个后续帧的动画都会延迟 0.125 秒，以便它们按顺序出现。
svg {
width: 300px;
}
#frame1 {
visibility: hidden;
animation: 1s show infinite;
}
#frame2 {
visibility: hidden;
animation: 1s show infinite;
animation-delay: 0.125s;
}
#frame3 {
visibility: hidden;
animation: 1s show infinite;
animation-delay: 0.25s;
}
#frame4 {
visibility: hidden;
animation: 1s show infinite;
animation-delay: 0.375s;
}
#frame5 {
visibility: hidden;
animation: 1s show infinite;
animation-delay: 0.5s;
}
#frame6 {
visibility: hidden;
animation: 1s show infinite;
animation-delay: 0.625s;
}
#frame7 {
visibility: hidden;
animation: 1s show infinite;
animation-delay: 0.75s;
}
#frame8 {
visibility: hidden;
animation: 1s show infinite;
animation-delay: 0.865s;
}
@keyframes show {
0% { visibility: visible;}
12.5% { visibility: visible; }
12.6% { visibility: hidden; }
100% { visibility: hidden; }
}
<svg viewBox="0 0 300 300">
<g id="frame1">
<circle cx="150" cy="50" r="25"/>
</g>
<g id="frame2">
<circle cx="250" cy="50" r="25"/>
</g>
<g id="frame3">
<circle cx="250" cy="150" r="25"/>
</g>
<g id="frame4">
<circle cx="250" cy="250" r="25"/>
</g>
<g id="frame5">
<circle cx="150" cy="250" r="25"/>
</g>
<g id="frame6">
<circle cx="50" cy="250" r="25"/>
</g>
<g id="frame7">
<circle cx="50" cy="150" r="25"/>
</g>
<g id="frame8">
<circle cx="50" cy="50" r="25"/>
</g>
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
