gpt4 book ai didi

css - SMIL 到 CSS 动画 : multiple animations on single element

转载 作者:行者123 更新时间:2023-11-28 15:48:40 27 4
gpt4 key购买 nike

现在SMIL is dying我想将我的简单动画 SVG 转换为使用 CSS 动画,但我不太确定如何进行映射。在这个特定的 svg 中有两个动画元素。

#embedded {
color: red;
}
   <svg id="embedded"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/>
<circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
</circle>
</svg>

虽然我一开始似乎对这些 CSS 规则还不错,但很快就卡住了

stroke-dasharray: 150.6 100.4 1 250 150.6 100.4;
animation-duration: 2s;
animation-iteration-count: infinite;
stroke-dashoffset: ?;

完整的映射是什么样的?有可能吗? Sara Soueidan说并不是所有的动画都可以使用 CSS 而可以使用 SMIL。

最佳答案

下面是如何将 SMIL 动画转换为等效的 CSS 动画:

  • 您的 animate 标签都有 dur="2s",因此 CSS 动画的持续时间 (animation-duration) 也将是 2 秒。您可以使用长手属性或短手属性指定此值,如以下代码段所示。
  • 没有为您的 animate 元素指定 calcMode 属性,因此插值模式为 linear。由于插值模式是线性animation-timing-function 也将是线性
  • repeatCount不确定的,因此animation-iteration-count 将是无限的
  • 对于 stroke-dashoffset,动画只有一个从 (0%) 和一个到 (100%) 的值。因此,在 CSS 动画的关键帧中,我们将 stroke-dashoffset 指定为 0(from 值)在 0%502( 值)在 100%
  • 对于 stroke-dasharray,动画使用了values 而不仅仅是 from。在这种情况下,有三个分号分隔的值,因此列表中的第一个值在 0% 关键帧中给出,列表中的第二个值在 50%< 中给出 关键帧,最后一个在 100% 关键帧选择器中给出。

#embedded, #embedded2 {
color: red;
width: 200px;
height: 200px;
}
#embedded circle#animated {
animation: demo 2s infinite linear;
}
@keyframes demo {
0% {
stroke-dashoffset: 0;
stroke-dasharray: 150.6 100.4;
}
50% {
stroke-dasharray: 1 250;
}
100% {
stroke-dashoffset: 502;
stroke-dasharray: 150.6 100.4;
}
}
<svg id="embedded" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round" />
<circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round" id="animated">
</circle>
</svg>

<svg id="embedded2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round" />
<circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502" />
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4" />
</circle>
</svg>

关于css - SMIL 到 CSS 动画 : multiple animations on single element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42248616/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com