SVG路径变形宽松 [英] SVG path morph easing

问题描述

我想控制SVG路径动画的插值，但我只可以得到它与线性插值工作。我已经创建此code笔作为一个简单的例子：

i'd like to control the interpolation of a path animation in svg, but i can only get it working with linear interpolation. I've create this code pen as a simple example:

的http：//$c$cpen.io/adamdaly/pen/yzhCm/

正如你可以看到黑色路径动画正确使用线性内插，但设置了非线性红线没有动画。应如何工作的？

As you can see the black path is animating correctly using linear interpolation, but the red line that is set up for non-linear isn't animating. How should this work?

亚当

推荐答案

您有几个造成动画是的 nofollow的>等被忽略。

You have a couple of issues which cause the animation to be in error and so be ignored.

1. 必须有一样多keyTimes条目值。


2. 必须有keySplines条目比重keyTimes项少了一个

您没有遵守这些规则，所以动画是错误的。下面是纠正的事情的一种方式......

You aren't following these rules and so the animation is in error. Here's one way to correct things...

<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路径变形宽松的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！