Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Silverlightアプリでアニメーションを効率よく使うテクニック

Silverlight 2で作成する業務アプリケーション入門 (3)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

Expression Blendとストーリーボードによるアニメーション

 Silverlightでは、オブジェクトのプロパティの値を時間と共に少しずつ変化させることでアニメーションが行われます。「ストーリーボード」は、画面に表示されている画像やテキスト、ボタンといったSilverlightのプロパティが何秒後にどのようになっているかを記述することでアニメーションを定義する方法です。

ページのデザイン

 では、ボタンをクリックしたら、図5のように画面上のメッセージを強調表示させるアニメーションを考えてみます。

図5 テキストの強調表示実行結果
テキストの強調表示実行結果

 Expression Blendを開き、左側のツールボックスから、画面にメッセージを表示するためのコンテナとなるGridと、メッセvージを表示するためのTextBlockをデザイナに追加してください(図6)。

図6 テキストの配置
テキストの配置

 また、プログラムからTextBlockにアクセスできるようにidを「txtMessage」に設定。Gridの背景色を「白」に、TextBlockをGridのTopに配置するようにプロパティを変更します(図7)。

図7 プロパティの変更
プロパティの変更

 プロパティを変更した段階で、XAMLはリスト1のようになります。

リスト1 テキストの配置(Page.Xaml)
<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid Margin="100,100,100,0" VerticalAlignment="Top" Background="#FFFFFFFF" x:Name="grid">
            <TextBlock Margin="10,10,10,10" Text="TextBlock" TextWrapping="Wrap" x:Name="txtMessage"/>
        </Grid>
    </Grid>
</UserControl>
アニメーションの作成

 次に強調表示を行うためのアニメーションを作成します。

 オブジェクトとタイムラインの[+]ボタンをクリックし、今回のアニメーションの名前を設定すると、オブジェクトのタイムラインウインドウが開きます(図8)。

図8 タイムラインの作成
タイムラインの作成

 タイムラインは、指定した秒数後にオブジェクトが変化するかを定義します。図9では、0.5秒後(黄色い線)に、背景色が赤色に変化するアニメーションを定義しています。

図9 背景色の変更
背景色の変更

 さらに0.5秒後に変更された背景色を元(白)に戻し、このストーリーボードを繰り返すように設定します。ストーリーボードの繰り返しの設定は、ストーリーボードのプロパティで、RepeateBehaviorの値を設定することで変更します。今回はずっと繰り返すので「Forever」を設定しています(図10)。

図10 繰り返しの設定
繰り返しの設定
アニメーションの実行

 ここまでできたら、今度はアニメーションを動作させるためのプログラムコードを記述します。

 UserControlのプロパティを開き、LoadedイベントにUserControl_Loadedと入力します。すると、Visual Studio側にLoadedイベントのハンドラが作成されるので、こちらでストーリーボードの制御を行います。

 リスト2では、テキストボックスの内容が「TextBlock」だったらアニメーションを実行するように記述しています。

リスト2 アニメーションの実行(Page.Xaml.cs)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication1
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            if (txtMessage.Text == "TextBlock") {
                強調表示.Begin();
            }
        }
    }
}

 アニメーションを開始する場合、ストーリーボードのBeginメソッドを使用し、終了する場合はStopメソッドを使用します。

 コードを記述したら、Visual Studioでデバック実行を行ってみましょう。ブラウザが表示され、白から赤へ、赤から白へ点滅するテキストボックスが表示されたと思います。

 Loadedイベントを設定した段階で、XAMLはリスト3のようになっていると思います。

リスト3 アニメーションを適用した(Page.Xaml)
<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Loaded="UserControl_Loaded">
    <UserControl.Resources>
        <Storyboard x:Name="強調表示" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFFF0000"/>
                <SplineColorKeyFrame KeyTime="00:00:01" Value="#FFFFFFFF"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid Margin="100,100,100,0" VerticalAlignment="Top" Background="#FFFFFFFF" x:Name="grid">
            <TextBlock Margin="10,10,10,10" Text="TextBlock" TextWrapping="Wrap" x:Name="txtMessage"/>
        </Grid>
    </Grid>
</UserControl>

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:Silverlight 2で作成する業務アプリケーション入門
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5