如何:对 ArcSegment 的大小进行动画处理

此示例演示如何对 ArcSegmentSize 属性进行动画处理。

示例

下面的示例创建一个 ArcSegment,在屏幕上加载此类时,它会对其 Size 进行动画处理。


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 SizeAnimationExample
        Inherits Page
        Public Sub New()

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

            ' Create an ArcSegment to define the geometry of the path.
            ' The Size property of this segment is animated.
            Dim myArcSegment As New ArcSegment()
            With myArcSegment
                .Size = New Size(90, 80)
                .SweepDirection = SweepDirection.Clockwise
                .Point = New Point(500, 200)
            End With

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

            Dim myPathSegmentCollection As New PathSegmentCollection()
            myPathSegmentCollection.Add(myArcSegment)

            ' Create a PathFigure to be used for the PathGeometry of myPath.
            Dim myPathFigure As New PathFigure()

            ' Set the starting point for the PathFigure specifying that the
            ' geometry starts at point 100,200.
            myPathFigure.StartPoint = New Point(100, 200)

            myPathFigure.Segments = myPathSegmentCollection

            Dim myPathFigureCollection As New PathFigureCollection()
            myPathFigureCollection.Add(myPathFigure)

            Dim myPathGeometry As New PathGeometry()
            myPathGeometry.Figures = myPathFigureCollection

            ' Create a path to draw a geometry with.
            Dim myPath As New Path()
            With myPath
                .Stroke = Brushes.Black
                .StrokeThickness = 1

                ' specify the shape of the path using the path geometry.
                .Data = myPathGeometry
            End With

            Dim mySizeAnimation As New SizeAnimation()
            With mySizeAnimation
                .Duration = TimeSpan.FromSeconds(2)

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

                ' Set the From and To properties of the animation.
                .From = New Size(90, 80)
                .To = New Size(200, 200)
            End With

            ' Set the animation to target the Size property
            ' of the object named "myArcSegment."
            Storyboard.SetTargetName(mySizeAnimation, "myArcSegment")
            Storyboard.SetTargetProperty(mySizeAnimation, New PropertyPath(ArcSegment.SizeProperty))

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

            ' 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 SizeAnimationExample : Page
    {
        public SizeAnimationExample()
        {

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

            // Create an ArcSegment to define the geometry of the path.
            // The Size property of this segment is animated.
            ArcSegment myArcSegment = new ArcSegment();
            myArcSegment.Size = new Size(90, 80);
            myArcSegment.SweepDirection = SweepDirection.Clockwise;
            myArcSegment.Point = new Point(500, 200);

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

            PathSegmentCollection myPathSegmentCollection = new PathSegmentCollection();
            myPathSegmentCollection.Add(myArcSegment);

            // Create a PathFigure to be used for the PathGeometry of myPath.
            PathFigure myPathFigure = new PathFigure();

            // Set the starting point for the PathFigure specifying that the
            // geometry starts at point 100,200.
            myPathFigure.StartPoint = new Point(100, 200);

            myPathFigure.Segments = myPathSegmentCollection;

            PathFigureCollection myPathFigureCollection = new PathFigureCollection();
            myPathFigureCollection.Add(myPathFigure);

            PathGeometry myPathGeometry = new PathGeometry();
            myPathGeometry.Figures = myPathFigureCollection;

            // Create a path to draw a geometry with.
            Path myPath = new Path();
            myPath.Stroke = Brushes.Black;
            myPath.StrokeThickness = 1;

            // specify the shape of the path using the path geometry.
            myPath.Data = myPathGeometry;

            SizeAnimation mySizeAnimation = new SizeAnimation();
            mySizeAnimation.Duration = TimeSpan.FromSeconds(2);

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

            // Set the From and To properties of the animation.
            mySizeAnimation.From = new Size(90, 80);
            mySizeAnimation.To = new Size(200, 200);

            // Set the animation to target the Size property
            // of the object named "myArcSegment."
            Storyboard.SetTargetName(mySizeAnimation, "myArcSegment");
            Storyboard.SetTargetProperty(
                mySizeAnimation, new PropertyPath(ArcSegment.SizeProperty));

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

            // 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" >
    <Canvas HorizontalAlignment="Left" Margin="0" >

      <!-- Create an arc on the screen that animates its size when it loads. -->
      <Path Stroke="Black" StrokeThickness="2" >
        <Path.Data>
          <PathGeometry>
            <PathGeometry.Figures>
              <PathFigureCollection>
                <PathFigure StartPoint="100,200">
                  <PathFigure.Segments>
                    <PathSegmentCollection>
                      <ArcSegment x:Name="myArcSegment" Size="90,80" 
                      SweepDirection="Clockwise"  Point="500,200" />
                    </PathSegmentCollection>
                  </PathFigure.Segments>
                </PathFigure>
              </PathFigureCollection>
            </PathGeometry.Figures>
          </PathGeometry>
        </Path.Data>
        <Path.Triggers>
          <EventTrigger RoutedEvent="Path.Loaded">
            <BeginStoryboard Name="myBeginStoryBoard">
              <Storyboard>

                <!-- Animate the size of the ArcSegment to a width and height of 200. -->
                <SizeAnimation
                Storyboard.TargetName="myArcSegment"
                Storyboard.TargetProperty="Size"
                From="90,80"
                To="200,200"
                Duration="0:0:2" />

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Path.Triggers>
      </Path>
    </Canvas>

</Page>

有关其他几何和动画示例,请参见 Geometries Sample(几何示例)。

请参见

参考

Size

ArcSegment

概念

动画概述

Geometry 概述

其他资源

几何图形帮助主题

动画和计时

动画和计时帮助主题