0

我将以下教程作为动画的良好起点，并探索了工具包偏移选项，但发现完成我想要的东西有点复杂，除非另有证明。

目标：单击矩阵按钮后，将对象从其起始位置移动到单击按钮的位置，然后将对象返回到其初始位置。

挑战：主要挑战可能是确定每个矩阵元素（按钮）的确切位置；元素相对于 Grid 的位置非常明确，例如 Grid.Row="1" Grid.Column="2"，但对于 Canvas 和动画来说……不知道！

根据下面的代码，如何将 EllipseFigure 从正方形 6 移动到正方形 1？

<Canvas>
    <Canvas.Resources>
        <Storyboard x:Name="myStoryboard">
            <!-- Animate the center point of the ellipse. -->
            <PointAnimation EnableDependentAnimation="True" Storyboard.TargetProperty="Center"
          Storyboard.TargetName="EllipseFigure"
          Duration="0:0:5"
          From="1,2"
          To="0,0"
          RepeatBehavior="Forever" />
        </Storyboard>
    </Canvas.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.Resources>
            <Style TargetType="Button">
                <Setter Property="BorderBrush" Value="Yellow" />
                <Setter Property="BorderThickness" Value="5" />
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="VerticalAlignment" Value="Stretch" />
            </Style>

            <Style TargetType="TextBox">
                <Setter Property="BorderBrush" Value="Yellow" />
                <Setter Property="BorderThickness" Value="5" />
            </Style>
        </Grid.Resources>
        <Button  Grid.Row="0" Grid.Column="0" Content="1"   />
        <Button  Grid.Row="0"  Grid.Column="1" Content="2"   />
        <Button  Grid.Row="0"  Grid.Column="2" Content="3"   />
        <Button  Grid.Row="1" Grid.Column="0" Content="4"   />
        <Button  Grid.Row="1"  Grid.Column="1" Content="5"   />
        <Button  Grid.Row="1"  Grid.Column="2" Content="6"   />

        <Path Grid.Row="1" Grid.Column="2" Fill="Blue" PointerPressed="ButtonClick">
            <Path.Data>
                <!-- Describe an ellipse. -->
                <EllipseGeometry x:Name="EllipseFigure"
         Center="20,20" RadiusX="15" RadiusY="15" />
            </Path.Data>
        </Path>
    </Grid>
</Canvas>

代码隐藏：

  private  void ButtonClick(object sender, RoutedEventArgs e)
    {
        myStoryboard.Begin();
    }
4

1 回答 1

3

使用您拥有的 Storyboard 方法，您可以通过获取按钮和球的位置并设置动画的 To 属性来完成此操作。您还可以通过将 AutoReverse 设置为 true 来返回球

<Storyboard x:Name="myStoryboard">
    <PointAnimation Storyboard.TargetProperty="Center"
                    Storyboard.TargetName="EllipseFigure"
                    Duration="0:0:1" 
                    AutoReverse="True" 
                    EnableDependentAnimation="True"/>

</Storyboard>

确保您订阅了按钮的 Click 事件，而不是球的 PointerPressed。

private void Button_Click(object sender, RoutedEventArgs e)
{
    var button = (Button)sender;

    // Get the position (top left) of the Button
    GeneralTransform transform = button.TransformToVisual(this);
    Point buttonPosition = transform.TransformPoint(new Point(0, 0));

    // Get the center of the button
    Point buttonCenter = new Point(buttonPosition.X + (button.ActualWidth / 2), buttonPosition.Y + (button.ActualHeight / 2));

    // Get the position of the ball
    transform = Ball.TransformToVisual(this);
    Point ballPosition = transform.TransformPoint(new Point(0, 0));

    // Get the center of the ball
    Point ballCenter = new Point(ballPosition.X + (EllipseFigure.Center.X), ballPosition.Y + (EllipseFigure.Center.Y));

    // The animation acts like it's at 0,0. calculate position to go to
    Point to = new Point(buttonCenter.X - ballCenter.X, buttonCenter.Y - ballCenter.Y);

    var storyBoard = (Storyboard)Root.Resources["myStoryboard"];
    var animation = (PointAnimation)storyBoard.Children[0];
    animation.To = to;

    storyBoard.Begin();
}

请注意，我给你的路径元素一个 x:Name of "Ball"

于 2017-05-19T22:29:51.410 回答