WPFで画像を切り替えるアニメーションの方法

どうも日本語の情報が皆無のようなので、日記とは別途に記事を書きます。
といっても、ほぼコードを張るだけなのですが。
C#のコードだけで行う場合と、XAMLだけで行う場合を載せておきます。


ImageのSourceを切り替えるアニメーションをつくる手順です。

  1. ◆Storyboardをつくる
  2. ★ObjectAnimationUsingKeyFrames をつくる。ここでターゲットとか繰り返し回数、総アニメーション時間とかを指定します
  3. ●DiscreteObjectKeyFrame をいっぱいつくる。ここで切り替える画像とそのタイミングを指定します。
  4. ★ObjectAnimationUsingKeyFrames.KeyFrames に先ほどの●DiscreteObjectKeyFrame たちを放り込みます
  5. ◆Storyboard.Children に★ObjectAnimationUsingKeyFrames を追加
  6. ◆Storyboard 実行

ソースコードは続きを読むで畳んだところに置いてます)

C#コード

public void BeginImageAnimation()
{
    //切り替えていく画像
    animationImages = new BitmapImage[3];
    animationImages[0] = new BitmapImage( new Uri( "1.png",UriKind.Relative ) );
    animationImages[1] = new BitmapImage( new Uri( "2.png", UriKind.Relative ) );
    animationImages[2] = new BitmapImage( new Uri( "3.png", UriKind.Relative ) );

    //画像切り替え間隔
    TimeSpan frameSpan = new TimeSpan( 0, 0, 0, 0, 200 );

    Storyboard storyboard = new Storyboard();
    ObjectAnimationUsingKeyFrames animation = new ObjectAnimationUsingKeyFrames();

    Image image = FindName("main") as Image;
    Storyboard.SetTargetName( animation, "main" );
    Storyboard.SetTargetProperty( animation, new PropertyPath( "Source" ) );

    //ずっとリピート
    animation.RepeatBehavior = RepeatBehavior.Forever;
    //最後まで再生したら最初まで逆再生
    animation.AutoReverse = true;

    TimeSpan nowFrame = TimeSpan.Zero;
    foreach ( var i in animationImages ) {
        DiscreteObjectKeyFrame key = new DiscreteObjectKeyFrame();
        key.KeyTime = nowFrame;
        key.Value = i;

        animation.KeyFrames.Add( key );

        nowFrame += frameSpan;
    }

    animation.Duration = nowFrame;
    storyboard.Children.Add( animation );

    storyboard.Begin(image);
}

XAMLコード

<Window
    x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1"
    Height="300"
    Width="300">
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                        x:Name="storyboard1"
                        Storyboard.TargetName="main"
                        Storyboard.TargetProperty="(Image.Source)"
                        AutoReverse="true"
                        Duration="0:0:0.4"
                        RepeatBehavior="Forever">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0">
                            <DiscreteObjectKeyFrame.Value>
                                <BitmapImage UriSource="1.png" />
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                            <DiscreteObjectKeyFrame.Value>
                                <BitmapImage UriSource="2.png" />
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                            <DiscreteObjectKeyFrame.Value>
                                <BitmapImage UriSource="3.png" />
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    <Canvas>
        <Label
            Content="Xamlだけでアニメーション"
            Canvas.Left="10"
            Canvas.Top="10"  />
        <Image
            Name="main"
            Height="100"
            Width="100"
            Canvas.Left="10"
            Canvas.Top="40"
            Source="1.png"
            Stretch="None" />
    </Canvas>
</Window>