Question

我在互联网上发现了那个动画，想知道是否可以重新制作它。

到目前为止，我能实现的是缩放按钮的动画。

代码：

      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

您可以使用Animation.WithConcurrent更新CornerRadius和WidthRequest属性，以同时执行两个动画。这是一个小样本。

这是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。否则，使动画从40变为150。然后在150毫秒内触发动画。由于您的边框半径已经是20（40％的50％），因此您会得到一个漂亮的圆形按钮。

Answer 3

比较这两个动画，不同之处在于转角半径。如果您将其设置为正确的高度（高度的一半），并且将宽度设置为与高度相同，那么它将起作用。

有什么办法可以使带有动画的圆形按钮中的按钮变形

3 个答案: