[笔记] WPF 路径动画

需求

指定对象（Image）按照贝塞尔曲线进行移动

实现

Image

<Image Source="{StaticResource Image.Activity.Score}"
           x:Name="StarImage"
           VerticalAlignment="Center"
           Width="48" Height="51" Stretch="Uniform">
    <Image.RenderTransform>
        <TranslateTransform x:Name="ScoreImageTranslateTransform"></TranslateTransform>
    </Image.RenderTransform>
</Image>

路径与动画定义

    <FrameworkElement.Resources>

        <ResourceDictionary>

            <PathGeometry x:Key="LeftStarAnimationPathGeometry">
                <PathFigure StartPoint="0,0">
                    <BezierSegment Point1="-50,80" Point2="-120,100" Point3="-300,55">
                    </BezierSegment>
                    <BezierSegment Point1="-740,-100" Point2="-720,-350" Point3="-740,-452">
                    </BezierSegment>
                </PathFigure>
            </PathGeometry>

            <Storyboard x:Key="StarMoveUpStoryboardLeft" TargetName="ContentGrid">

                <DoubleAnimationUsingPath
                    BeginTime="00:00:0.00" Duration="00:00:00.30"
                    Storyboard.TargetName="ScoreImageTranslateTransform"
                    Storyboard.TargetProperty="X"
                    Source="X"
                    PathGeometry="{StaticResource LeftStarAnimationPathGeometry}">
                </DoubleAnimationUsingPath>

                <DoubleAnimationUsingPath
                    BeginTime="00:00:0.00" Duration="00:00:00.30"
                    Storyboard.TargetName="ScoreImageTranslateTransform"
                    Storyboard.TargetProperty="Y"
                    Source="Y"
                    PathGeometry="{StaticResource LeftStarAnimationPathGeometry}">
                </DoubleAnimationUsingPath>

            </Storyboard>
 
        </ResourceDictionary>

    </FrameworkElement.Resources>

参考

• WPF学习之绘图和动画-C#/.net框架-少有人走的路
• WPF：Animation动画--PathAnimation路径动画效果 - SegmentFault 思否
• 如何：创建三次方贝塞尔曲线 - WPF .NET Framework | Microsoft Docs