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

回答

相關問題