Xamarin.Forms iOS Create animation using images

Question

I work on Xamarin.Fomrs shared project. I want to display multiple images at same place with 100 ms interval. So that it will look like a GIF. In Android It is working. I created drawable file and in that I have put all the images with time interval. But in iOS, I am facing problem.

I found CAKeyFrameAnimation is used to implement this type of functionality. But I couldn't find how to implement it as I want.

I have implemented CAKeyFrameAnimation in ImageRenderer like this

 class AnimatedImageRenderer : ImageRenderer
    {
        public AnimatedImageRenderer() { }
        Animation objAnimation = new Animation();
        protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                try
                {
                    CAKeyFrameAnimation anim = CAKeyFrameAnimation.FromKeyPath("contents");

                    anim.Duration = 1;
                    //anim.KeyTimes = new[] {
                    //                NSNumber.FromDouble (0),    // FIRST VALUE MUST BE 0
                    //                NSNumber.FromDouble (0.1),
                    //                NSNumber.FromDouble(0.2),
                    //                NSNumber.FromDouble(0.3),
                    //                NSNumber.FromDouble(0.5),
                    //                NSNumber.FromDouble(0.6),
                    //                NSNumber.FromDouble(0.8),
                    //                NSNumber.FromDouble(1.0),   // LAST VALUE MUST BE 1
                    //                };
                    anim.Values = new NSObject[] {
                                    FromObject(UIImage.FromFile("bomb1.png")),
                                    FromObject(UIImage.FromFile("bomb2.png")),
                                    FromObject(UIImage.FromFile("bomb3.png")),
                                    FromObject(UIImage.FromFile("bomb4.png")),
                                    FromObject(UIImage.FromFile("bomb5.png")),
                                    FromObject(UIImage.FromFile("bomb6.png")),
                                    FromObject(UIImage.FromFile("bomb7.png")),
                                    };
                    //anim.TimingFunction = CAMediaTimingFunction.FromName(CAMediaTimingFunction.Linear);
                    anim.RepeatCount = 1;
                    anim.RemovedOnCompletion = false;
                    //anim.CalculationMode = CAAnimation.AnimationLinear;
                    //c.Init();
                    Control.Layer.AddAnimation(anim, "bomb");

                }
                catch (System.Exception ex)
                {
                    System.Diagnostics.Debug.WriteLine(ex.Message);
                    // ModCommon.TraceLog("AnimatedImageRenderer tm_Tick" + ex.Message);
                }
            }
        }
}

I don't know what extra property is missing. Please guide me.

Thank you :)

Answer 1

You should use CGImage instead of UIImage. Change your animation's value to:

anim.Values = new NSObject[] {
                FromObject(UIImage.FromFile("bomb1.png").CGImage),
                FromObject(UIImage.FromFile("bomb2.png").CGImage),
                FromObject(UIImage.FromFile("bomb3.png").CGImage),
                FromObject(UIImage.FromFile("bomb4.png").CGImage),
                FromObject(UIImage.FromFile("bomb5.png").CGImage),
                FromObject(UIImage.FromFile("bomb6.png").CGImage),
                FromObject(UIImage.FromFile("bomb7.png").CGImage),
                };