ヒント: アニメーション要素を組み込んで、Scalable Vector Graphics (SVG) に活気を与える

各種アニメーション効果の作成と結合

Scalable Vector Graphics (SVG) は2次元グラフィックスのためのXMLベースです。単調だと思われますか?それどころか、SVGは利用可能な多くのエキサイティングな機能を持っています。例えば、変形、透明マスク、フィルター効果、アニメーションなどです。このヒントでは、みなさんのSVGドキュメントに5種類のSVGアニメーションを適用させる方法に関して例を示します。

Brian Venn (vennb@uk.ibm.com), Software Tester, IBM Business Integration, Hursley Park

Photo of Brian John VennBrian Venn はBritish Aerospace Defence Systemsに3年間勤務した後、2000年10月にIBMに入社しました。彼はSouthampton大学を卒業し、天文物理学の学位を取得しています。またDB2とソフトウェア・テストの資格を取得しています。現在彼はHursley Parkでテスト業務に取り組んでいます。これは彼にとって3番目のdeveloperWorksの論文です。彼の論文は書くたびにより良く成り続けています。Brianへの連絡先はvennb@uk.ibm.com です。



2003年 6月 18日

Scalable Vector Graphics (SVG)アニメーションは、Synchronized Multimedia Integration Language Level 2 (SMIL、"スマイル"と呼ばれます)および、オーディオ・ビジュアル・プレゼンテーションのオーサリングを簡単にするために開発されたHTML類似言語を使用しています。SMILでは、プロパティの開始値と終了値が、持続時間とともに指定されます。これらの値は、アニメーションを処理するRealPlayerなどの表示プログラムに渡されます。

もしSVGの基本的知識をお持ちであれば、このTipは役に立つでしょう。そうでないかたはdeveloperWorksチュートリアルの" Introduction to Scalable Vector Graphics" から始めると良いでしょう。

注:このTipのSVGドキュメントを表示するには、SVG Viewerが必要です。参考文献より入手してください。(全ての関連ファイルを含んだ.zipファイルがあります)

注意:

SVG ビューアは常に改良されてきていますが、まだ初期の段階にあります。SVG ビューアが想定通り動けば、ここで作るアニメーションはある程度スムーズにレンダリングされますが、例えば、もしみなさんがSVG アニメーションでアニメ映画の「トイ・ストーリー」を再現しようとしたならば、出来上がったものは非常に遅くギクシャクしたものになるでしょう。ですから、あまり多くのことを望んではいけません。

5種類のアニメーション

SVGには5種類の組み込みアニメーション・タイプが用意されています。

  • animate
  • animateMotion
  • animateTransform
  • animateColor
  • set

animate

animateの説明から始めましょう。

リスト1では、中心がx=250,y=250の円が描画されます。animateは、決められた時間内に指定のプロパティ(attributeName)をある値から別の値へ変更するよう機能します。ここでは、円の半径が5秒間に1から50へ変わります。repeatCountは、何回アニメーションを繰り返すのかを設定します。0以上の数値と"indefinete" (無限ループ)が設定できます。このアニメーションを見るには、ここをクリックしてください。

注:SVGドキュメントを表示するには、SVG Viewerが必要です。参考文献より入手してください。(全ての関連ファイルを含んだ.zipファイルがあります)

リスト1.円のアニメーション化
<svg>
  <circle cx="250" cy="250" r="1" >
    <animate attributeName="r" from="1" to="50" dur="5s" 
                  repeatCount="indefinite" />
  </circle>
</svg>

SVGオブジェクトの他のプロパティも同じように変更できます。例えば、animate行を以下のように変更してみます。

<animate attributeName="cx" from="1" to="250" dur="5s"
          repeatCount="indefinite" />

こうすると、円は左から右へスライドします。

1つのSVGオブジェクト内に複数のanimate要素を結合させることで、特別な効果を作り出すことができます。リスト2では、円のx座標とy座標、および円の半径が変更され動き出します。

リスト2.複数プロパティでのアニメーション
<svg>
  <circle cx="250" cy="250" r="1" >
    <animate attributeName="r" from="1" to="50" dur="5s" 
              repeatCount="indefinite" />
    <animate attributeName="cx" from="1" to="250" dur="5s" 
              repeatCount="indefinite" />
    <animate attributeName="cy" from="1" to="250" dur="5s" 
              repeatCount="indefinite" />
  </circle>
</svg>

今回、円は左上から右下へスライドし大きくなります。参照するにはここをクリックしてください。

他にサイズや形などの単純な要素もアニメーション化できます。次の例を参照してください。

リスト3.グラデーションのアニメーション
<svg>
  <defs>
    <radialGradient id="blueradial">
      <stop offset="0" style="stop-color:white;"/>
      <stop offset="100%" style="stop-color:blue;">
        <animate attributeName="offset" from="1%" to="100%" dur="5s" 
                  repeatCount="indefinite"/>
      </stop>
    </radialGradient>
    </defs>

    <circle cx="250" cy="250" r="200" style = "fill: url(#blueradial);"/>
</svg>

リスト3では、青いグラデーション内で白のグラデーションを徐々に (stop offsetプロパティに設定した5秒間に) 外側へ成長させ爆発のような効果を表現しています。参照するにはここをクリックしてください。


animateMotion

animateMotion要素を使用すると、いろいろなSVGの要素を指定されたパスに沿って動かすことができます。

リスト4.モーション・パスの例
<svg>
  <!-- Draw the path -->
  <path d="M50,125 C 200,25 250,525, 400, 125" style="fill: none; 
            stroke:black;"/>
  <rect width="25" height="25" style="fill: cyan; stroke: red;" >
  <!-- Move the rectangle along the path. -->
    <animateMotion path="M50,125 C 200,25 250,525, 400, 125" dur="6s" 
              fill="freeze"/>
  </rect>
</svg>

リスト4では、まずどのように矩形が移動するかを示す、正確なパスが描画されます。それから矩形が描画され、パスに沿って動きます。animateMotion要素の最後のプロパティfill="freeze"ですが、このプロパティは、全てのanimate 要素に利用可能で、アニメーションが終了したときに、要素が最後に表示された場所でとどまるかどうかを SVGビューアに指示しています。アニメーションを参照するにはここをクリックしてください。

表示された例では、矩形はパスに沿って移動しても向きは変化しません。矩形の幅と高さの基準となる左上の隅がパスに従って動いています。

animateMotion要素にrotate="auto"属性を追加すると、そのパスに沿って動くようにオブジェクトのX軸を傾けることができます。参照するにはここをクリックしてください。また、rotateに固有な値をセットすることもできます。もしモーション・パスが実行されている間、SVG要素を45度回転させたければ、rotate="45"を使用します。

リスト4には、矩形が沿って動くことになるモーション・パスが2回定義されています。以下のように、mpath要素を使うと、この重複を避けることができます。

リスト5.mpathの例
<svg>
  <path id="smoothCurve" d="M50,125 C 200,25 250,525, 400, 125" 
            style="fill: none; stroke:black;"/>
  <rect width="25" height="25" style="fill: cyan; stroke: red;" >
    <animateMotion dur="6s" fill="freeze" rotate="auto">
      <mpath xlink:href="#smoothCurve"/>
    </animateMotion> 
  </rect>
</svg>

リスト5を使ってもリスト4とまったく同じアウトプットになりますが、より効果的です。mpathは同一のモーション・パスで複数の要素をアニメーション化したいときに便利です。


animateTransform

SVGコンテンツの参照

SVGドキュメントのソースコードを参照するには、SVGドキュメント上で右クリックをして、「View Source」を選択してください。

SVGには5種類の変形属性(transforms)があります。

  • translate
  • scale
  • rotate
  • skewX
  • skewY

これらのanimateTransformを使用してアニメーション化します。

リスト6.animateTransformの例
<svg>
  <text x="5" y="15" style="font-size: 8pt;">animateTransform example
    <animateTransform attributeName="transform" type="scale" from="1" 
              to="5" begin="1" dur="4s" fill="freeze"/>
  </text> 
</svg>

今回はテキスト要素をアニメーション化します。scaleプロパティは1から5まで増加するので、テキストは5倍になります。参照するにはここをクリックしてください。

begin 属性はSVGビューアに、いつアニメーションを開始するかを指示しています。

同一のエレメント内で複数の変形アニメーションを結合することができます。リスト7では、scale変形属性とrotate変形属性の両方を使用しています。

リスト7.複数のtransformのアニメーション化
<svg> 
  <text x="50" y="50" style="font-size: 8pt;">animateTransform Example
    <animateTransform attributeName="transform" type="scale" from="1" 
              to="5" begin="0" dur="4s" fill="freeze" additive="sum"/>
    <animateTransform attributeName="transform" type="rotate" from="0"  
              to="30" begin="0" dur="4s" fill="freeze" additive="sum"/>
  </text> 
