如何在 C# WPF 中绘制一个圆圈并将其作为动画移动

Question

我想画一个简单的圆圈，并通过编码将其移动到 X、Y 轴上的定义位置。

例如；

WPF 窗口上会有 2 个按钮，0,0(x,y) 上会有一个圆圈。当我单击第一个按钮时，它将转到 X = 150 和 Y= 40。但形状必须顺利到达那里。我的意思是我不希望它在当前位置消失并出现在定义的位置。我想让它去那里。我该怎么做？你能解释一下步骤吗？如果可能的话，还有一些示例代码？

更新代码：

    int X = 0;
    int Y = 0;

    public bool inside = true;

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {

        if (inside)
        {
            DoubleAnimation animatex = new DoubleAnimation();
            animatex.To = X++;
            // animatex.Duration = new Duration(TimeSpan.FromSeconds(1));
            // animatex.RepeatBehavior = RepeatBehavior.Forever;
            el.BeginAnimation(Canvas.LeftProperty, animatex);

            DoubleAnimation animatey = new DoubleAnimation();
            animatey.To = Y++;
            // animatey.RepeatBehavior = RepeatBehavior.Forever;
            el.BeginAnimation(Canvas.TopProperty, animatey);
        }
    }

Answer 1

xaml 类似于 <Canvas> <Ellipse Width="10" Height="10" Canvas.Left="0" Canvas.Top="0" Fill="Black" x:Name="el"/> </Canvas> 按钮的点击事件是这样的

希望这会奏效。我试过了，效果很好。

Answer 2

或仅在 XAML 中：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <StackPanel>
        <Button Content="Move it">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click" >
                    <BeginStoryboard>
                        <Storyboard Storyboard.TargetName="theEllipse" Duration="00:00:05">
                            <DoubleAnimation From="-5" To="145" Storyboard.TargetProperty="(Canvas.Left)"/>
                            <DoubleAnimation From="-5" To="35" Storyboard.TargetProperty="(Canvas.Top)"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </StackPanel>
    <Border Margin="10" Grid.Row="1">
        <Canvas>
            <Ellipse x:Name="theEllipse" Width="10" Height="10" Fill="BlueViolet" Canvas.Left="-5" Canvas.Top="-5" />
        </Canvas>
    </Border>
</Grid>

在此处或其他地方搜索有关使用 Storyboard 的信息。