如何为 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）并使其更像音乐波。

如您在提供的示例中所见，单列移动步骤为：

一路从下往上
然后，从顶部到大约 83% 的高度
然后，从 ~83% 到 ~88%，
然后，从 ~88% 到 ~83%，
然后，从 ~83% 到 ~88%

我想增加那些重复百分比数字（83 和 88）之间的差异会给你带来比我的（基于 75% 和 80%，更容易在 widht: 200px 上计算）更好的效果, 但它很接近。

另请参阅 CSS tricks article SVG 动画，它非常详尽，涵盖了有关上述属性的所有细节 - 以及更多。

如何为 svg 矩形设置动画以像音乐波浪一样增长？

How to animate the svg rectangle to grow like music wave?

animation

svg

svg-animate