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つのクワッドを表示し、1秒ごとに1つが1秒間消えます。しかし、それらは互いに依存するべきではありません。それを行う方法はありますか？

別の言い方をすれば：

  • quad1：0秒から開始し、2秒表示します
  • quad2：1秒から開始し、2秒表示します
  • quad3：2秒で開始し、1秒表示します
  • quad3：0から開始し、1秒間表示します
  • 時間が4秒に達したらすべてを繰り返します
4

1 に答える 1

0

私は自分で答えを見つけました。トリックは、を使用しています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>

于 2013-02-01T19:43:32.930 に答える