WPF・Silverlight アニメーション

■ その1 画像を切り替えるアニメーション          【4】

・ズーム
画像の中心から、表示する 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();

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

戻る <<    4

最新号はこちらから