Question

我想在svg中控制路径动画的插值，但我只能使用线性插值。我已经创建了这个代码笔作为一个简单的例子：

正如您所看到的，黑色路径使用线性插值正确动画，但为非线性设置的红线不是动画。这应该怎么做？

亚当

Answer 1

您有几个问题导致动画为in error，因此请忽略。

必须有与keyTimes一样多的keyTimes条目。
keyTimes条目必须少于keyTimes条目

您没有遵循这些规则，因此动画出错。这是纠正事情的一种方法......

<svg  version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="100%" height="100%">
      <path d="M100 200 c0,-100 200,-100 200,0" stroke="#000000" stroke-width="4" fill="none">
        <animate
                 dur="2"
                 repeatCount="indefinite"
                 attributeName="d"
                 from="M100 200 c0,-100 200,-100 200,0" 
                 to="M100 200 c0,-100 200,-100 200,0"
                 values="M100 200 c50,-100  250,-100 200,0; M100 200 c-50,-100 150,-100 200,0; M100 200 c50,-100  250,-100 200,0">
          
        </animate>
      </path>
      <path d="M100 200 c0,-100 200,-100 200,0" stroke="#FF0000" stroke-width="4" fill="none">
        <animate
                 dur="2"
                 repeatCount="indefinite"
                 attributeName="d"
                 from="M100 200 c0,-100 200,-100 200,0" 
                 to="M100 200 c0,-100 200,-100 200,0"
                 values="M100 200 c50,-100  250,-100 200,0; M100 200 c-50,-100 150,-100 200,0; M100 200 c50,-100  250,-100 200,0"
                 keyTimes="0; 0.5; 1"
                 keySplines="0.25 0 0.75 1; 0.25 0 0.75 1"
                 calcMode="spline">
          
        </animate>
      </path>
      
    </svg>

SVG路径变形缓和

1 个答案: