Есть ли способ, как я могу превратить кнопку в круг кнопку с анимацией

Question

Я обнаружил, что анимация в inte rnet, и мне было интересно, смогу ли я ее воссоздать.

Пока что я смог добиться анимации кнопки. в масштабе.

Код:

      if (Button1.ScaleX < 1)
      {
        await Button1.ScaleXTo(1);
      }
      else
      {

        await Button1.ScaleXTo(0.25);
      }

Кнопка:

<Button x:Name="Button1" Grid.Row="1" Clicked="Button1_Clicked" AnchorX="0.5" WidthRequest="70" HeightRequest="40" BorderRadius="20"/>

Мой вопрос: как сделать так, чтобы кнопка стала круг за шкалой?

Answer 1

Вы можете обновить свойства CornerRadius и WidthRequest, используя Animation.WithConcurrent, чтобы выполнять обе анимации одновременно. это небольшой пример.

это код Xaml.

      <Button
            x:Name="animatedButton"
            BackgroundColor="Red"
            Clicked="AnimatedButton_Clicked"
            CornerRadius="0"
            HeightRequest="40"
            HorizontalOptions="CenterAndExpand"
            WidthRequest="100" />

Это код .cs

    private void AnimatedButton_Clicked(System.Object sender, System.EventArgs e)
    {
        CreateAnimation();
    }

    private void CreateAnimation()
    {
        var animation = new Animation();

        animation.WithConcurrent(
           (f) => animatedButton.CornerRadius = (int)f, 0, 20, Easing.Linear, 0, 1);

        animation.WithConcurrent(
          (f) => animatedButton.WidthRequest = (int)f, 100, 40, Easing.Linear, 0, 1);

        animatedButton.Animate("CreateAnimation", animation, 16, 500, easing: Easing.Linear);
    }

Answer 2

Предполагая, что радиус вашей границы уже установлен на 50% от высоты и ширины после его уменьшения, все, что вам нужно сделать, анимировать ширину кнопки.

XAML

<StackLayout>
    <Button
        x:Name="Button1"
        BorderRadius="20"
        Clicked="Button1_Clicked"
        HeightRequest="40"
        HorizontalOptions="CenterAndExpand"
        VerticalOptions="CenterAndExpand"
        WidthRequest="150" />
</StackLayout>

Код позади

private void Button1_Clicked(object sender, EventArgs e)
{
    var changeWidthAnimation = Button1.Width == 150
        ? new Animation(b => Button1.WidthRequest = b, 150, 40)
        : new Animation(b => Button1.WidthRequest = b, 40, 150);

    changeWidthAnimation.Commit(this, nameof(changeWidthAnimation), 16, 150, Easing.Linear);
}

Пояснение

Этот метод запускается при каждом нажатии кнопки. Он определяет анимацию на основе текущей ширины кнопки. Если текущая ширина кнопки равна 150, настройте анимацию для изменения ширины с 150 на 40. В противном случае установите анимацию go с 40 на 150. Затем запустите анимацию в течение 150 миллисекунд. Поскольку радиус вашей границы уже составляет 20 (50% от 40), вы заканчиваете с хорошей круглой кнопкой.

Answer 3

Сравнивая эти две анимации, разница в радиусе угла. Если вы установите правильный уровень (половину высоты) и небольшую ширину, равную высоте, он будет работать.