SVG动画组合@keyframes

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

路由器每边都有不同的颜色。每一方都有自己的课程。
目前我的颜色填充看起来是这样的：

@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/

来源

2016-11-25 Interactive

我不知道是否能可以使用一个可重复使用的动画来完成，但可以使用两个可重复使用的动画来完成，如[here]（https://jsfiddle.net/yzzubxgf/1/）。让我知道它是否有帮助，如果有，我会作为答复发布。 – Harry

不是真的没有问题。这个想法是，首先绘制所有线条，然后填充颜色。因为每一边都有自己的颜色，我认为可以在每个颜色的一个“@ keyframe”中做到这一点 – Interactive

对多于一个动画的需求仅仅是因为你说每一面都有自己的颜色。在填充转换之前绘制线条是一件简单的事情。它只是需要延迟调整像[这里]（https://jsfiddle.net/yzzubxgf/2/）。（我改变了描边的颜色，使其更明显。） – Harry

如果用青菜，你可以创建一个混合，将产生不同的动画这样的代码：

@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);

来源

2016-11-25 14:21:18 Fabio

SVG动画组合@keyframes

回答

相关问题