WPF 动画按照path路线移动完整

<Window x:Class="WPF_Animation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <PathGeometry x:Key="path">
            <PathFigure IsClosed="True">
                <ArcSegment Point="100,200" Size="15,10" SweepDirection="Clockwise"/>
                <ArcSegment Point="400,50" Size="5,5"/>
            </PathFigure>
        </PathGeometry>
    </Window.Resources>
    
    <Canvas>
        <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Left="10" Canvas.Top="10"></Path>
        <Image Name="image">
            <Image.Source>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <GeometryDrawing Brush="LightSteelBlue">
                            <GeometryDrawing.Geometry>
                                <GeometryGroup>
                                    <EllipseGeometry Center="10,10" RadiusX="9" RadiusY="4"/>
                                    <EllipseGeometry Center="10,10" RadiusX="4" RadiusY="9"/>
                                </GeometryGroup>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                                <Pen Thickness="1" Brush="Black"/>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Image.Source>
            <Image.Triggers>
                <EventTrigger  RoutedEvent="Image.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Left)" PathGeometry="{StaticResource path}"
                                                      Duration="0:0:5" RepeatBehavior="Forever" Source="X"/>
                            <DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Top)" PathGeometry="{StaticResource path}"
                                                      Duration="0:0:5" RepeatBehavior="Forever" Source="Y"/>

                        </Storyboard>
                    </BeginStoryboard>              
                </EventTrigger>
            </Image.Triggers>
        </Image>
    </Canvas>
    
</Window>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值