多个控件并行的 Xamarin.Forms 动画

Question

对于我的 Xamarin.Forms 项目，我需要同时为两个 Xamarin Frame 项目设置动画，但我只是不明白它们使用的示例：

async void OnAnimateLabelButtonClicked(object sender, EventArgs e)
{
...
    await Task.WhenAll(
        label.ColorTo(Color.Red, Color.Blue, c => label.TextColor = c, 5000),
        label.ColorTo(Color.Blue, Color.Red, c => label.BackgroundColor = c, 5000));
...
}

Task.WhenAll - 在我看来 - 并不能保证它在 GUI 主线程上运行，因为没有Device.BeginInvokeOnMainThread()是可见的。

根据此forums.xamarin.com条目，一次使用多个动画的首选方法是通过：

Animation a = new Animation();
a.Add(0, 1, new Animation(f => this.GuidanceLabel.Opacity = f, 1, 0, Easing.SinInOut, null));
a.Add(0, 1, new Animation(f => this.EnableAccess.Opacity = f, 1, 0, Easing.SinOut, null));
a.Commit(
    owner:this.GuidanceLabel,
    name:"DoubleFader",
    length:400,
    finished:(x, y) => 
    {
        this.SetPhotoAccessDeniedState();
        this.GuidanceLabel.FadeTo(1, 400, Easing.CubicIn);
    });

所以，我想，我必须将我的动画包装在Device.BeginInvokeOnMainThread()才能使其正常工作，对于我的特殊动画情况，工作流程是：

Frame1.TranslateYto (-90, duration1);
Frame1.Content.IsVisible = true; // Was formerly false
Frame1.TranslateYto (0, duration2);

而对于Frame2也是一样的并行。

所以我试过：

Device.BeginInvokeOnMainThread(() =>
{
    Animation a = new Animation();
    a.Add(0, 1, new Animation(v => frame1.RotationY = v, 0, -90));
    a.Add(0, 1, new Animation(v => frame2.RotationY = v, 0, -90));
    a.Commit(
        owner: frame1,
        name: "flip1",
        length: 50,
        finished: (x, y) =>
        {
                frame1.Content.IsVisible = false;
                frame2.Content.IsVisible = false;
        });

    a = new Animation();
    a.Add(0, 1, new Animation(v => frame1.RotationY = v, -90, 0));
    a.Add(0, 1, new Animation(v => frame2.RotationY = v, -90, 0));
    a.Commit(
        owner: frame1,
        name: "flip2",
        length: 250);
});

但它崩溃了NullReferenceExecption ...

也许有人可以对这个问题有更多的了解？

Answer 1

我在窗口中添加了两个 Frame 控件并创建了与您相同的动画，但我没有任何问题。 这是我的代码。

 <StackLayout>
        <Frame
            x:Name="frame1"
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="FillAndExpand">
            <Label
                HorizontalOptions="CenterAndExpand"
                Text="this is test!!!!!!!"
                VerticalOptions="CenterAndExpand" />
        </Frame>

        <Frame x:Name="frame2" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand">
            <Label
                HorizontalOptions="CenterAndExpand"
                Text="this is test22222222222222!!!!!!!"
                VerticalOptions="CenterAndExpand" />
        </Frame>

        <Button
            x:Name="btn1"
            Clicked="btn1_Clicked"
            HeightRequest="50"
            Text="btn1"
            WidthRequest="300" />
    </StackLayout>

 private void btn1_Clicked(object sender, EventArgs e)
    {
        Device.BeginInvokeOnMainThread(() => {
            Animation a = new Animation();
            a.Add(0, 1, new Animation(v => frame1.RotationY = v, 0, -90));
            a.Add(0, 1, new Animation(v => frame2.RotationY = v, 0, -90));
            a.Commit(
                    owner: frame1,
                    name: "flip1",
                    length: 50,
                    finished: (x, y) =>
                    {
                        frame1.Content.IsVisible = false;
                        frame2.Content.IsVisible = false;
                    });

            a = new Animation();
            a.Add(0, 1, new Animation(v => frame1.RotationY = v, -90, 0));
            a.Add(0, 1, new Animation(v => frame2.RotationY = v, -90, 0));
            a.Commit(
                    owner: frame1,
                    name: "flip2",
                    length: 250);

        });
    }