アニメーションしてみた - かずきのBlog@hatena

Silverlight3でのアニメーションを触ってみました。
個人的には、フェードアウト・フェードインとかぐるぐる回ったりして切り替わるよりもパッパッと切り替わったりしてくれる方が好みなので、最後まで手をつけないであろう分野の１つです。

超簡単な説明

Silverlight3のアニメーションは、Double, Color, Point型の値を時間の経過とともに変化させていくことで実現しています。
それ以上でも、それ以下でもありません。

見た目アニメーションという感じではないですが、ObjectAnimationUsingKeyFramesというものを使って、DoubleやColorやPoint型以外の値も設定できるみたいです。

早速入門

というわけで早速やってみます。
入門のときのプログラムは、Hello worldと相場が決まっているので、今回もHello worldを作成します。

まず、SLAnimationという名前でSiliverlightアプリケーションを作成します。
そして、MainPage.xamlを以下の通りにします。

<UserControl x:Class="SLAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <StackPanel x:Name="LayoutRoot">
        <TextBlock x:Name="textBlockMessage" Text="Hello world" Opacity="0.0" />
        <Button Content="Start animation" Click="StartAnimationButton_Click"/>
    </StackPanel>
</UserControl>

この時点では、まだアニメーションはつけていません。
TextBlockは完全透明にしているので、ボタンだけが表示されています。

ここにアニメーションの設定を追加していきます。
基本的な構造は、WPFと変わらないので、簡単な説明は、WPFのときの記事を参考にしてください。
ResourcesにStoryboardを追加します。今回はTextBlockをじわっと表示させるものにします。

<UserControl x:Class="SLAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <UserControl.Resources>
        <!-- アニメーションの設定 -->
        <Storyboard x:Name="storyboardShowHelloWorld">
            <DoubleAnimation
                Storyboard.TargetName="textBlockMessage"
                Storyboard.TargetProperty="Opacity"
                From="0.0"
                To="1.0"
                Duration="00:00:10" />
        </Storyboard>
    </UserControl.Resources>
    <StackPanel x:Name="LayoutRoot">
        <TextBlock x:Name="textBlockMessage" Text="Hello world" Opacity="0.0" />
        <Button Content="Start animation" Click="StartAnimationButton_Click"/>
    </StackPanel>
</UserControl>

ボタンのクリックイベントハンドラでは、StoryboardのBeginメソッドを実行します。

using System.Windows;
using System.Windows.Controls;

namespace SLAnimation
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void StartAnimationButton_Click(object sender, RoutedEventArgs e)
        {
            // じわっと表示
            storyboardShowHelloWorld.Begin();
        }
    }
}

これで完成です。実行してみます。

実行直後は、前回と同じでボタンだけです。