Xamarin 上的 FadeIn/FadeOut 背景颜色动画答案

【问题标题】：FadeIn/FadeOut background color animation on XamarinXamarin 上的 FadeIn/FadeOut 背景颜色动画
【发布时间】：2020-08-23 13:28:28
【问题描述】：

我正在尝试使 Frame 在其背景颜色上具有 FadeIn/FadeOut 的无限循环效果。发生的情况是只有第一个动画被播放和重复，第二个被忽略。

我想要什么：

Alpha：0.5 渐变到 1 THEN 从 1 渐变到 0.5 THEN 重复所有过程；

发生了什么：

Alpha：0.5 渐变到 1 THEN 重复；

new Animation(callback: v => BackgroundColor = Color.FromRgba(183, 226, 241, v), start: 0.5, end: 1).
Commit(this, "Animation", 16, 4000, Easing.Linear, (v, c) =>
{
   new Animation(callback: d => BackgroundColor = Color.FromRgba(183, 226, 241, d), start: 1, end: 0.5).
   Commit(this, "Animation2", 16, 4000, Easing.Linear, (d, x) => 
      BackgroundColor = Color.FromRgba(183, 226, 241, d),() => false);

},()=>true);

我已经阅读了有关 .Commit 的文档，但有点混乱。

【问题讨论】：

我没有看到你循环的代码
最后一个参数()=>true 告诉动画在完成时重复。

标签： c# xamarin animation

【解决方案1】：

我用你的代码在我身边，但是我对Page没有效果，如果你想改变背景颜色并重复，我建议你可以使用Custom Animations in Xamarin.Forms的ViewExtensions

public static class ViewExtensions
{
 public static Task<bool> ColorTo(this VisualElement self, Color fromColor, Color toColor, Action<Color> callback, uint length = 250, Easing easing = null)
{
Func<double, Color> transform = (t) =>
  Color.FromRgba(fromColor.R + t * (toColor.R - fromColor.R),
                 fromColor.G + t * (toColor.G - fromColor.G),
                 fromColor.B + t * (toColor.B - fromColor.B),
                 fromColor.A + t * (toColor.A - fromColor.A));
return ColorAnimation(self, "ColorTo", transform, callback, length, easing);
}

public static void CancelAnimation(this VisualElement self)
{
self.AbortAnimation("ColorTo");
}

static Task<bool> ColorAnimation(VisualElement element, string name, Func<double, Color> transform, Action<Color> callback, uint length, Easing easing)
{
easing = easing ?? Easing.Linear;
var taskCompletionSource = new TaskCompletionSource<bool>();

element.Animate<Color>(name, transform, callback, 16, length, easing, (v, c) => taskCompletionSource.SetResult(c));
return taskCompletionSource.Task;
}
}

然后你可以像下面的代码一样重复一次：

 while(true)
        {
          await  this.ColorTo(Color.FromRgb(0, 0, 0), Color.FromRgb(255, 255, 255), c => BackgroundColor = c, 5000);
          await this.ColorTo(Color.FromRgb(255, 255, 255), Color.FromRgb(0, 0, 0), c => BackgroundColor = c, 5000);
        }

【讨论】：