用一條線重建矩形波動畫

我有這個動畫是由5px寬的矩形組成的。用一條線重建矩形波動畫

https://codepen.io/guanzo/pen/rmGqNP

你可以看到它呈現出波浪狀的行爲。這告訴我必須有一種方法來用一條曲線代替這個運動，而不是數百個矩形。最有可能使用像<path>或<polyline> svg元素？我想我需要使用一些修正的正弦波函數，但是我無法把頭部纏繞在數學上。

編輯：管理得到一個polyline隨着cubicInOut緩和上升和下降。

https://codepen.io/guanzo/pen/vmeoXw

仍然不知道該怎麼樣的行爲波進行編程。

編輯：我試圖用path和貝塞爾曲線轉換。關閉，但沒有雪茄。

https://codepen.io/guanzo/pen/XRevME?editors=1010

來源

2017-05-05 Eric Guan

這個曲線可以用貝塞爾曲線的SVG路徑，並製作動畫的轉換來實現。您還可以添加漸變和蒙版。 https://developer.mozilla.org/zh-CN/docs/Web/SVG – Chris

相反動畫生產線的控制點，它會更容易應用線性變換，整條生產線。這裏有一個簡單的例子：

<svg width="100%" viewBox="0 0 100 40"> 
 
    <rect x="0" y="0" width="100" height="40" fill="#fa0" stroke="none"/> 
 
    <path d="M0 0V10H0C20 10 50 30 80 30H120C150 30 150 10 180 10 H220C250 10 250 30 280 30H320C350 30 350 10 380 10H400V-10Z" fill="#c00" stroke="none"> 
 
    <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-300 0" to="-100 0" dur="5s" repeatCount="indefinite"/> 
 
    </path> 
 
</svg>

來源

2017-05-06 02:01:32

簡單是最好的，謝謝。 –

用一條線重建矩形波動畫

回答

相關問題