故事板 EllipseGeometry 动画

时间:2021-02-01 19:25:12

标签: wpf xaml path storyboard styles

全部。我已经启动了一个简单的 WPF 应用程序,并且想要一个按钮在它可见时跟随一个椭圆路径(现在我只希望它在我点击时发生......用于测试目的)。它应该简单地沿着路径移动,然后在最后一点停下来。我无法让故事板以某种风格工作。它不会引用我已经定义的路径。我该如何解决?最终,每个按钮都需要有自己的最终静止点,所以我需要在以后传入一个额外的动画。代码在 XAML 中(在下面发布)。

<Window x:Class="EllipseFollowsPath.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:EllipseFollowsPath"
    mc:Ignorable="d"
    Title="MainWindow" Height="768" Width="1366">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="768" Width="1366">
    <Grid.Resources>
        <PathGeometry x:Key="path">
            <PathGeometry.Figures>
                <PathFigure StartPoint="921,384" IsClosed="False">
                    <ArcSegment Point="445,384" Size="60 60" 
                    SweepDirection="Counterclockwise"/>
                </PathFigure>
                <PathFigure StartPoint="445,384" IsClosed="False">
                    <ArcSegment Point="921,384" Size="60 60" 
                    SweepDirection="Counterclockwise"/>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
        <Storyboard x:Key="sb" RepeatBehavior="Forever">
            <MatrixAnimationUsingPath
                    Storyboard.TargetName="transform"
                    Storyboard.TargetProperty="Matrix"
                    PathGeometry="{StaticResource path}"
                    Duration="0:0:2">
            </MatrixAnimationUsingPath>
        </Storyboard>
    </Grid.Resources>
    <Button Height="20" Width="20">
        <Button.RenderTransform>
            <MatrixTransform x:Name="transform"/>
        </Button.RenderTransform>
        <Button.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard Storyboard="{StaticResource sb}">
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>

1 个答案:

答案 0 :(得分:0)

下面的代码有效...

<Window x:Class="EllipseFollowsPath.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:EllipseFollowsPath"
    mc:Ignorable="d"
    Title="MainWindow" Height="768" Width="1366">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="768" Width="1366">
    <Grid.Resources>
        <PathGeometry x:Key="path">
            <PathGeometry.Figures>
                <PathFigure StartPoint="921,384" IsClosed="False">
                    <ArcSegment Point="445,384" Size="60 60" 
                    SweepDirection="Counterclockwise"/>
                </PathFigure>
                <PathFigure StartPoint="445,384" IsClosed="False">
                    <ArcSegment Point="921,384" Size="60 60" 
                    SweepDirection="Counterclockwise"/>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
        <Storyboard x:Key="sb" RepeatBehavior="Forever">
            <MatrixAnimationUsingPath
                    Storyboard.TargetName="transform"
                    Storyboard.TargetProperty="Matrix"
                    PathGeometry="{StaticResource path}"
                    Duration="0:0:2">
            </MatrixAnimationUsingPath>
        </Storyboard>
    </Grid.Resources>
    <Button Height="20" Width="20">
        <Button.RenderTransform>
            <MatrixTransform x:Name="transform"/>
        </Button.RenderTransform>
        <Button.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard Storyboard="{StaticResource sb}">
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>