■ その１　画像を切り替えるアニメーション　　　　　　　１　２　３　【４】

・ズーム
画像の中心から、表示する Image コントロールを拡大していくアニメーションです。
拡大の中心点を画面の中心にするため、RenderTransformOrigin を指定します。また、アニメーションの対象となる ScaleTransform を追加します。

-- MainWindow.xaml --

<Image Name="image1" Stretch="Fill" Source="/Image/Sea.png" Margin="6"   RenderTransformOrigin="0.5,0.5">     <Image.RenderTransform>         <TransformGroup>             <TranslateTransform />             <ScaleTransform />         </TransformGroup>     </Image.RenderTransform> </Image>

DoubleAnimation 型のアニメーションを使用して、ScaleTransform.ScaleX プロパティ、ScaleTransform.ScaleY プロパティを同時に 0 → 1 に変化させます。

-- MainWindow.xaml.cs --

DoubleAnimation doubleAnimation1 = new DoubleAnimation(); doubleAnimation1.From = 0; doubleAnimation1.To = 1; doubleAnimation1.Duration = new Duration(TimeSpan.FromMilliseconds(600)); Storyboard.SetTarget(doubleAnimation1, _targetElement); Storyboard.SetTargetProperty(doubleAnimation1, new PropertyPath("   (UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)")); DoubleAnimation doubleAnimation2 = new DoubleAnimation(); doubleAnimation2.From = 0; doubleAnimation2.To = 1; doubleAnimation2.Duration = new Duration(TimeSpan.FromMilliseconds(600)); Storyboard.SetTarget(doubleAnimation2, _targetElement); Storyboard.SetTargetProperty(doubleAnimation2, new PropertyPath("   (UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)")); Storyboard storyboard = new Storyboard(); storyboard.Children.Add(doubleAnimation1); storyboard.Children.Add(doubleAnimation2); storyboard.Begin();

単純ですが、様々な場面で使えるアニメーションです。

戻る　<<　１　２　３　４