Using PointAnimation : Shape Animation « Windows Presentation Foundation « VB.Net Tutorial






<Window x:Class="AnimateBezierCurve"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Bezier Curve" Height="300" Width="300">
  <Viewbox Stretch="Fill">
    <Border Margin="5" BorderBrush="Black" BorderThickness="1"
      HorizontalAlignment="Left">
      <Canvas x:Name="canvas1" Width="300" Height="270">
        <Path Stroke="Black" StrokeThickness="5">
          <Path.Data>
            <PathGeometry>
              <PathFigure StartPoint="20,20">
                <BezierSegment x:Name="bezierSegment"
                  Point1="150,50" Point2="60,160" Point3="250,230" />
              </PathFigure>
            </PathGeometry>
          </Path.Data>
        </Path>
        <Path x:Name="path1" Fill="Red" Stroke="Red">
          <Path.Data>
            <GeometryGroup>
              <LineGeometry x:Name="line1"
                StartPoint="20,20" EndPoint="150,50" />
              <EllipseGeometry x:Name="ellipse1"
                Center="150,50" RadiusX="5" RadiusY="5" />
              <LineGeometry x:Name="line2"
                StartPoint="60,160" EndPoint="250,230" />
              <EllipseGeometry x:Name="ellipse2"
                Center="60,160" RadiusX="5" RadiusY="5" />
            </GeometryGroup>
          </Path.Data>
        </Path>
        <!-- Set animation: -->
        <Canvas.Triggers>
          <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
              <Storyboard RepeatBehavior="Forever"
                AutoReverse="True">
                <PointAnimation
                  Storyboard.TargetName="bezierSegment"
                  Storyboard.TargetProperty="Point1" From="50 20" To="250 20"
                  Duration="0:0:5" />
                <PointAnimation
                  Storyboard.TargetName="line1"
                  Storyboard.TargetProperty="EndPoint" From="50 20" To="250 20"
                  Duration="0:0:5" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Canvas.Triggers>
      </Canvas>
    </Border>
  </Viewbox>
</Window>
WPF Using Point Animation








16.112.Shape Animation
16.112.1.Width and Height animationWidth and Height animation
16.112.2.Scaling parameters ScaleX and ScaleY are animatedScaling parameters ScaleX and ScaleY are animated
16.112.3.Path animation by code, duration, RepeatBehaviorPath animation by code, duration, RepeatBehavior
16.112.4.Point path animationPoint path animation
16.112.5.Animated StartPointAnimated StartPoint
16.112.6.Animated EndPointAnimated EndPoint
16.112.7.Animated StartPoint and EndPointAnimated StartPoint and EndPoint
16.112.8.Animated CenterAnimated Center
16.112.9.Animated RadiusAnimated Radius
16.112.10.Using PointAnimationUsing PointAnimation
16.112.11.PointAnimation and BezierSegmentPointAnimation and BezierSegment
16.112.12.PointAnimation ToPointAnimation To
16.112.13.Animate BezierCurveAnimate BezierCurve