Xamarin Forms登录按钮动画

Question

我使用XAML在Xamarin Forms中创建了一个类似于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>

- Mario

---

你不能直接在Xamarin Forms中进行这种动画，你必须使用本地方式实现！ - FreakyAli

请查看此链接，其中有类似的按钮动画可供使用。https://medium.com/@andkulikov/animate-all-the-things-transitions-in-android-914af5477d50 - ramya br

Answer 1

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

但是这是我如何做到的：

1. 在你想要放置按钮的地方插入一个只有1行和1列的网格。 2. 把按钮放在那个网格里。 3. 在网格中添加一个活动指示器。 4. 在网格中添加一个CircleView(你必须从BoxView派生并使用自定义渲染器使其具有圆角)。确保该CircleView与您的活动指示器具有相同的尺寸。

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

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

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

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

- Markus Michel

---

我会检查一下。感谢你的答案！ - Mario

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

- Filipe Piletti Plucenio