C# 可重用标签动画弄乱堆栈布局

每次单击按钮时，我都调用此方法。 这将设置文本标签的动画，使其从屏幕底部移动到顶部

出于某种原因，我必须创建一个新标签并将其添加到stacklayout子项中，因为如果我不这样做，该动画将只发生一次，并且不会重复

目前，这种代码可以正常工作，但它会在动画期间上下推页面上的所有控件。 我还希望能够有按钮按下多次，这应该允许多个标签在同一时间向上动画

但在动画过程中，它会上下推页面上的所有控件

 ViewExtensions.CancelAnimations(movingLabel);

因为单击按钮时，标签是在按钮下创建的。这就是为什么页面上的所有控件都会向上移动。动画制作完成后，新标签被移除。所以这一页就往下看

在xaml中创建标签，并使用代码创建上下标签

xaml:

private async void moveMessage()
    {
        movingLabel = new Label();
        movingLabel.HorizontalTextAlignment = TextAlignment.Center;
        stackLayoutContainingMovingText.Children.Add(movingLabel);

        Animation animation = new Animation();
        double height = Application.Current.MainPage.Height;
        movingLabel.Text = "MESSAGE";

        animation.Commit(movingLabel, "animation", 20, 0, Easing.Linear, (d, f) =>
        {
            movingLabel.TranslateTo(0, height, 0, Easing.Linear);
            movingLabel.TranslateTo(0, -height, 2000, Easing.Linear);
        });

        await Task.Delay(2000);

        stackLayoutContainingMovingText.Children.Remove(movingLabel);

    }

 <StackLayout x:Name="stackLayoutContainingMovingText">

    <!--  Place new controls here  -->
    <Label
        x:Name="movingLabel"
        HorizontalOptions="Center"
        Text="Welcome to Xamarin.Forms!"
        VerticalOptions="EndAndExpand" />

    <Button
         HorizontalOptions="EndAndExpand"
        x:Name="btn_Move"
        Clicked="btn_Move_Clicked"
        Text="Move" />
</StackLayout>

屏幕截图：

private async void moveMessage()
    {
        movingLabel = new Label();
        movingLabel.HorizontalTextAlignment = TextAlignment.Center;
        stackLayoutContainingMovingText.Children.Add(movingLabel);

        Animation animation = new Animation();
        double height = Application.Current.MainPage.Height;
        movingLabel.Text = "MESSAGE";

        animation.Commit(movingLabel, "animation", 20, 0, Easing.Linear, (d, f) =>
        {
            movingLabel.TranslateTo(0, height, 0, Easing.Linear);
            movingLabel.TranslateTo(0, -height, 2000, Easing.Linear);
        });

        await Task.Delay(2000);

        stackLayoutContainingMovingText.Children.Remove(movingLabel);

    }

 <StackLayout x:Name="stackLayoutContainingMovingText">

    <!--  Place new controls here  -->
    <Label
        x:Name="movingLabel"
        HorizontalOptions="Center"
        Text="Welcome to Xamarin.Forms!"
        VerticalOptions="EndAndExpand" />

    <Button
         HorizontalOptions="EndAndExpand"
        x:Name="btn_Move"
        Clicked="btn_Move_Clicked"
        Text="Move" />
</StackLayout>

更新：

private async void moveMessage()
    {
        movingLabel = new Label();
        movingLabel.HorizontalTextAlignment = TextAlignment.Center;
        stackLayoutContainingMovingText.Children.Add(movingLabel);

        Animation animation = new Animation();
        double height = Application.Current.MainPage.Height;
        movingLabel.Text = "MESSAGE";

        animation.Commit(movingLabel, "animation", 20, 0, Easing.Linear, (d, f) =>
        {
            movingLabel.TranslateTo(0, height, 0, Easing.Linear);
            movingLabel.TranslateTo(0, -height, 2000, Easing.Linear);
        });

        await Task.Delay(2000);

        stackLayoutContainingMovingText.Children.Remove(movingLabel);

    }

 <StackLayout x:Name="stackLayoutContainingMovingText">

    <!--  Place new controls here  -->
    <Label
        x:Name="movingLabel"
        HorizontalOptions="Center"
        Text="Welcome to Xamarin.Forms!"
        VerticalOptions="EndAndExpand" />

    <Button
         HorizontalOptions="EndAndExpand"
        x:Name="btn_Move"
        Clicked="btn_Move_Clicked"
        Text="Move" />
</StackLayout>

如果要取消动画，可以使用

ViewExtensions.CancelAnimations

  private void btn_Move_Clicked(object sender, EventArgs e)
    {
        moveMessage();
    }

    private async void moveMessage()
    {  
        double up = Application.Current.MainPage.Height;
        double down = movingLabel.Height;

        await movingLabel.TranslateTo(0, -up, 2000, Easing.Linear);
        await movingLabel.TranslateTo(0, down, 2000, Easing.Linear);
    }

当您将此“取消”按钮放入下面的“单击”按钮时，它将停止当前动画

 ViewExtensions.CancelAnimations(movingLabel);

屏幕截图：

private async void moveMessage()
    {
        movingLabel = new Label();
        movingLabel.HorizontalTextAlignment = TextAlignment.Center;
        stackLayoutContainingMovingText.Children.Add(movingLabel);

        Animation animation = new Animation();
        double height = Application.Current.MainPage.Height;
        movingLabel.Text = "MESSAGE";

        animation.Commit(movingLabel, "animation", 20, 0, Easing.Linear, (d, f) =>
        {
            movingLabel.TranslateTo(0, height, 0, Easing.Linear);
            movingLabel.TranslateTo(0, -height, 2000, Easing.Linear);
        });

        await Task.Delay(2000);

        stackLayoutContainingMovingText.Children.Remove(movingLabel);

    }

 <StackLayout x:Name="stackLayoutContainingMovingText">

    <!--  Place new controls here  -->
    <Label
        x:Name="movingLabel"
        HorizontalOptions="Center"
        Text="Welcome to Xamarin.Forms!"
        VerticalOptions="EndAndExpand" />

    <Button
         HorizontalOptions="EndAndExpand"
        x:Name="btn_Move"
        Clicked="btn_Move_Clicked"
        Text="Move" />
</StackLayout>

---

我认为当您在堆栈布局中添加标签时，其他控件会向上移动，因为它包含的空间。你能分享你的XAML吗？谢谢，这解决了部分问题，但是如果你点击移动按钮太快，它会完全破坏动画，直到你重新加载页面才起作用。如果在动画运行时单击按钮，是否有方法取消动画并使其重新启动？