Xamarin.Forms - Animating 2 Things at the Same Tim

问题:

I have a Xamarin forms page that contains an absolute layout that wraps everything. Inside that, I have content that fills the whole space and has left padding of 80, and then I have a left nav sidebar that is 80 wide and sits on top of the main content:

I want a sort of modified "push" animation, which means doing two things:

1. Increase the width of left nav by 100 (to 180)
2. TranslateX the main content by 100

(Note that using TranslateTo() would be super easy, but the left nav needs to increase in width, not shift to the right, and there's no WidthTo() method).

I can do #1 by itself just fine.

I can do #2 by itself just fine.

But I can't get them to both animate. If I run the left nav animation first (via .Commit()), only the main content animates. If I run the main content animation first, neither animates. Strange! What is going on here?

Here's the basic code I'm using:

var leftNavAnimation = new Animation(
    callback: x => leftNav.WidthRequest = x,
    start: 80,
    end: 180,
    easing: Easing.Linear
);

var mainContentAnimation = new Animation(
    callback: x => mainContent.TranslationX = x,
    start: 0,
    end: 100,
    easing: Easing.Linear
);

leftNavAnimation.Commit(this, "leftNavAnimationName", length: animationLength);
pageContentAnimation.Commit(this, "mainContentAnimationName", length: animationLength);

回答1:

I figured out that the first parameter of .Commit() needs to refer to the element you're animating. So changing from:

mainContentAnimation.Commit(this, "mainContentAnimationName", length: animationLength);

To:

mainContentAnimation.Commit(mainContent, "mainContentAnimationName", length: animationLength);

Fixed it.