Question

我想在我的svg中制作复杂的动画时间轴。例如，我有3个矩形，我想按顺序显示它们而不是重新启动动画。这是：http://jsbin.com/opuguh/3/edit 更复杂，我的最终目标是让这样的四边形显示出来

seconds    0        1        2   
quad 1  inline   inline    none  
quad 2   none    inline   inline 
quad 3  inline    none    inline

所以总是显示2个四边形，每秒其中一个消失一秒钟。但他们不应该相互依赖。有办法吗？

如果我以其他方式说出来：

quad1：从0开始，显示为2s
quad2：从1开始，显示为2s
quad3：从2秒开始，显示为1秒
quad3：从0开始，显示为1秒
当时间达到4s时重复所有内容

Answer 1

我自己找到了答案。 Trick正在使用keyTimes，将其设置为"0;{start};{end};1"，其中{start}和{end}是您想要显示或隐藏元素的时间分数（timeInSeconds / duration）。通过这种方式，所有这些都是独立的，有点像时间表：）

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Svg animation</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100">
  <rect x="10" y="10" width="50" height="50" fill="green">
  <animate
      attributeName="display"
      values="none;inline;none;none"
      keyTimes="0;0;0.4;1"
      dur="3s"
      begin="0s" repeatCount="indefinite" />
  </rect>
  <rect x="50" y="50" width="50" height="50" fill="red"  >
  <animate
      attributeName="display"
      values="none;inline;none;none"
      keyTimes="0;0.3333;0.666;1"
      dur="3s"
      begin="0s" repeatCount="indefinite" />
  </rect>
  <rect x="90" y="10" width="50" height="50" fill="blue" >
  <animate
      attributeName="display"
      values="none;inline;none;none"
      keyTimes="0;0.6666;1;1"
      dur="3s"
      begin="0s" repeatCount="indefinite" />
  </rect>
</svg>

SVG动画计时/拼贴并重复全部

1 个答案: