Question

我将以下tutorial作为动画的一个良好开端并且还探索了toolkit Offset option，但发现它实现了我想要的某种程度很复杂，除非另有证明。

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

挑战：主要挑战可能在于确定每个矩阵元素的确切位置（按钮）;元素关于网格的位置非常清楚，例如Grid.Row =＆＃34; 1＆＃34; Grid.Column =＆＃34; 2＆＃34;，但关于Canvas和动画一般......不知道！

根据下面的代码，如何将EllipseFigure从square 6移动到square 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();
    }

Answer 1

使用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();
}

请注意，我给你的Path元素一个x：名称＆＃34; Ball＆＃34;

将XAML元素从一个位置移动到另一个位置

1 个答案: