Xamarin Forms 登录按钮动画

Question

我在 Xamarin Forms 中使用 XAML 创建了一个类似于 gif 中的登录页面。现在我想像示例中那样为按钮设置动画。我从来没有在 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 的内置动画系统在动画过程中调整元素的尺寸和 activate/deactivate 它们的 IsVisible 属性。

但是我会这样做：

在按钮应该位于的位置插入 1 行 1 列的网格
将按钮放在该网格中
在网格中添加一个 activity 指标
将 CircleView 添加到网格中（您必须从 BoxView 派生并使用自定义渲染器使其具有圆角）。确保 CircleView 的尺寸与 activity 指示器

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

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

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

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

Answer 2

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

如果您要使用 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>

组件必须命名

<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();
        }

或者您可以使用 Lottie

https://lottiefiles.com/featured

https://lottiefiles.com/1894-submit-check-mark

Xamarin Forms 登录按钮动画

Xamarin Forms Login Button Animation

xamarin

animation

login

xamarin.forms

lottie