0

我想在我的 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：从 0s 开始，显示 2s
  • quad2：1s开始，显示2s
  • quad3：2s开始，显示1s
  • quad3：从 0s 开始，显示 1s
  • 当时间达到 4s 时重复一切
4

1 回答 1

0

我自己找到了答案。技巧是使用keyTimes, 将其设置为"0;{start};{end};1", where{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>

于 2013-02-01T19:43:32.930 回答