Question

我正在创建路由器的SVG动画这不是很令人兴奋，但我有以下问题。

路由器的每一面都有不同的颜色。每一方都拥有自己的班级目前我的颜色填充如下：

<?php
function traverseArray($array)
{
    // Loops through each element. If element again is array, function is recalled. If not, result is echoed.
    foreach ($array as $key => $value) {
        if (is_array($value)) {
            traverseArray($value);
        } else {
            if (gettype($value) == 'object') {
                echo "<ul>";
                traverseArray($value);
            } else {
                echo '<li><a href="#">' . $key . " : " . $value . '</a>';
            }
        }
    }
}
traverseArray($transition_data);

这告诉@keyframes router_base { 0% { fill: #85d1d3; } 50% { fill: #85d1d3; stroke-dashoffset: 0; } 100% { fill: black; stroke-dashoffset: 0; } }它在给定时间内保持50％router_base，最后50％变为黑色。

每一方都有它自己的颜色所以在这个例子中我应该为每种颜色创建一个#85d1d3。这看起来可以做得更聪明....

这是整个事情的小提琴。 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);

SVG动画结合@keyframes

1 个答案: