动画不制作动画而是跳到结尾 [英] animation not animating instead jumping to end
本文介绍了动画不制作动画而是跳到结尾的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用SVG动画标签将路径从半填充更改为完整填充
I am trying to use the SVG animate tag to change the path from a half fill to a complete fill
<svg class="background-gradient" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<linearGradient id="grad">
<stop offset="0%" stop-color="rgba(82,181,244,.1)" stop-opacity="1"></stop>
<stop offset="100%" stop-color="rgba(70,215,255,.7)" stop-opacity="1"></stop>
</linearGradient>
</defs>
<path id="scroll-path" d="M0 0 H100 v 100" fill="url(#grad)">
<animate attributeName="d" from="M0 0 H100 v 100" to="M0 0 H100 L100 100 L0 100" dur="1s" repeatCount="indefinite" />
</path>
</svg>
当前它只是从动画的开头跳到结尾,并且不显示平滑填充I
Currently it just jumps from the beginning to the end of the animation and does not show the smooth fill I was hoping for in between.
有什么想法吗?
推荐答案
对于为了使动画流畅,路径必须具有相同数量和类型的命令。
For an animation to be smooth the path must have the same number and types of commands.
您的第一条路径具有3条命令MH v
Your first path has 3 commands M H v
您的第二条路径具有4条命令MHLL
Your second path has 4 commands M H L L
您需要使用2个L命令而不是v来写第一个路径,或者使用av而不是两个L命令来写第二个路径。
You'll need to write the first path using 2 L commands instead of the v or the second as a v instead of the two L commands.
这篇关于动画不制作动画而是跳到结尾的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文