Xamarin表单登录按钮动画

我已经用XAML创建了一个类似于gif格式的登录页面。现在我想像示例中那样设置按钮的动画。我从来没有用Xamarin的形式制作过任何动画，所以我不知道如何实现这样的过渡。有人能解释一下我怎样才能让按钮缩小成一个圆圈，变成一个正在加载的动画吗

该按钮当前看起来如下所示：

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

---

据我所知，在Xamarin表单中，只需一个按钮是无法做到这一点的。 这将需要更多的元素添加到页面中。然后，可以使用Xamarin的内置动画系统来调整元素的尺寸，并在动画过程中激活/禁用其IsVisible属性

但是，我会这样做：

在按钮应该位于的位置插入一个包含一行一列的网格

把按钮放在那个格子里

将活动指示器添加到网格中

将CircleView添加到网格中（必须从BoxView派生，并使用自定义渲染器使其具有圆角）。确保CircleView的维度与活动指示器的维度相同

现在，将活动指示器和CircleView的IsVisible设置为false。 单击登录按钮后，可以将按钮文本设置为空字符串，并使用自定义动画（请参见）设置按钮宽度或左右边距的动画，直到按钮缩小到圆角形成圆形并与活动指示器的大小匹配为止

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

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

---

还要确保网格的IsClippedToBounds属性设置为false，否则圆视图将无法超出其包含的网格。

我相信使用Xamanimation可以做到这一点，我不确定这是否是最好的方法。另一种可能性是使用动画，我推荐洛蒂

如果您要使用Xamanimation

    xmlns:xamanimation="clr-namespace:Xamanimation;assembly=Xamanimation"

    <ContentPage.Resources>
            <ResourceDictionary>                
                <xamanimation:StoryBoard x:Key="Animation1"
                                         Target="{x:Reference Button1}">
                    <xamanimation:FadeToAnimation Opacity="1" Duration="1500" Easing="Linear"/>
                    <xamanimation:FadeToAnimation Opacity="0" Duration="1500" Easing="Linear"/>
                </xamanimation:StoryBoard>
                <xamanimation:StoryBoard x:Key="Animation2"
                                         Target="{x:Reference Button1}">
                    <xamanimation:FadeToAnimation Opacity="1" Delay="3000" Duration="1500" Easing="Linear"/>
                    <xamanimation:FadeToAnimation Opacity="0" Duration="1500" Easing="Linear"/>
                </xamanimation:StoryBoard>
    </ResourceDictionary>
</ContentPage.Resources>

或者你可以用洛蒂

---

您不能直接在Xamarin表单中制作此类动画，您必须以本机方式制作！检查此链接类似的按钮动画是否存在，您可以使用此链接。我来看看。谢谢你的回答！

<Button x:Name="Button1"
        Opacity="0"/>

protected override void OnAppearing()
        {
            if (Resources["Animation1"] is StoryBoard storyBoardText1)
                storyBoardText1.Begin();
            if (Resources["Animation2"] is StoryBoard storyBoardText2)
                storyBoardText2.Begin();
            base.OnAppearing();
        }