Блог

Я создал страницу входа с помощью 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>
  

Я считаю, что это возможно сделать с помощью 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 систему анимации, чтобы адаптировать размеры элемента и активировать / деактивировать их видимые свойства в ходе вашей анимации.

Однако вот как я бы это сделал:

1. Вставьте сетку с 1 строкой и 1 столбцом там, где должна быть ваша кнопка
2. Поместите кнопку в эту сетку
3. Добавьте индикатор активности в сетку
4. Добавьте CircleView в сетку (вы должны быть производными от BoxView и использовать пользовательский рендерер, чтобы у него были закругленные углы). Убедитесь, что этот CircleView имеет те же размеры, что и ваш индикатор активности

Теперь установите значение isVisible равным false для индикатора активности и CircleView. После нажатия кнопки входа в систему вы можете присвоить тексту кнопки пустую строку и использовать пользовательскую анимацию (см. https://learn.microsoft.com/de-de/xamarin/xamarin-forms/user-interface/animation/custom ) для анимации уменьшения ширины или левого и правого полей вашей кнопки до тех пор, пока она не сузится настолько, что ее закругленные углы образуют круг и соответствуют размеру индикатора активности.

Вы можете использовать готовый делегат пользовательской анимации, чтобы установить для свойства isVisible для кнопки значение false, а для индикатора активности значение true.

Как только ваша процедура входа в систему (я полагаю, вы отправите какой-то запрос и получите данные из ответа) будет завершена, установите для вашего индикатора активности значение isVisible равным false, для circleview — true, а затем используйте другую пользовательскую анимацию, чтобы анимировать ширину и высоту circleview.

Также убедитесь, что свойству IsClippedToBounds вашей сетки присвоено значение false, поскольку в противном случае круговой вид не сможет расширяться за пределы содержащей его сетки.