WPFで画像を切り替えるアニメーションの方法
どうも日本語の情報が皆無のようなので、日記とは別途に記事を書きます。
といっても、ほぼコードを張るだけなのですが。
C#のコードだけで行う場合と、XAMLだけで行う場合を載せておきます。
ImageのSourceを切り替えるアニメーションをつくる手順です。
- ◆Storyboardをつくる
- ★ObjectAnimationUsingKeyFrames をつくる。ここでターゲットとか繰り返し回数、総アニメーション時間とかを指定します
- ●DiscreteObjectKeyFrame をいっぱいつくる。ここで切り替える画像とそのタイミングを指定します。
- ★ObjectAnimationUsingKeyFrames.KeyFrames に先ほどの●DiscreteObjectKeyFrame たちを放り込みます
- ◆Storyboard.Children に★ObjectAnimationUsingKeyFrames を追加
- ◆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>