故事板 EllipseGeometry 动画

Posted 2023-03-29

【中文标题】故事板 EllipseGeometry 动画

【英文标题】：Storyboard EllipseGeometry animation

【发布时间】：2021-05-05 23:53:48

【问题描述】：

所有。我已经启动了一个简单的 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>

【问题讨论】：

您必须仔细查看 PointAnimationUsingPath 类的文档。它需要一个 PathGeometry，而不是 Path，它会针对 Point 类型的属性。沿路径移动元素的更好方法是通过 MatrixAnimationUsingPath 在元素的 RenderTransform 属性中对 MatrixTransform 的 Matrix 属性进行动画处理。像这样的东西：***.com/a/17843284/1136211

@Clemens 谢谢。使用矩阵变换是我的第一次尝试。如果我需要在对象 XAMl 中定义路径几何，然后将该几何传递给样式中存在的情节提要，我将如何在情节提要中执行此操作？另外，如果可能的话，我希望路径是一个圆圈。

绑定 PathGeometry 属性，或者分配一个 StaticResource。对于圆，在 PathGeometry 中声明两个弧段。

好吧，也许我不知道如何做到这一点，但 XAML 似乎对什么可以和不可以从一个结构传递到另一个结构有点挑剔。我的最终目标是拥有包含动画的故事板的风格。我想将此样式应用于按钮，以便当它第一次可见时，它遵循动画路径。我编辑了代码以反映更新。

更新了代码以反映变化。

【参考方案1】：

下面的代码有效...

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