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

» 2008年05月07日 00時00分公開

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

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

ソース4　グローアップアプリケーションに追加する「タイムライン」のグラフィックス

<!-- タイムライン -->

              <Canvas x:Name="Timeline" Width="616" Height="18.7" Canvas.Left="8"

                     Canvas.Top="450">

                <Rectangle Width="614.668" Height="2.4577" Stretch="Fill" 

                  Fill="#FF949494" Canvas.Left="1.332" Canvas.Top="8.35" 

                  x:Name="DownloadProgressSilder"/>

                <Rectangle Opacity="0" Fill="#FFFFFFFF" x:Name="TimeSlider" 

                  Width="616" Height="18.7"/>

                <Ellipse x:Name="TimeThumb" Width="18.7" Height="18.7"

                  Stretch="Fill" StrokeLineJoin="Round" Canvas.Left="0">

                  <Ellipse.Stroke>

                    <LinearGradientBrush StartPoint="0.5,1.09849" 

                      EndPoint="0.5,-0.390715">

                      <GradientStop Color="#FF000000" Offset="0"/>

                      <GradientStop Color="#FFFFFFFF" Offset="0.771689"/>

                    </LinearGradientBrush>

                  </Ellipse.Stroke>

                  <Ellipse.Fill>

                    <RadialGradientBrush RadiusX="1.4892" RadiusY="1.4892"

                      Center="0.5,1.09849" GradientOrigin="0.5,1.09849">

                      <RadialGradientBrush.RelativeTransform>

                        <TransformGroup>

                          <RotateTransform CenterX="0.5" CenterY="1.09849" 

                            Angle="-90"/>

                        </TransformGroup>

                      </RadialGradientBrush.RelativeTransform>

                      <GradientStop Color="#FF000000" Offset="0"/>

                      <GradientStop Color="#FFFFFFFF" Offset="1"/>

                    </RadialGradientBrush>

                  </Ellipse.Fill>

                  <Ellipse.RenderTransform>

                    <TransformGroup>

                      <ScaleTransform ScaleX="1" ScaleY="1"/>

                      <SkewTransform AngleX="0" AngleY="0"/>

                      <RotateTransform Angle="0"/>

                     <TranslateTransform X="0" Y="0"/>

                   </TransformGroup>

                  </Ellipse.RenderTransform>

                </Ellipse>

              </Canvas>

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

ソース5　グローアップアプリケーションに追加するアニメーション機能

<Canvas.Resources>

                <Storyboard x:Name="VideoTimeline">

                  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 

                    Storyboard.TargetName="TimeThumb"

                    Storyboard.TargetProperty="(UIElement.RenderTransform).(Transf

              ormGroup.Children)[3].(TranslateTransform.X)">

                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

                    <SplineDoubleKeyFrame KeyTime="00:00:21" Value="616"/>

                  </DoubleAnimationUsingKeyFrames>

                </Storyboard>

              </Canvas.Resources>

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

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

ソース6　連動させるJavaScriptによるイベント

// 再生

              function mediaPlay(sender, eventArgs){

                  var state = 0;

                  if (sender.findName("media").CurrentState == "Paused") {

                      state = 1;

                  }

                  sender.findName("media").play();

                  if (state == 1) {

                      sender.findName("VideoTimeline").resume();

                  }else {

                      sender.findName("VideoTimeline").begin();

                  }

              }

              // 一時停止

              function mediaPause(sender, eventArgs){

                  sender.findName("media").pause();

                  sender.findName("VideoTimeline").pause();

              }

              // 停止

              function mediaStop(sender, eventArgs){

                  sender.findName("media").stop();

                  sender.findName("VideoTimeline").stop();

              }

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

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

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

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

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

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

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

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

プロフィール

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

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

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

「次回」へ

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

Silverlightは次世代のJavaScriptフレームワーク？
ついに正式リリース！いまこそ知りたい!!　どの環境でも動くマイクロソフトのRIA技術Silverlightについて、実際に動く2つのサンプルを見ながら、その特徴と技術を解説
Silverlightと株価ビジュアライゼーション
連載：Flash観測所（2）　マイクロソフト発の新動画再生技術のSilverlightと、複雑な株価データを効果的に見せるFlashアプリサービスを紹介する
XAMLの基礎知識
.NET Framework 3.0のWindowsアプリ構築フレームワーク「WPF」においてGUI記述を担うXAML（ザムル）。この新言語を基礎のキソから学ぶ
・第1回 Hello Worldとテキスト・エディタで始めるXAML
・第2回 XAMLとWPFの関係
北米で話題のFlash動画アプリケーションサービス
連載：Flash観測所（1）　北米で話題のFlashによる動画サイト。UGC的ビデオ共有サイトの動画に付加価値を加えたり、ユーザーが編集できる話題のサービスを紹介する
JavaScriptプログラミング再入門
Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック
・第1回 JavaScriptの復権
・第2回 JavaScriptの関数をマスターしよう
・第3回 JavaScriptにおける変数の宣言とスコープ
・最終回 JavaScriptでオブジェクト指向プログラミング