在 Xamarin Forms 中按比例动画调整框视图的大小

Question

在我的共享项目中，我需要通过单击按钮来调整 BoxView 的大小。它应该最好在不占用 space 和按比例占用任何屏幕尺寸的 25% 之间切换，为此我通常使用 AbsoluteLayout.

我试过使用 AbsoluteLayout 和 LayoutTo，但由于 LayoutTo 以像素为单位运行，所以我无法按比例调整大小。

然后我更改了我的解决方案以利用 Grid 和自定义动画，如下面的代码所示。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AnimationTest"
             x:Class="AnimationTest.MainPage">
    <Grid ColumnSpacing="0" RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="9*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" x:Name="LeftColumn"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>

        <BoxView Color="DarkMagenta" Grid.Row="0" Grid.Column="0"/>

        <Button Text="Animate" Grid.Row="1" Grid.Column="1" Clicked="Button_Clicked"/>

    </Grid>
</ContentPage>

和代码隐藏

namespace AnimationTest
{
    public partial class MainPage : ContentPage
    {
        Animation _animation;
        bool _boxCollapsed = false;

        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            switch (_boxCollapsed)
            {
                case true:
                    _animation = new Animation(
                    (d) => LeftColumn.Width = new GridLength(1, GridUnitType.Star));
                    _animation.Commit(this, "the animation", 16, 1000, Easing.SinIn, null, null);
                    _boxCollapsed = false;
                    break;
                case false:
                    _animation = new Animation(
                    (d) => LeftColumn.Width = new GridLength(0, GridUnitType.Star));
                    _animation.Commit(this, "the animation", 16, 1000, Easing.SinIn, null, null);
                    _boxCollapsed = true;
                    break;
            }
        }
    }
}

虽然这提出了两个问题。

虽然目前这不是问题，但此解决方案显然会调整整个列的大小，而不仅仅是 BoxView，这可能会在后期阶段成为问题。第二个问题是它似乎忽略了 Easing 参数，只是立即在两个宽度之间移动而没有实际动画。

我希望至少有人能告诉我关于 Easing 的问题是什么，或者想出一个不同的、希望更优雅的解决方案。

Answer 1

你只需要稍微改变一下动画线上的代码，我已经给你提示了如何获得 25% 的屏幕尺寸。希望对你有帮助。

private void Button_Clicked(object sender, EventArgs e)
    {
        var twentyFivePercentOfScreen = this.Width * .25;

        switch (_boxCollapsed)
        {
            case true:
                _animation = new Animation(
                    (d) => LeftColumn.Width = d, 0, twentyFivePercentOfScreen);
                _animation.Commit(this, "the animation", 16, 250, Easing.SinIn, null, null);
                _boxCollapsed = false;
                break;
            case false:
                _animation = new Animation(
                    (d) => LeftColumn.Width = d, twentyFivePercentOfScreen, 0);
                _animation.Commit(this, "the animation", 16, 250, Easing.SinIn, null, null);
                _boxCollapsed = true;
                break;
        }
    }

在 Xamarin Forms 中按比例动画调整框视图的大小

Animating the resizing of a boxview proportionally in Xamarin Forms

animation

easing

xamarin.forms