如何实现下方otherRectangle矩形向上移动的动画效果？

Got it, let's get your otherRectangle moving upward smoothly! Here are two practical approaches tailored to your existing XAML structure:

1. Declarative XAML Animation (Storyboard) #

This method lets you define the entire animation in XAML, no code-behind needed. You can trigger it when the page loads, or tie it to an existing event like the DoubleTapped on your sampleRectangle.

Modified XAML Code #

<Page.Resources>
    <!-- Define the upward animation for otherRectangle -->
    <Storyboard x:Name="MoveUpAnimation">
        <DoubleAnimation
            Storyboard.TargetName="otherRectangle"
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
            From="0"
            To="-100"
            Duration="0:0:0.5"
            EasingFunction="CircleEase"/>
    </Storyboard>
</Page.Resources>

<StackPanel x:Name="rootStackPanel" Background="{ThemeResource SystemControlAcrylicWindowBrush}" Padding="0,48">
    <Rectangle x:Name="sampleRectangle" Width="200" Height="300" Fill="DeepPink" 
               DoubleTapped="Rectangle_DoubleTapped" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <CompositeTransform TranslateY="-100"/>
        </Rectangle.RenderTransform>
    </Rectangle>
    <Rectangle x:Name="otherRectangle" Width="200" Height="200" Fill="Cyan">
        <!-- Add CompositeTransform to enable translation -->
        <Rectangle.RenderTransform>
            <CompositeTransform/>
        </Rectangle.RenderTransform>
    </Rectangle>
</StackPanel>

How to Trigger the Animation #

• Trigger on Page Load: Add Loaded="Page_Loaded" to your root Page element, then in code-behind:

  private void Page_Loaded(object sender, RoutedEventArgs e)
  {
      MoveUpAnimation.Begin();
  }
  

• Trigger on DoubleTap (with sampleRectangle): Update your existing Rectangle_DoubleTapped event handler:

  private void Rectangle_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
  {
      // Add this line to start the animation
      MoveUpAnimation.Begin();
  }
  

2. Code-Behind Animation (No XAML Storyboard) #

If you prefer handling everything in code (great for dynamic animations), you can create and start the animation directly in your event handler:

Updated Code-Behind #

private void Rectangle_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
    // Ensure otherRectangle has a CompositeTransform
    if (otherRectangle.RenderTransform is not CompositeTransform transform)
    {
        transform = new CompositeTransform();
        otherRectangle.RenderTransform = transform;
    }

    // Create the upward translation animation
    var doubleAnimation = new DoubleAnimation
    {
        From = 0,
        To = -100,
        Duration = TimeSpan.FromSeconds(0.5),
        EasingFunction = new CircleEase()
    };

    // Attach the animation to the TranslateY property
    Storyboard.SetTarget(doubleAnimation, otherRectangle);
    Storyboard.SetTargetProperty(doubleAnimation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");

    // Start the animation
    var storyboard = new Storyboard();
    storyboard.Children.Add(doubleAnimation);
    storyboard.Begin();
}

Key Notes #

• TranslateY Value: Setting To="-100" moves the rectangle up by 100 pixels. Adjust this number to control how far it moves.
• Easing Functions: CircleEase gives a smooth acceleration/deceleration effect. You can use others like QuadraticEase or BackEase for different motion styles.
• RenderTransform: Always make sure your target element has a CompositeTransform (or TranslateTransform) defined—this is required for the animation to modify the element's position.

内容的提问来源于stack exchange，提问作者Jai Sharma