SVG动画组合@keyframe

Question

我正在创建一个路由器的SVG动画。

这不是很令人兴奋，但我有以下问题。

路由器的每一端都有不同的颜色。每一方都有自己的类。

目前，我的颜色填充如下所示：

@keyframes router_base 
{   
    0% {
        fill: #85d1d3;
    }   
    50% {
        fill: #85d1d3;  
        stroke-dashoffset: 0;
    }   
    100% {
        fill: black;
        stroke-dashoffset: 0;
    } 
 }

这告诉router_base，在给定的时间中，它50%的时间保持#85d1d3，最后50%变为黑色。

每一面都有它自己的颜色，所以在这个例子中，我应该为每种颜色创建一个@keyframe。

这看起来可以做得更聪明……

这里是整个事情的一个小提琴。https://jsfiddle.net/yzzubxgf/

Answer 1

如果使用sass，你可以创建一个mixin来为不同的动画生成代码，如下所示：

@mixin createKeyFrames($animationName, $color1, $color2 : black) {
  @keyframes #{$animationName}
  {   
      0% {
          fill: $color1;
      }   
      50% {
          fill: $color1;  
          stroke-dashoffset: 0;
      }   
      100% {
          fill: $color2;
          stroke-dashoffset: 0;
      } 
   }
}

然后把它叫做

@include createKeyFrames(router_base, #85d1d3);