C++/WinRT中如何实现Image的平滑归位动画？

Hey there! Let's work through your UWP image drag-and-drop animation problem together. I'll break down why your current approaches aren't working and give you a solid solution to get that smooth return-to-origin animation.

First, why your loop + sleep approach fails #

Your initial slowly_move_to function uses std::this_thread::sleep_for inside the PointerReleased callback, which runs on the UI thread. The UI thread is single-threaded—when you block it with sleep, all pending UI updates (like the intermediate SetLeft/SetTop calls) get queued up and only execute once the entire callback finishes. That's why you see a teleport instead of a smooth move: the Canvas never gets a chance to redraw the image in its intermediate positions.

Fixing the CompositionAnimation issue #

Your CompositionAnimation attempt was on the right track, but you hit two snags:

1. You can't directly animate Canvas.Left/Top via UIElement.StartAnimation—these are attached properties, and you need to target the image's Composition Visual instead.
2. Animating two separate scalar properties (X and Y) can be simplified with a single vector animation for cleaner code.

Here's the corrected implementation that animates smoothly and handles both X/Y positions at once:

#include <winrt/Windows.UI.Xaml.Hosting.h>
#include <winrt/Windows.Foundation.Numerics.h>

void MainPage::slowly_move_to(Image& timg, Point32_t to) {
    // Get the Composition Visual for the Image (this is key for animating layout properties)
    auto visual = winrt::Windows::UI::Xaml::Hosting::ElementCompositionPreview::GetElementVisual(timg);
    auto compositor = visual.Compositor();

    // Create a Vector2 animation to handle both X and Y position in one go
    auto offsetAnim = compositor.CreateVector2KeyFrameAnimation();
    
    // Start from the current visual offset
    auto currentOffset = visual.Offset();
    offsetAnim.InsertKeyFrame(0.0f, currentOffset);
    // End at the target Canvas.Left/Top position
    offsetAnim.InsertKeyFrame(1.0f, winrt::Windows::Foundation::Numerics::float2{(float)to.X, (float)to.Y});
    
    // Set animation duration (1 second, matching your original intent)
    offsetAnim.Duration(winrt::Windows::Foundation::TimeSpan{std::chrono::seconds(1)});
    // Add a smooth easing function to make the animation feel natural
    offsetAnim.InsertExpressionKeyFrame(0.5f, "this.FinalValue", compositor.CreateCubicBezierEasingVector2({0.4f, 0.0f, 0.2f, 1.0f}));

    // Sync the Canvas layout properties once the animation finishes
    // This ensures the image stays in the correct position after the animation ends
    offsetAnim.Completed([&timg, to](auto const&, auto const&) {
        winrt::Windows::UI::Xaml::Controls::Canvas::SetLeft(timg, to.X);
        winrt::Windows::UI::Xaml::Controls::Canvas::SetTop(timg, to.Y);
        // Reset the visual offset to avoid layout conflicts later
        auto visual = winrt::Windows::UI::Xaml::Hosting::ElementCompositionPreview::GetElementVisual(timg);
        visual.Offset({0.0f, 0.0f, 0.0f});
    });

    // Start the animation on the Visual's Offset property
    visual.StartAnimation(L"Offset", offsetAnim);
}

Key improvements explained #

• Composition Visual: By using ElementCompositionPreview::GetElementVisual, we're animating directly on the composition thread (not the UI thread), which keeps the animation smooth and avoids blocking UI updates.
• Vector2 Animation: This lets us animate both X and Y positions in a single animation, eliminating the need to manage two separate scalar animations.
• Easing Function: The cubic bezier easing adds a natural acceleration/deceleration curve, making the animation feel less robotic.
• Post-Animation Sync: Resetting the visual offset and updating Canvas.Left/Top ensures the image's layout stays consistent with its rendered position after the animation ends.

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