WPF:Animation动画--PathAnimation路径动画效果

PahtAnimation路径动画:

PointAnimationUsingPath使用路径坐标动画效果

clipboard.png
关注点:
1 PointAnimationUsingPath 类:对两个或更多个目标值之间的 Point 属性值进行动画处理,通过使用 PathGeometry 指定这些目标值。 此动画可用于沿着路径移动可视对象。

  1. 设置一个线性形状Path及一个几何圆的形状Path
<Canvas HorizontalAlignment="Left" Width="340" Height="240" >
      
  <!-- This Path is only to show the path that the animated object will follow. -->
  <Path VerticalAlignment="Top" Margin="15,15,15,15" 
    Data="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
    Stroke="Black" StrokeThickness="2"
    Stretch="None" />
  
  <Path Fill="Blue" Margin="15,15,15,15">
    <Path.Data>
    
      <!-- Describes an ellipse. -->
      <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
        Center="10,100" RadiusX="15" RadiusY="15" />
    </Path.Data>
  </Path>
</Canvas>
  1. 针对几何圆使用路径坐标动画PointAnimationUsingPath,此处需PointAnimationUsingPath.PathGeometry确定路径路线
<!-- Create a button to restart the animation. -->
<Button Width="80" HorizontalAlignment="Left" >Start Animation

  <!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard Name="MyBeginStoryboard">
        <Storyboard>
          
          <!-- Animates the ellipse along the path. -->
          <PointAnimationUsingPath
            Storyboard.TargetName="MyAni
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值