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?
I'm pretty sure that Johhny Westlake has a valid answer, but I solved my issue with the following: