Xamarin.Forms-同时对2件事进行动画处理(推送动画) [英] Xamarin.Forms - Animating 2 Things at the Same Time (Push Animation)

问题描述

我有一个Xamarin表单页面，该页面包含用于包装所有内容的绝对布局.在里面，我的内容充满了整个空间，左侧填充为80，然后左侧导航栏的宽度为80，位于主要内容的顶部:

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. 将左侧导航栏的宽度增加100(至180)
2. 将主要内容翻译100

(请注意，使用TranslateTo()非常容易，但是左侧导航栏需要增加宽度，而不是向右移动，并且没有WidthTo()方法).

(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).

我可以自己做#1.

我可以独自完成#2.

但是我无法让它们同时进行动画处理.如果我先运行左导航动画(通过.Commit())，则仅对主要内容进行动画处理.如果我先运行主要内容动画，则没有动画.奇怪的！这是怎么回事?

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);

推荐答案

我发现.Commit()的第一个参数需要引用您要设置动画的元素.所以从:

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);

收件人:

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

解决了.

这篇关于Xamarin.Forms-同时对2件事进行动画处理(推送动画)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！