連載 続・無償環境でSilverlight 2アプリを開発しよう！ 第1回 動きのあるSilverlightアプリを作ろう シグマコンサルティング　菅原 英治 2009/02/10
Page1 Page2 Page3 Page4

■アニメーションを利用しよう

　まずは、サンプルを動かすところから始めましょう。

●アニメーションのサンプルを動かそう

　下に表示されているのは、アニメーションのサンプルです。

アニメーションを行うSilverlight 2アプリ

文字列を入力して［入力］ボタンをクリックしてほしい。

　このサンプルは、入力した文字列を右から左へ動かすという非常に簡単なものです。このサンプルには次のような3つのコントロールが配置されています。

アニメーションのサンプル

以下のコントロールが配置されています。

アニメーションさせる文字列を入力するTextBoxコントロール。   アニメーションを開始させるButtonコントロール。   アニメーションするTextBlockコントロール。

　画面上のテキストボックスに、任意の文字列を入力し、［入力］ボタンを押すと、入力した文字列が画面の最上段のテキストブロックに設定され、右から左へ流れていきます。それでは実際にこのサンプルを開発してみましょう。

●文字列をアニメーションするサンプルを開発しよう

　VWD 2008を起動し、新しいSilverlight 2アプリのプロジェクトを作成してください（プロジェクトの作成時には「Silverlightをホストするための新しいASP.NET Web プロジェクトをソリューションに追加する」を選択してください）。

　プロジェクトが作成できたら「Page.xaml」を開き、次の太字のコードを入力してください。

<UserControl ……略……>   <!--レイアウト-->   <StackPanel Background="Azure">     <TextBlock x:Name="textBlockMessage"         FontSize="30" Height="50">       <TextBlock.RenderTransform>         <TranslateTransform/>       </TextBlock.RenderTransform>     </TextBlock>     <TextBox x:Name="textBoxMessage" FontSize="30" />     <Button x:Name="buttonEnter" Content="入力"         Width="100" Click="buttonEnter_Click" />   </StackPanel>   <!--リソース-->   <UserControl.Resources>     <Storyboard x:Name="storyboardMessage">       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"           Storyboard.TargetName="textBlockMessage"           Storyboard.TargetProperty=       "(UIElement.RenderTransform).(TranslateTransform.X)">         <SplineDoubleKeyFrame             KeyTime="00:00:00" Value="400"/>         <SplineDoubleKeyFrame             KeyTime="00:00:04" Value="-400"/>       </DoubleAnimationUsingKeyFrames>     </Storyboard>   </UserControl.Resources> </UserControl>

アニメーションのサンプルのXAMLコード（Page.xaml）

　このコードは、大きくレイアウトのブロックとリソースのブロックの2つに分かれます。

　レイアウトのブロックには、まずレイアウト用のコントロールとして、StackPanelコントロール（＝<StackPanel>要素。以下、単に「StackPanel」と表記）を定義しています。その子要素として、TextBlock、TextBox、Buttonの3つのコントロールが定義されています。

　TextBlockコントロールには、子要素として、<TextBlock.RenderTransform>要素、さらにその子要素として<TranslateTransform>要素が定義されています。これらは、後述の「Storyboard」からTextBlockコントロールの位置を移動できるようにするために定義しています。

　続いてリソースのブロックには、Storyboardオブジェクト（＝<Storyboard>要素。以下、単に「Storyboard」と表記）が定義されています。このStoryboardの定義内容を分かりやすく説明すると、「TextBlockコントロールのX座標を開始時に『400』に設定し、その後4秒間に『-400』まで移動させる」ということになります。

Storyboardの定義内容

　Silverlightでは、アニメーションは、このように時間軸でのプロパティの変化（この場合0秒から4秒までのX座標の変化）で定義します。Silverlightでのアニメーションについての詳細な解説は、次の記事によくまとめられておりますので、ご参照ください（※Silverlight 1.0の記事ですが、アニメーションの基礎の説明としては十分な内容です）。

• リッチクライアント ＆ 帳票：シンプルで機能的なSilverlightのアニメーションとは？

　続いて「Page.xaml」のコード・ビハインド（VB:Page.xaml.vb、C#:Page.xaml.cs）を開き、次の太字のコードを入力してください。

Partial Public Class Page   Inherits UserControl   Public Sub New()     InitializeComponent()   End Sub   ' 入力ボタンを押下時のイベント・ハンドラ   Private Sub buttonEnter_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)     ' テキストブロックに入力したテキストボックスの文字列を設定する     Me.textBlockMessage.Text = Me.textBoxMessage.Text     ' ストーリーボードのアニメーションを開始する     Me.storyboardMessage.Begin()   End Sub End Class xpublic partial class Page : UserControl {   public Page()   {     InitializeComponent();   }   // 入力ボタンを押下時のイベント・ハンドラ   private void buttonEnter_Click(object sender, RoutedEventArgs e)   {     // テキストブロックに入力したテキストボックスの文字列を設定する     this.textBlockMessage.Text = this.textBoxMessage.Text;     // ストーリーボードのアニメーションを開始する     this.storyboardMessage.Begin();   } }

ドラッグ＆ドロップを実現するために制御する3つのイベントのイベント・ハンドラ（上：Page.xaml.vb、下：Page.xaml.cs）

　コード・ビハインドのコードは、特に解説するまでもないでしょう。［入力］ボタンが押されたときに、テキストボックスに入力された文字列を、アニメーションさせるテキストブロックに設定し、ストーリーボードのアニメーションを開始しているだけです。

■

　アニメーションの利用方法の解説は以上です。今回は、文字列の位置を移動するという簡単な例で説明しました。しかし、Silverlight 2では位置の移動以外にも、色を変えたり、回転させたりなど、さまざまなことが可能です。ぜひ試してみてください。

　最後に、動画の利用方法について解説します。

INDEX
	連載：続・無償環境でSilverlight 2アプリを開発しよう！
	第1回 動きのあるSilverlightアプリを作ろう
	1．文字列をドラッグ＆ドロップするサンプルを動かそう
	2．ドラッグ＆ドロップを開発しよう
	3．アニメーションを利用しよう
	4．動画を利用しよう

「続・無償環境でSilverlight 2アプリを開発しよう！」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）