英文:
How to animate colors in .net maui?
问题
如何正确地执行颜色动画？我试图使用 Animation 类来执行 Button.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);
}
}
}
英文:
How to correctly animate colors? I am trying to animate Button.BackgroundColor with Animation class, but when I press the button, the color immediately turns white, bypassing the intermediate states. Why is this happening?
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);
}
}
}
答案1
得分: 1
你需要在动画的TriggerAction中定义Button的BackgroundColor的初始值，然后将其设置为另一个值。以下示例演示如何将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>
Code-behind:
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);
}
英文:
You need to define the initial value of BackgroundColor of the Button and then set it to another value in TriggerAction during animation.
The below example shows how to animate the BackgroundColor from Colors.Red to Colors.AliceBlue:
XAML:
<Button Text="click me"
BackgroundColor="Red"
TextColor="White">
<Button.Triggers>
<EventTrigger Event="Clicked">
<local:ButtonAnimation/>
</EventTrigger>
</Button.Triggers>
</Button>
Code-behind:
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);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论