2013年07月28日

WPFサンプル:DoubleAnimationを使ったアニメーション

   このエントリーをはてなブックマークに追加 Clip to Evernote
今日から、数回に分けてWPFのアニメーション機能のサンプルを掲載していきます。

WPFのアニメーションは、各オブジェクトのプロパティの値を指定した期間の間で変化させることでアニメーションを実現させています。
例えば、あるコントロールのWidthを小さい値から大きい値へ変化させれば、コントロールが徐々幅広になるアニメーションを実現できます。

今回は、Double型のプロパティ値を変化させることができる DoubleAnimationのサンプルをお見せします。

では、まずはXAMLから。

<Window x:Class="DoubleAnimationSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="MyAnimation" FillBehavior="HoldEnd">
            <DoubleAnimation From="0" To="60" Duration="00:00:00.50"
                             Storyboard.TargetName="textBlock"
                             Storyboard.TargetProperty="FontSize" />
        </Storyboard>
    </Window.Resources>
    <StackPanel x:Name="LayoutRoot" Background="White">
        <Button Content="Button" Height="26" HorizontalAlignment="Left"
                Margin="12,12,0,0" Name="button1" VerticalAlignment="Top"
                Width="75" Click="button1_Click" />
        <Button Click="Button_Click" Width="75" Content="開始" HorizontalAlignment="Left"/>
        <TextBlock Text="DoubleAnimation" FontSize="1" Name="textBlock" />
    </StackPanel>
</Window>

アニメーションをオブジェクトに適用するには、Storyboard を作成する必要があります。
Storyboardの子要素として、DoubleAnimationを定義しています。
そして、TargetName および TargetProperty 添付プロパティを使用してアニメーション化する オブジェクトとプロパティを指定します。
From, Toプロパティは、TargetPropertyの値をどこからどこまで変化させるのか、Durationでその時間を指定します。

この例では、TextBlockのFontSizeプロパティを 0.5秒の間で 0 から 60 まで変化させています。

ボタンがクリックされるとアニメーションが開始されますが、それは、C#のコードで実装しています。

using System;
using System.Windows;
using System.Windows.Media.Animation;

namespace DoubleAnimationSample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e) {
            (this.Resources["MyAnimation"] as Storyboard).Begin();
        }
    }
}

Storyboard.Begin メソッドで、アニメーションが開始させれます。
以下実行結果のスクリーンショットです。

doubleAnimation1

doubleAnimation2

doubleAnimation3


なお、XAMLを使わずに、Storyboardオブジェクトの生成とアニメーションの開始をC#側で記述すると以下のようになります。

XAMLの記述とC#のコード対応しているのがわかると思います。

using System;
using System.Windows;
using System.Windows.Media.Animation;

namespace DoubleAnimationSample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e) {
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 0.0;
            myDoubleAnimation.To =  50.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.5));
            Storyboard.SetTargetProperty(myDoubleAnimation,new PropertyPath("FontSize"));
            Storyboard.SetTarget(myDoubleAnimation, this.textBlock);
            var myStoryboard = new Storyboard();
            myStoryboard.FillBehavior = FillBehavior.HoldEnd;
            myStoryboard.Children.Add(myDoubleAnimation);
            myStoryboard.Begin();

        }
    }
}


WPFサンプル・目次


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52330337