WPF多边形故事板动画

Question

制作精确的动画

到目前为止我的代码：

<Grid Width="128" Height="128" Panel.ZIndex="1">
            <Ellipse Fill="Aqua"></Ellipse>
            <Polygon Fill="LightBlue" Stroke="Black" Name="TriOne" >
                <Polygon.Points>
                    <Point X="44" Y="32"></Point>
                    <Point X="44" Y="64"></Point>
                    <Point X="100" Y="64"></Point>
                    <Point X="100" Y="64"></Point>
                </Polygon.Points>
                <Polygon.Triggers>
                    <EventTrigger RoutedEvent="Polygon.MouseUp">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetName="{Binding ElementName=TriOne, Path=Points[0]}"
                                    Storyboard.TargetProperty="X"
                                    From="44" To="32"
                                    />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Polygon.Triggers>
            </Polygon>
            <Polygon Fill="LightBlue" Stroke="Black" Name="TriTwo" >
                <Polygon.Points>

                    <Point X="44" Y="96"></Point> 
                    <Point X="44" Y="64"></Point>
                    <Point X="100" Y="64"></Point>
                </Polygon.Points>
            </Polygon>
        </Grid>

应用程序在单击多边形投掷后进入中断模式：

An unhandled exception of type 'System.InvalidOperationException' occurred in PresentationFramework.dll '44,32' name cannot be found in the name scope of 'System.Windows.Shapes.Polygon'.

我是 WPF 新手，如果您知道更好的多边形动画方法，请分享 link。

Answer 1

您的动画无法工作，因为 Point 的 X 属性不是依赖项属性。

使用 Path 而不是 Polygon 并为 PathFigure 设置动画：

<Grid Width="128" Height="128" Panel.ZIndex="1">
    <Ellipse Fill="Aqua"></Ellipse>
    <Path Fill="LightBlue" Stroke="Black" Name="TriOne">
        <Path.Data>
            <PathGeometry>
                <PathFigure x:Name="fig" StartPoint="44, 32" IsClosed="True">
                    <LineSegment Point="44, 64"/>
                    <LineSegment x:Name="middle" Point="100, 64"/>
                    <LineSegment Point="100, 64"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
        <Path.Triggers>
            <EventTrigger RoutedEvent="Polygon.MouseUp">
                <BeginStoryboard>
                    <Storyboard>
                        <PointAnimation 
                            Storyboard.TargetName="fig"
                            Storyboard.TargetProperty="StartPoint"
                            From="44,32" To="32,32"
                        />
                        <PointAnimation 
                            Storyboard.TargetName="middle"
                            Storyboard.TargetProperty="Point"
                            From="100, 64" To="90, 54"
                        />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Path.Triggers>
    </Path>
    <Polygon Fill="LightBlue" Stroke="Black" Name="TriTwo" >
        <Polygon.Points>

            <Point X="44" Y="96"></Point>
            <Point X="44" Y="64"></Point>
            <Point X="100" Y="64"></Point>
        </Polygon.Points>
    </Polygon>
</Grid>

WPF多边形故事板动画

WPF polygon storyboard animation

wpf

storyboard

visual-studio