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

.NETを知らない人でも分かるSilverlight入門(4):シンプルで機能的なSilverlightのアニメーションとは? (3/3)

[松原晋啓,@IT]
前のページへ 1|2|3       

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

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

ソース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年前にチームを作り、現在もリーダーとして活動を行っている



前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。