Why isn't the Translation property (Composition) retained?

Question

I have the following code which translates the rectangle down 100px, then once completed translates the rectangle right 100px, BUT I would like the rightwards translation to maintain the animated Y (100px), however it doesn't do that. When I debug, I notice the value of Translation is (0,0,0) instead of (0,100,0).

This is the code I have in my app (app needs to have UWP target + minimum sdk 17763):

public MainPage()
{
    this.InitializeComponent();

    this.Loaded += (sender1, e1) =>
    {
        var compositor = Window.Current.Compositor;
        var batch = compositor.CreateScopedBatch(Windows.UI.Composition.CompositionBatchTypes.Animation);

        var vertical = compositor.CreateVector3KeyFrameAnimation();

        vertical.InsertKeyFrame(1.0f, new Vector3(0f, 100f, 0f));
        vertical.Duration = TimeSpan.FromMilliseconds(2000);
        vertical.Target = "Translation";

        Rect.StartAnimation(vertical);

        batch.End();

        batch.Completed += (sender2, e2) =>
        {
            var horizontal = compositor.CreateVector3KeyFrameAnimation();

            // PROBLEM: ... Rect.Translation.Y is not 100, it's 0 ...
            horizontal.InsertKeyFrame(1.0f, new Vector3(100f, Rect.Translation.Y, 0f));
            horizontal.Duration = TimeSpan.FromMilliseconds(2000);
            horizontal.Target = "Translation";

            Rect.StartAnimation(horizontal);
        };
    };
}

What is the correct way to maintain the Y position after the initial animation completed?

It's probably capturing the value of Rect.Translation.Y before you're expecting it too. Perhaps try ` horizontal.InsertExpressionKeyFrame(1.0f, "Vector3(100f, this.Target.Translation.Y, 0f)");` — Johnny Westlake, Apr 28 '19 at 13:58
I solved it another way, but I also think your correct too. Thanks! — Maximus, Apr 29 '19 at 14:25

score 0 · Answer 1 · answered Apr 29 '19 at 14:25

I'm pretty sure that Johhny Westlake has a valid answer, but I solved my issue with the following:

this.Loaded += (sender1, e1) =>
{
    var compositor = Window.Current.Compositor;

    ElementCompositionPreview.SetIsTranslationEnabled(Rect, true);
    var visual = ElementCompositionPreview.GetElementVisual(Rect);
    var batch = compositor.CreateScopedBatch(Windows.UI.Composition.CompositionBatchTypes.Animation);

    var vertical = compositor.CreateScalarKeyFrameAnimation();

    vertical.InsertKeyFrame(1.0f, 100f);
    vertical.Duration = TimeSpan.FromMilliseconds(2000);

    visual.StartAnimation("Translation.Y", vertical);

    batch.End();

    batch.Completed += (sender2, e2) =>
    {
        var horizontal = compositor.CreateScalarKeyFrameAnimation();

        horizontal.InsertKeyFrame(1.0f, 100f);
        horizontal.Duration = TimeSpan.FromMilliseconds(2000);

        visual.StartAnimation("Translation.X", horizontal);
    };
};

Why isn't the Translation property (Composition) retained?

1 Answers1