SMIL到CSS动画:单个元素

时间:2017-02-15 11:51:27

标签: css animation css-animations svg-animate smil

现在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>
&#13;
&#13;
&#13;

虽然我似乎很快就开始使用这些css规则但我很快就陷入了困境

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

完整的映射会是什么样的?有可能吗? Sara Soueidan表示并非所有动画都可以使用可能使用SMIL的CSS。

1 个答案:

答案 0 :(得分:1)

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

  • 您的animate代码都有dur="2s",因此CSS动画的持续时间(animation-duration)也是2s。您可以使用long-hand属性指定此值,也可以使用下面代码段中的简写属性。
  • 没有为calcMode元素指定animate属性,因此插值模式为linear。由于插值模式为linear,因此animation-timing-function也将为linear
  • repeatCountindefinite,因此animation-iteration-countinfinite
  • 对于stroke-dashoffset,动画只有一个从(0%)到一个到(100%)的值。因此,在CSS动画的关键帧中,我们在stroke-dashoffset0from值处指定0%502to值) )100%
  • 对于stroke-dasharray,动画使用 ,而不仅仅使用fromto。在这种情况下,有三个分号分隔值,因此列表中的第一个值在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>