Анимация кнопки входа в Xamarin Forms - PullRequest
Новая
       38

Анимация кнопки входа в Xamarin Forms

2 голосов
/ 12 марта 2019

Я создал страницу входа с XAML в формах Xamarin, аналогичную той, что в 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>

Login Animation

1 Ответ

1 голос
/ 12 марта 2019

Насколько я знаю, вы не можете сделать это в формах Xamarin только с помощью кнопки.Для этого потребуется добавить еще пару элементов на свою страницу.Затем вы можете использовать встроенную систему анимации Xamarin, чтобы адаптировать размеры элемента и активировать / деактивировать их свойства IsVisible во время вашей анимации.

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

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

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

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

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

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

...