SVG - 弧形动画跳跃步骤

我想为路径制作一个svg动画。启动结果和最终结果都很好，但由于某些原因，没有中间位置（动画刚刚从开始跳的时间后结束SVG - 弧形动画跳跃步骤

这是我使用的代码：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:10px;}</style></defs><title>percentage-green</title> 
<path 
    id="p1" 
    class="cls-1" 
     d=" 
      M 20 40 A 20 20 0 1 0 40 20 
     " 
/> 
<animate xlink:href="#p1" 
     attributeName="d" 
     attributeType="XML" 
     from="M 20 40 A 20 20 0 1 0 40 20" 
     to="M 50 57.32050807568877 A 20 20 0 0 0 40 20" 
     dur="10s" 
/> 
</svg>

来源

2016-11-17 zozo

它适用于Chrome，但不适用于Firefox。但是，由于SVG中定义了弧，所以动画有一个奇怪的方式。 – Codo

我其实认为国旗是问题（第四参数）。例如，如果我制作的弧度较小（低于180度），则按预期工作。当我通过180时，问题就出现了。但是......不知道如何在没有这个标志的情况下制作一个更大的弧线，除非我使用了2个弧线（而且我不赞成）。 – zozo

@科多是啊......我想1天一个人醒了，说：“嘿...让我们不要使用弧的极坐标 - 所以每一个人只会计算自己的”：|。开玩笑......我想知道这个选择是否有任何性能优势。 – zozo

如果我理解正确的话，尽管有困难，你想要做一个弧形动画。

弧式

<path d="M mx,my A rx,ry x-axis-rotation large-arc-flag, sweep-flag x,y" />

Large-arc-flag和sweep-flag是整数常量，它只取两个值“0”或“1”，不适合平滑动画。

可以从一个大圆弧使离散过渡动画时Large-arc-flag = 1到一个小弧形Large-arc-flag = 0

在小弧的位置下面的例子中被表示由红色虚线。

的小的和大的圆弧的开始和结束的坐标一致时，所述标志的唯一值`从“1‘大圆弧标志设定为’0”

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300"> 
 
<defs> 
 
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;} 
 
</style> 
 
</defs> 
 
<title>percentage-green</title> 
 
<g transform="scale(2)"> 
 
<path id="p1" 
 
    class="cls-1" 
 
     d="M 20 40 A 20 20 0 1 0 40 20"> 
 
<animate 
 
     attributeName="d" 
 
     attributeType="XML" 
 
\t \t repeatCount="5" 
 
     begin="Layer_1.mouseover"  
 
\t from="M 20 40 A 20 20 0 1 0 40 20" 
 
     to="M 20 40 A 20 20 0 0 0 40 20" 
 
     dur="2s" > 
 
\t \t </animate> 
 
</path> 
 
<circle cx="40" cy="20" r="3" stroke="dodgerblue" fill="none" /> 
 
<path d="M 20 40 A 20 20 0 0 0 40 20" stroke-dasharray="3" stroke="red" fill="none" /> 
 
</g> 
 
</svg>

当您将光标

第二个例子

动画开始

与你相似 - 参数“d”的补丁会平滑地改变，随着large-arc-flag = 1（大圆弧）的恒定值，当您将光标

动画开始

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300"> <defs> <style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;} </style> </defs> <title>percentage-green</title> <g transform="scale(2)"> <path id="p1" class="cls-1" d="M 20 40 A 20 20 0 1 0 40 20"> <animate xlink:href="#p1" attributeName="d" attributeType="XML" \t \t repeatCount="5" values="M 20 40 A 20 20 0 1 0 40 20;M 50 57 A 20 20 0 1 0 40 20;M 20 40 A 20 20 0 1 0 40 20" \t begin="Layer_1.mouseover" dur="3s" restart="whenNotActive" \t \t > \t \t </animate> </path> <circle cx="40" cy="20" r="4" stroke="dodgerblue" fill="none" /> <path d="M 50 57 A 20 20 0 1 0 40 20" stroke-dasharray="3" stroke="red" fill="none" /> </g> </svg>

来源

2017-05-11 19:07:21

SVG - 弧形动画跳跃步骤

回答

相关问题