如何動畫svg矩形像音樂波一樣增長？

Question

我有下面的代碼，

<div id="akbar"> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    width="400" height="200" viewBox="0 0 400 200"> 
    <g transform="scale(1,-1) translate(0,-200)"> 
     <rect x="50" y="0" fill="#f00" width="100" height="100"> 
     <animate attributeName="height" 
       from="0" 
       to="100" 
       dur="0.5s" 
       fill="freeze" /> 
     </rect> 
     <rect x="150" y="0" fill="#f70" width="100" height="200"> 
     <animate 
       attributeName="height" 
       from="0" 
       to="200" 
       dur="0.5s" 
       fill="freeze" /> 
     </rect> 
     <rect x="250" y="0" fill="#ec0" width="100" height="150"> 
     <animate 
       attributeName="height" 
       from="0" 
       to="150" 
       dur="0.5s" 
       fill="freeze" /> 
     </rect> 
    </g> 
    </svg> 
</div> 

我想動畫SVG矩形成長喜歡樂浪。

我該如何做到這一點？

我需要this behavior

Answer 1

可以使用

• values實現它，
• keyTimes
• 和keySplines的<animate>標籤的

屬性。

JSfiddle example。

我剝去你的例子只有單個列：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
width="400" height="200" viewBox="0 0 400 200"> 
    <g transform="scale(1,-1) translate(0,-200)"> 
    <rect x="50" y="0" fill="#f00" width="100" height="100"> 
     <animate 
     attributeName="height" 
     from="0" 
     to="100" 
     dur="1s" 
     fill="freeze" 
     values="0; 200; 150; 160; 150; 160" 
     keyTimes="0; 0.2; 0.4; 0.6; 0.8; 1" 
     keySplines=".42 0 1 1; 
        0 0 .59 1; 
        .42 0 1 1; 
        0 0 .59 1; 
        .42 0 1 1; 
        0 0 .59 1;" 
     /> 
    </rect> 
    </g> 
</svg> 

由於它是不是很完美，你可以玩的屬性，以便更好地調整時間（keySplines尤其是），並使其更樂浪如。

正如可以在所提供的例子中看到的，運動的單個列步驟是：

1. 所有的底部的方式頂部
2. 然後，從頂部高度的〜83％
3. 然後，從〜83％至〜88％，
4. 然後，從〜88％至〜83％，
5. 然後，從〜83％至〜88％

我想這提高這些重複的百分比數字（83和88）之間的差異會給你比我稍好的效果（這是基於75％和80％，在widht: 200px上更容易計算），但它很接近。

還可以看看關於SVG動畫的CSS tricks article，它非常全面，涵蓋了關於提及的屬性的所有細節 - 等等。