Я узнал эту анимацию в интернете и подумал, смогу ли я ее воссоздать.

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

Код:

      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"/>

У меня вопрос, как сделать так, чтобы кнопка стала кругом после шкалы?

1
Cursed 10 Фев 2020 в 17:53

2 ответа

Вы можете обновить свойства 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);
    }
1
Ricardo Romo 10 Фев 2020 в 16:25

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

0
Ivan Ičin 10 Фев 2020 в 15:16