SVG中風動畫增加長度

我一直在搜索（不成功）在互聯網上如何實現某種SVG路徑動畫。我從他的CSS技巧文章中重新使用了Chris Coyier的codepen。在我編輯的版本中，我已經達到了預期的效果，但非常粗糙，而且它是一種非常「黑客入侵」的方法，它絕對沒有效率。SVG中風動畫增加長度

筆：https://codepen.io/anon/pen/zEZpPK（可視化在Chrome）

的想法：動畫的SVG行程，使得它與長度爲0（一個dashOffset等於路徑總長度）開始，所以沒有什麼渲染。然後，逐漸減小dashOffset，直到顯示整個SVG行程。到目前爲止，沒有問題，這實際上是一個相當普遍的效果。但是我想增加一些額外的東西：筆畫的「起點」也必須逐漸消除，以達到筆中的效果。

具體要求是，筆畫可以通過起始點2次，並且筆劃長度達到100％，因爲它第二次通過起始點，就像它在筆中一樣（不與presicion）。

我實現它的方式：寫下來很複雜。你可以探索筆，看看我自己做了什麼。也許爲了更好地理解，您可以將ID爲Layer_3的SVG的筆觸顏色編輯爲與白色和黑色不同的東西，以便可視化動畫的觸發方式。不過，我會嘗試解釋：

我複製了原始SVG，並在HTML文件中粘貼了兩次，因此文檔中有3個SVG，每個SVG都在另一個之上。中間那個，白色中風，另外兩個黑色中風。第二個SVG（中間的那個）有一個動畫，它的持續時間是第一個SVG動畫的兩倍。然後，第3個SVG動畫與第1個動畫的持續時間相同，但它具有與第1個動畫完成時間相同長度的動畫延遲。

這是一個非常無效的解決方案，但它可以很好地說明我試圖實現的目標。

問題：有什麼辦法可以達到這樣的效果嗎？隨着筆畫大小的增加，筆畫在路徑上移動，直到達到完整路徑長度？

我雖然可能沿着dashOffset動畫使用TweenMax（GSAP）嘗試將SVG路徑逐漸從單個錨點變形爲完全構建的路徑，並且具有從開始的dashOffset動畫，最大爲零。但變形效果並不是真正需要的，更像是一個切片函數，它採用單個錨點並添加更多的錨點（遵循路徑數據），直到路徑變爲閉合形狀。但是，我再次沒有發現這種影響的信息。

也許我正面臨SVG的限制。但是，如果任何人有想法或知道描述這種效果的網站，請告訴我。

來源

2017-09-27 Thomas White

只需一個SVG即可完成。國際海事組織，它可能是最簡單的，只是忘記了短跑偏移，只是動畫短跑陣列。

由於該部分的方式，通過動畫，你需要一個數組，它是

gap - stroke - gap

你需要使用具有四個值（中風差距筆畫差異）的dasharray的事實。

請注意，在您的破折號陣列中使用與您的路徑長度相匹配的值也很重要。在你的情況下，你的路徑長度是821.6。所以我使用822的值來表示簡單 - 這足夠接近。

.path1 { 
 
    stroke-dasharray: 0; 
 
    animation: dash 5s linear; 
 
} 
 
/* 821.6 */ 
 

 
@keyframes dash { 
 
    0% { 
 
    stroke-dasharray: 0 0 0 822; 
 
    } 
 
    25% { 
 
    stroke-dasharray: 0 205.5 205.5 822; 
 
    } 
 
    50% { 
 
    stroke-dasharray: 0 411 411 822; 
 
    } 
 
    75% { 
 
    stroke-dasharray: 411 205.5 822 822; 
 
    } 
 
    100% { 
 
    stroke-dasharray: 822 0 822 822; 
 
    } 
 
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve"> 
 

 
    <path class="path1" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8 
 
\t s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41 
 
\t C46.039,146.545,53.039,128.545,66.039,133.545z"/> 
 
    
 
</svg>

來源

2017-09-27 12:08:12

非常感謝你。事實上，這是一個完美的工作理念。我對使用多個值的dash數組屬性不是很熟悉。我會就此事指導自己。再次感謝。完善。 –

好吧，動畫完美地工作，但當我將'stroke-linecap'屬性設置爲'round'時，我發現一個問題。然後一個圓點出現在筆畫的開頭，並停留在那裏。我想這是因爲在那一點上有'width：0'的短劃線，但是當應用圓形屬性時，它被迫「平滑」該短劃線並且因爲它是零寬度，那麼它只是創建一個帶有半徑等於筆畫寬度的一半。我曾試着玩'gap-stroke-gap'的初始值，但點仍然存在。可以做些什麼呢？ –

好的。忽略以前的評論。我爲「stroke-dashoffset」添加了一個很小的值，並且點消失了。 –

SVG中風動畫增加長度

回答

相關問題