FadeIn/FadeOut background color animation on Xamarin

Issue

I'm trying to make a Frame have an infinite loop effect of FadeIn/FadeOut on its background color. What happens is that only the first animation is played and repeated, the second one is ignored.

What I want:

Alpha: 0.5 fades to 1 THEN from 1 fades to 0.5 THEN repeat all proccess;

What is happening:

Alpha: 0.5 fades to 1 THEN repeat;

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);

I have read the documentation about .Commit but it's a little bit confuse.

Solution

I use your code at my side, but I have no effect for Page, if you want to change background color and repeat, I suggest you can use ViewExtensions from Custom Animations in Xamarin.Forms

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;
}
}

Then you can do one repeat like the following code:

 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);
        }

Answered By - Cherry Bu - MSFT