方法 : 四角形をアニメーション化する

[アーティクル]
08/09/2011

この例では、四角形のサイズと位置の変化をアニメーション化する方法を示します。

使用例

次の例では、RectAnimation クラスのインスタンスを使用して、RectangleGeometry の Rect プロパティをアニメーション化し、四角形のサイズと位置の変化をアニメーション化します。


Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media

Namespace SDKSamples
    Public Class RectAnimationExample
        Inherits Page
        Public Sub New()

            ' Create a NameScope for this page so that
            ' Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            Dim myRectangleGeometry As New RectangleGeometry()
            myRectangleGeometry.Rect = New Rect(0, 200, 100, 100)

            ' Assign the geometry a name so that
            ' it can be targeted by a Storyboard.
            Me.RegisterName("MyAnimatedRectangleGeometry", myRectangleGeometry)

            Dim myPath As New Path()
            With myPath
                .Fill = Brushes.LemonChiffon
                .StrokeThickness = 1
                .Stroke = Brushes.Black
                .Data = myRectangleGeometry
            End With

            Dim myRectAnimation As New RectAnimation()
            With myRectAnimation
                .Duration = TimeSpan.FromSeconds(2)
                .FillBehavior = FillBehavior.HoldEnd

                ' Set the animation to repeat forever. 
                .RepeatBehavior = RepeatBehavior.Forever

                ' Set the From and To properties of the animation.
                .From = New Rect(0, 200, 100, 100)
                .To = New Rect(600, 50, 200, 50)
            End With

            ' Set the animation to target the Rect property
            ' of the object named "MyAnimatedRectangleGeometry."
            Storyboard.SetTargetName(myRectAnimation, "MyAnimatedRectangleGeometry")
            Storyboard.SetTargetProperty(myRectAnimation, New PropertyPath(RectangleGeometry.RectProperty))

            ' Create a storyboard to apply the animation.
            Dim ellipseStoryboard As New Storyboard()
            ellipseStoryboard.Children.Add(myRectAnimation)

            ' Start the storyboard when the Path loads.
            AddHandler myPath.Loaded, Sub(sender As Object, e As RoutedEventArgs) ellipseStoryboard.Begin(Me)

            Dim containerCanvas As New Canvas()
            containerCanvas.Children.Add(myPath)

            Content = containerCanvas
        End Sub
    End Class
End Namespace

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;

namespace SDKSamples
{
    public class RectAnimationExample : Page
    {
        public RectAnimationExample()
        {

            // Create a NameScope for this page so that
            // Storyboards can be used.
            NameScope.SetNameScope(this, new NameScope());

            RectangleGeometry myRectangleGeometry = new RectangleGeometry();
            myRectangleGeometry.Rect = new Rect(0, 200, 100, 100);

            // Assign the geometry a name so that
            // it can be targeted by a Storyboard.
            this.RegisterName(
                "MyAnimatedRectangleGeometry", myRectangleGeometry);

            Path myPath = new Path();
            myPath.Fill = Brushes.LemonChiffon;
            myPath.StrokeThickness = 1;
            myPath.Stroke = Brushes.Black;
            myPath.Data = myRectangleGeometry;

            RectAnimation myRectAnimation = new RectAnimation();
            myRectAnimation.Duration = TimeSpan.FromSeconds(2);
            myRectAnimation.FillBehavior = FillBehavior.HoldEnd;

            // Set the animation to repeat forever. 
            myRectAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the From and To properties of the animation.
            myRectAnimation.From = new Rect(0, 200, 100, 100);
            myRectAnimation.To = new Rect(600, 50, 200, 50);

            // Set the animation to target the Rect property
            // of the object named "MyAnimatedRectangleGeometry."
            Storyboard.SetTargetName(myRectAnimation, "MyAnimatedRectangleGeometry");
            Storyboard.SetTargetProperty(
                myRectAnimation, new PropertyPath(RectangleGeometry.RectProperty));

            // Create a storyboard to apply the animation.
            Storyboard ellipseStoryboard = new Storyboard();
            ellipseStoryboard.Children.Add(myRectAnimation);

            // Start the storyboard when the Path loads.
            myPath.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                ellipseStoryboard.Begin(this);
            };

            Canvas containerCanvas = new Canvas();
            containerCanvas.Children.Add(myPath);

            Content = containerCanvas;
        }
    }
}

<Page  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
    <Path Stroke="Black" StrokeThickness="1" Fill="LemonChiffon">
      <Path.Data>
        <RectangleGeometry x:Name="myRectangleGeometry" Rect="0,200,100,100" />
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the Rect property of the RectangleGeometry which causes the
              rectangle to animate postion and size. -->
              <RectAnimation
              Storyboard.TargetName="myRectangleGeometry"
              Storyboard.TargetProperty ="Rect"
              Duration="0:0:2" FillBehavior="HoldEnd" From="0,200,100,100" To="600,50,200,50" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </StackPanel>
</Page>