WPF實現(xiàn)動畫效果（六）之路徑動畫

更新時間：2022年06月23日 11:15:35 作者：天方

這篇文章介紹了WPF實現(xiàn)動畫效果之路徑動畫，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

WPF動畫效果系列

WPF實現(xiàn)動畫效果（一）之基本概念

WPF實現(xiàn)動畫效果（二）之From/To/By 動畫

WPF實現(xiàn)動畫效果（三）之時間線（TimeLine）

WPF實現(xiàn)動畫效果（四）之緩動函數(shù)

WPF實現(xiàn)動畫效果（五）之關(guān)鍵幀動畫

WPF實現(xiàn)動畫效果（六）之路徑動畫

WPF實現(xiàn)動畫效果（七）之演示圖板

正文

路徑動畫是一種專門用于將對象按照指定的Path移動的動畫，雖然我們也可以通過控制動畫的旋轉(zhuǎn)和偏移實現(xiàn)對象的移動，但路徑動畫更專業(yè)，它的實現(xiàn)更加簡潔明了。

路徑動畫中最常用的是MatrixAnimationUsingPath，它通常用于控制對象的MatrixTransform，一個簡單的例子如下：

    <Canvas >
        <Canvas.Resources>
            <PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
            <Storyboard x:Key="pathStoryboard" >
                <MatrixAnimationUsingPath PathGeometry="{StaticResource path}"
                                          Storyboard.TargetName="ButtonMatrixTransform"
                                          Storyboard.TargetProperty="Matrix"
                                          DoesRotateWithTangent="True"
                                          Duration="0:0:5" RepeatBehavior="Forever" >
                </MatrixAnimationUsingPath>
            </Storyboard>
        </Canvas.Resources>

        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Control.Loaded">
                <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
            </EventTrigger>
        </Canvas.Triggers>

        <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />

        <Button Width="50" Height="20" >
            <Button.RenderTransform>
                <MatrixTransform x:Name="ButtonMatrixTransform" />
            </Button.RenderTransform>
        </Button>
    </Canvas>

注意這兒有一個DoesRotateWithTangent的屬性，設(shè)置上它后，對象在移動的過程中還能根據(jù)路徑的坡度旋轉(zhuǎn)，非常有用。

除了MatrixAnimationUsingPath外，另外還有兩種路徑動畫：PointAnimationUsingPath和DoubleAnimationUsingPath。PointAnimationUsingPath用于靠中心點確定位置的形狀，

    <Canvas >
        <Canvas.Resources>
            <PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
            <Storyboard x:Key="pathStoryboard" >
                <PointAnimationUsingPath PathGeometry="{StaticResource path}"
                                          Storyboard.TargetName="ellipse"
                                          Storyboard.TargetProperty="Center"
                                          Duration="0:0:5" RepeatBehavior="Forever" >
                </PointAnimationUsingPath>
            </Storyboard>
        </Canvas.Resources>

        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Control.Loaded">
                <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
            </EventTrigger>
        </Canvas.Triggers>

        <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />

        <Path Fill="Orange">
            <Path.Data>
                <EllipseGeometry x:Name="ellipse" Center="5,5" RadiusX="12" RadiusY="12"/>
            </Path.Data>
        </Path>
    </Canvas>

DoubleAnimationUsingPath則是通過X、Y和Angle三個屬性聯(lián)合實現(xiàn)路徑的變化，一般在TranslateTransform中使用，如下就是一個簡單的例子：

    <Canvas >
        <Canvas.Resources>
            <PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
            <Storyboard x:Key="pathStoryboard" >
                <DoubleAnimationUsingPath PathGeometry="{StaticResource path}"
                                          Storyboard.TargetName="translateTransform"
                                          Storyboard.TargetProperty="X"
                                          Source="X"
                                          Duration="0:0:5" RepeatBehavior="Forever" >
                </DoubleAnimationUsingPath>
                <DoubleAnimationUsingPath PathGeometry="{StaticResource path}"
                                          Storyboard.TargetName="translateTransform"
                                          Storyboard.TargetProperty="Y"
                                          Source="Y"
                                          Duration="0:0:5" RepeatBehavior="Forever" >
                </DoubleAnimationUsingPath>
            </Storyboard>
        </Canvas.Resources>

        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Control.Loaded">
                <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
            </EventTrigger>
        </Canvas.Triggers>

        <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />

        <Path Fill="Orange">
            <Path.Data>
                <EllipseGeometry x:Name="ellipse" Center="5,5" RadiusX="12" RadiusY="12"/>
            </Path.Data>
            <Path.RenderTransform>
                <TranslateTransform x:Name="translateTransform" />
            </Path.RenderTransform>
        </Path>
    </Canvas>

到此這篇關(guān)于WPF實現(xiàn)動畫效果之路徑動畫的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: