如何在.net maui动画颜色?

Question

如何正确地动画颜色?我试图动画按钮。写成BackgroundColor与动画类，但是当我按下按钮时，颜色立即变为白色，绕过中间状态。为什么会发生这种情况?

namespace BucketList
{
class ButtonAnimation : TriggerAction<Button>
{
protected override async void Invoke(Button sender)
{
var animation = new Animation()
{
{ 0, 1, new Animation((x) => sender.FontSize = x, 20, 32) },
{ 0, 1, new Animation((x) => sender.Rotation = x, 0, 360, easing: Easing.SpringIn) },
{ 0, 1, new Animation((x) => sender.BackgroundColor = Color.FromRgb(x, x, x), 0, 255) }
};
animation.Commit(sender, "ComplexAnimation", length: 2500, repeat: () => true);
}
}
}

Answer 1

您需要定义Button的BackgroundColor的初始值，然后在动画过程中将其设置为TriggerAction中的另一个值。

下面的例子展示了如何将BackgroundColor从Colors.Red动画到Colors.AliceBlue:

XAML:

<Button Text="click me" 
BackgroundColor="Red"
TextColor="White">
<Button.Triggers>
<EventTrigger Event="Clicked">
<local:ButtonAnimation/>
</EventTrigger>
</Button.Triggers>
</Button>

后台代码:

protected override void Invoke(Button sender)
{
var animation = new Animation()
{
{ 0, 1, new Animation((x) => sender.FontSize = x, 20, 32) },
{ 0, 1, new Animation((x) => sender.Rotation = x, 0, 360, easing: Easing.SinOut) },
{ 0, 1, new Animation((x) => sender.BackgroundColor = Colors.White,0,0) }
};
await Task.Delay(700);
animation.Commit(sender, "ComplexAnimation", length: 5000, repeat: () => true);

}