WPF實(shí)現(xiàn)動(dòng)畫效果（六）之路徑動(dòng)畫

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

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

WPF動(dòng)畫效果系列

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

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

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

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

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

WPF實(shí)現(xiàn)動(dòng)畫效果（六）之路徑動(dòng)畫

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

正文

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

路徑動(dòng)畫中最常用的是MatrixAnimationUsingPath，它通常用于控制對(duì)象的MatrixTransform，一個(gè)簡單的例子如下：

    <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>

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

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

    <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三個(gè)屬性聯(lián)合實(shí)現(xiàn)路徑的變化，一般在TranslateTransform中使用，如下就是一個(gè)簡單的例子：

    <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實(shí)現(xiàn)動(dòng)畫效果之路徑動(dòng)畫的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: