速度を変化させる「キーフレームアニメーション」
いままでの解説で使用していたベーシックアニメーションは、ある範囲の間を一定の動作で変化するアニメーションでしたが、キーフレームアニメーションはその動作を変化できます。そうすることで、より現実に即したアニメーションを定義できるようになります。
使用方法に関しては、ほとんどベーシックアニメーションと変わりませんが、1つだけ追加しなければならないオブジェクトがあります。それは、キーフレームアニメーションの「タイプ」と呼ばれるもので、表5のようなものがあります。
| タイプ | 詳細 | |
|---|---|---|
| Discrete | アニメーションではなく指定の位置にジャンプ | |
| Linear | スムースな直線のアニメーションを行う | |
| Splined | スプライン曲線（※コラム参照）に従って可変のアニメーションを行う。このタイプは、より現実的なアニメーションを行うのに適している |
コラム 「“スプライン曲線”って何？」
スプライン曲線とは、与えられた複数の点を通る滑らかな曲線で、ベジェ曲線とは異なり、与えられたすべての制御点を通過します。そのため、ベジェ曲線に比べて点の数を増やしても数式の次数は変わらないため、計算量が少なくて済むので、微妙な曲線表現に向いています。
編集部注：ベジェ曲線について詳しく知りたい読者は、連載第3回「Silverlightのリッチなグラフィックス描画サンプル集」のコラム「“ベジェ曲線”って何だべぇ？」をご参照ください。
実際にキーフレームアニメーションを使用すると、以下のようになります。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
図2 キーフレームアニメーションサンプルサンプル実行例の画像（実際にSilverlightで見たい場合は画像をクリック！）※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ
ここでは、RectangleオブジェクトのX座標の位置を変化させるキーフレームアニメーションをサンプルとしています。そして、ストーリーボードに指定されている10秒の間に、その間にLinear、Discrete、Splinedのそれぞれの動作を行うサンプルになっています。
最初のLinearキーフレームで、500の位置までRectangleオブジェクトが一定のスピードで動作します。次はDiscreteキーフレームで、500の位置にあったRectangleオブジェクトが突然400の位置に移動します。最後のSplinedキーフレームで、400の位置のRectangleオブジェクトが最初はゆっくりとスタートし、徐々に加速してスタート位置に戻ります。
以上のようにキーフレームアニメーションでは、3つのタイプのキーフレームを組み合わせて使用することで、ベーシックアニメーションでは表現できなかったアニメーションを実現できます。特に、スプライン曲線が定義できるSplinedキーフレームはいろいろな動作を自由に定義できるので、筆者のお気に入りのキーフレームです。
ついに完成？ グローアップアプリケーション
今回の解説でSilverlight 1.0における機能は一通り網羅したことになりますので、グローアップアプリケーションもひとまずは完成ということになります。前回までで追加した機能は、メディア、イベントハンドラ、エラーハンドラになりますが、今回は2回にわたって解説したグラフィックスとアニメーションを追加しました。
■ グローアップアプリケーションにグラフィックス機能を追加
最初はグラフィックスに関してですが、見てお分かりかと思いますが、連載第2回の「SilverlightならWeb上で高精細な動画再生も簡単？」で提示したときのように、「再生」「一時停止」「停止」ボタンが文字列ではなく、グラフィックスを使用したボタンに変わっています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ここでは、「再生」ボタンにはPathオブジェクトを使用して三角形の図形を作成して使用していて、「一時停止」ボタンと停止ボタンにはそれぞれRectangleオブジェクトを使用してボタンを作成しています。
それぞれのオブジェクトをCanvasオブジェクトで囲っているのは領域を指定するためで、ほかの設定に関しても整形や色の調整などを行っているだけなので、特に難しいことはここでは行っていません。
引き続き次のページでは、グローアップアプリケーションに今回学んだアニメーション機能を追加します。
Copyright © ITmedia, Inc. All Rights Reserved.