</svg>

ここをクリックしてみてください。1つの要素に複数の変形属性を結合させる時は、リスト7で示すようにadditive 属性に "sum"をセットしなければなりません。さもなければ、最後に記述した変形属性が、前に記述してある変形属性を上書きしてしまいます。もしリスト7からadditive属性を省略したら、rotate変形属性のみが実行されるでしょう。


animateColor

animateColorは色の設定値を変更していきます。

リスト8.animateColorの例
<svg>
  <circle cx="250" cy="250" r="200" style="fill:red; stroke:blue; 
            stroke-width:5">
    <animateColor attributeName="fill" from="red" to="green" dur="5s" 
              fill="freeze"/>
  </circle>
</svg>

参照するにはここをクリックしてください。色を設定するにはさまざまな方法の組み合わせが使用できます。たとえば、 red ##ff0000に、 green rgb(0,255,0) に変更しても、結果は同一のものとなります。

複数の色変更を結合させて、色を循環させることもできます。リスト9では、円の色を赤から藍色へ光のスペクトルのように変更しています。(参照するにはここをクリックしてください)

リスト9.色の循環
<svg>
  <circle cx="250" cy="250" r="200" >
    <animateColor attributeName="fill" from="rgb(100%,0%,0%)" 
              to="orange" begin="0s" dur="5s"/>
    <animateColor attributeName="fill" from="orange" to="yellow" 
              begin="prev.end" dur="5s"/>
    <animateColor attributeName="fill" from="yellow" to="#00FFFF" 
              begin="prev.end" dur="5s"/>
    <animateColor attributeName="fill" from="#00FFFF" to="blue" 
              begin="prev.end" dur="5s" />
    <animateColor attributeName="fill" from="blue" to="indigo" 
              begin="prev.end" dur="5s" fill="freeze" />
  </circle>
</svg>

色を設定するさまざまな方法について説明しておきます。光のスペクトルのような正しい順序で色を変更するには、色の変形属性をスクリプト化する必要があります。このためには、begin="prev.end"属性を使用してください。この属性はビューアに、前のアニメーションが終了したら次のアニメーションを開始するよう指示しています。同じオブジェクトに複数のアニメーションをスクリプト化する際に、任意のアニメーション要素で使用できます。


set

setアニメーションは時間をかけて変更を行うことなく、値をプロパティや属性にセットします。むしろ、決められた値がすぐにセットされます。リスト10では、3秒後に円の半径が3秒間 50にセットされます。3秒経過したら、半径は元の値に戻ります。参照するにはここをクリックしてください。

リスト10.setの例
<svg>
  <circle id="circleSetExample" cx="250" cy="250" r="200"/>
  <set id="animIdforSet" xlink:href="#circleSetExample" 
            attributeName="r" to ="50" begin="3s" dur="3s" />
</svg>

この例(リスト10)では、setアニメーション要素は、circle要素とは独立しています。代わりに、setアニメーションはxlink:href属性をとおして円に関連づけされます。この方法であれば全てのアニメーション要素を一緒に管理することができますが、どちらの方法を選ぶかは好みによります。


全てを一緒に使う

さまざまな効果をうみだすために、説明してきた全ての要素を結合することができます。ここでは、この記事で説明してきたさまざまな効果をもたらす3つのアニメーションをご紹介します。

  • Sunset(5K)--雲がゆっくり漂い、太陽が地平線の向こうに沈みます。太陽が沈むと、空は暗くなり、月と星が現れます。太陽と雲の動きはxとy座標を指定して、animateを使用することで実現されています。太陽が地平線の向こうに沈むときは、空の色を変更するのにanimateColorが使われています。月と星は不透明属性 (opacity) を使ってフェードインしています。
  • Rainbow(4K)--回転効果は虹のそれぞれの色のstroke-width stroke-dashoffsetを使用して実現されています。
  • Matrix(8K)--垂直にスクロールする効果は、異なるタイミングのプロパティにより、一連の矩形をテキストを横切って移動させ、さらに不透明属性 (opacity) を変更することで作られています。

特筆すべきは、これらのアニメーションのファイルサイズです。最大のものでも8Kと小さくなっています。ソースコードがどのように書かれているかを確認してみてください。

参考文献

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML
ArticleID=242701
ArticleTitle=ヒント: アニメーション要素を組み込んで、Scalable Vector Graphics (SVG) に活気を与える
publish-date=06182003