Question

我想在没有SMIL或库（jquery，Snap.svg，Velocity.js等）的情况下对svg路径数据进行变形/动画处理，只需要纯javascript（如果可能的话，可选择使用css）。我想这样做是因为Chrome不赞成使用SMIL，他们建议使用css或“Web动画”制作动画 - 它们对网络动画有什么意义？ - 。例如，我想将id为“rect1”的路径转换为下面代码中id为“rect2”的路径：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>morph/animate svg path data WITHOUT SMIL or libraries (jquery, Snap.svg, Velocity.js etc.), just pure javascript</title>
</head>
<body>

<svg
	 xmlns="http://www.w3.org/2000/svg"
	 xmlns:xlink="http://www.w3.org/1999/xlink"
	 version="1.1"
	 width="500px" height="500px"
	 viewBox="0 0 500 500"
	 >
<g id="layer1">
  <path id="rect1" d="m25 7.3 61 12-6 57-71 6z" stroke="#f00" stroke-miterlimit="10" stroke-width="2" fill="none"/>
 </g>
 <g id="layer2">
  <path id="rect2" d="m9.3 34 59-27 26 41-54 42z" stroke="#f00" stroke-miterlimit="10" stroke-width="2" fill="none"/>
 </g>
</svg>

<script>

	// code for animating/morphing path with id "rect1" to path with id "rect 2"

</script>

</body>

</html>

Answer 1

要仅使用JavaScript为路径数据设置动画，我建议缓存两个路径的原始路径数据。然后使用计时器逐步完成动画过程。在每个步骤中，计算从起始路径数据平滑移动到结束路径数据的当前路径数据。

以下代码等待1秒，然后运行2秒动画......

Integer

Javascript - morphing / animate svg路径数据没有SMIL或库

1 个答案: