検索
連載

シンプルで機能的なSilverlightのアニメーションとは？：.NETを知らない人でも分かるSilverlight入門（4）（3/3 ページ）

Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

■ グローアップアプリケーションにアニメーション機能を追加

　次に、アニメーションに関してですが、こちらは新しくビデオの「タイムライン」（再生時間ごとに移動するバー）を追加しています。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　ここでもボタンと同様に、「タイムライン」を構成する図形をRectangleオブジェクトやEllipseオブジェクトを使用して作成しています。そして、現在の経過時間を表すEllipseオブジェクトの水平位置に対してアニメーションを追加しています。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

■ JavaScriptによるイベントと連動

　このアニメーションはビデオと連動する必要がありますので、EventTriggerオブジェクトを使用する形での実行ではなく、アニメーションをリソースとして定義して、ビデオの「再生」イベントと同時にアニメーションが動作するように設定しています。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　このサンプルでは、極力簡単にするためにムリヤリ動作させているので、「タイムライン」をマウスで操作して再生位置を変更するなどの機能は追加していません。もし、ちゃんとした「タイムライン」機能を作成したいという場合には、プログラミングでもっと複雑なロジックを記述する必要がありますが、ここでは範囲を超えてしまうので割愛します。

　ここで追加した機能としては、「再生」ボタンで「タイムライン」がスタートし、「一時停止」ボタンで「タイムライン」が一時停止、その状態で「再生」ボタンを押すと「タイムライン」が再開し、「停止」ボタンで「タイムライン」が停止して最初の位置に戻ります。アニメーションの設定もビデオの長さが21秒なので、21秒かけてEllipseオブジェクトが水平方向に一番端まで移動するようになっています。

　ビデオの長さを固定値で持っているので、このサンプルではビデオを変更すると、「タイムライン」がうまく連動しなくなりますから、ご注意ください。

Silverlight 2からはユーザーコントロールが定義できる

　以上のように、Silverlightを使用することで、いままで作成するのが難しかったメディアプレーヤのようなメディアコンテンツとグラフィックス・アニメーションを使用するようなアプリケーションも簡単に作成できます。

　Silverlight 1.0では、ユーザーコントロールの定義ができないので、ベーシックコントロール以外はなく、逐一自分の手で作成する必要がありますが、Silverlight 2からはユーザーコントロールが定義できるようになっていますので、今回作成したグローアップアプリケーションももっと簡単に、もっと高機能で作成できるようになります。そのあたりについては、Silverlight 2のリリースと同時に本連載で解説していく予定ですので、ご期待いただければと思います。

　今回でSilverlight 1.0における機能解説は一通り終わりましたので、次回からSilverlight 2のリリースまでは、Ajaxとの連携やSilverlightを使用した技術の解説などをできるだけ紹介していこうと思います。次回以降もぜひともご期待ください。

　今回のサンプルすべてのソースコードはこちらになります。

プロフィール

松原 晋啓（まつばら のぶあき）

松原 晋啓

SE、コンサルタント、エバンジェリストを経て、現在はソリューションスペシャリストとして活動。その傍ら、イベントや記事寄稿を通じてマイクロソフトのテクノロジーや製品の普及に努めている。

趣味は小学校から続けているバスケットボールで、4年前にチームを作り、現在もリーダーとして活動を行っている


「次回」へ


「.NETを知らない人でも分かるSilverlight入門」バックナンバー

Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る