如何在 WPF 中使用动画移动 EllipsePath？答案

【问题标题】：How can I move an EllipsePath using animation in WPF?如何在 WPF 中使用动画移动 EllipsePath？
【发布时间】：2016-08-23 23:37:32
【问题描述】：

我想使用 WPF 制作一个滑块按钮。所以我有这段代码来创建一个圆圈并在点击时移动它。

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Border Background="LightGray" Margin="167,63,224,190" CornerRadius="20,20,20,20" Height="40" Width="80">
        <Path Fill="Red">
            <Path.Data>
                <EllipseGeometry Center="20,20" RadiusX="20" RadiusY="20"/>
            </Path.Data>
            <Path.Effect>
                <DropShadowEffect Direction="270" ShadowDepth="2" Color="Gray"></DropShadowEffect>
            </Path.Effect>
            <Path.Triggers>
                <EventTrigger RoutedEvent="Border.MouseDown">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <PointAnimation Storyboard.TargetProperty="Center" Duration="0:0:0.3" From="20,20" To="60,20"></PointAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Path.Triggers>
        </Path>
    </Border>
</Grid>

在程序启动时显示它是好的。但是单击它时会引发异常。错误是System.InvalidOperationException。那么我该如何解决这个问题呢？

【问题讨论】：

标签： wpf xaml slider

【解决方案1】：

也许这更接近您想要做的事情？

<Window x:Class="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:WpfApplication1"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Border Background="LightGray" Margin="167,63,224,190" CornerRadius="20,20,20,20" Height="40" Width="80">
        <Canvas>
            <Ellipse Fill="Red" Width="40" Height="40" Canvas.Left="0" Canvas.Top="0">
                <Ellipse.Effect>
                    <DropShadowEffect Direction="270" ShadowDepth="2" Color="Gray"></DropShadowEffect>
                </Ellipse.Effect>
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Border.MouseDown">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:0.3" From="0" To="40" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
        </Canvas>
    </Border>
</Grid>

【讨论】：

是的，这就是我想要的，而且效果很好。但是为什么“Ellips”的 PointAnimation 和 Center 属性不起作用？你对此有什么想法吗？
好吧，有了像你这样的 xaml，情节提要动画对象无法解析“Center”属性。您永远不会设置“Storyboard.Target”值，让情节提要知道其属性正在动画的源对象。