SVG路径变形easing

Question

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

http://codepen.io/adamdaly/pen/yzhCm/

正如你可以看到黑色的路径动画正确使用线性插值，但是这是建立非线性红线不动画。这项工作应该如何？

亚当

Answer 1

你有一对夫妇的造成动画是in error等被忽略的问题。

1. 必须有许多keyTimes条目和值一样多。
2. 必须有一个少keySplines项采取比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>