Xamarin表单登录按钮动画

Question

我在Xamarin Forms中使用XAML创建了一个类似于gif中的XAML的登录页面。现在我想像示例中那样为按钮设置动画。我从来没有在Xamarin Forms中制作任何动画，所以我不知道如何获得这样的过渡。任何人都可以解释我如何让按钮缩小到圆形并成为加载动画？

按钮目前看起来像这样：

<Button Text="Login" Style="{StaticResource LoginFormButton}" />

<!-- LoginFormButton is defined in App.xaml -->
       <Style x:Key="LoginFormButton" TargetType="Button">
            <Setter Property="FontSize" Value="18" />
            <Setter Property="TextColor" Value="{ StaticResource bgColor }" />
            <Setter Property="BorderRadius" Value="25" />
            <Setter Property="BackgroundColor" Value="White" />
        </Style>

Answer 1

据我所知，你只能用一个按钮就不能在Xamarin Forms中做到这一点。这需要您添加到页面中的几个元素。然后，您可以使用Xamarin的内置动画系统来调整元素的尺寸，并在动画过程中激活/停用它们的IsVisible属性。

但是我会这样做：

1. 插入一行，其中包含1行和1列的按钮
2. 将按钮放在该网格中
3. 将活动指示符添加到网格中
4. 将CircleView添加到网格中（您必须从BoxView派生并使用自定义渲染器使其具有圆角）。确保CircleView与活动指示符具有相同的尺寸

现在将活动指示器和CircleView的IsVisible设置为false。单击登录按钮后，您可以将按钮的文本设置为空字符串，并使用自定义动画（请参阅https://docs.microsoft.com/de-de/xamarin/xamarin-forms/user-interface/animation/custom）为按钮的宽度或左右边距设置动画，直到其缩小到目前为止圆角形成一个圆圈，并与活动指示器的大小相匹配。

您可以使用自定义动画的完成委托将按钮的IsVisible属性设置为false，将活动指示器设置为true。

一旦您的登录程序（我想您将发送某种请求并使用响应中的数据）完成，请将活动指示器的IsVisible设置为false，将circleview设置为true，然后使用另一个自定义动画设置动画。圆视图的宽度和高度。

还要确保网格的IsClippedToBounds属性设置为false，否则圆形视图将无法在其包含网格之外生长。