Animate multiple shapes in UIView

Question

I have a custom class that inherit from UIView. In the draw method I draw several shapes including some circles. I want to animate the color (now stroke color) of the circles independent of each other, e.g. I would like the color of one or more the circles to "pulse" or flash (using ease-in/ease-out and not linearly).

What would be the best way to archive this?

It would be great to be able to use the built-in animation code (CABasicAnimation and the like) but I'm not sure how?

EDIT: Here's the code involved. (I am using Xamarin.iOS but my question is not specific to this).

    CGColor[] circleColors;

    public override void Draw (RectangleF rect)
    {
        base.Draw (rect);
        using (CGContext g = UIGraphics.GetCurrentContext ()) {
            g.SetLineWidth(4);
            float size = rect.Width > rect.Height ? rect.Height : rect.Width;
            float xCenter = ((rect.Width - size) / 2) + (size/2);
            float yCenter = ((rect.Height - size) / 2) + (size/2);
            float d = size / (rws.NumCircles*2+2);
            var circleRect = new RectangleF (xCenter, yCenter, 0, 0);
            for (int i = 0; i < rws.NumCircles; i++) {
                circleRect.X -= d;
                circleRect.Y -= d;
                circleRect.Width += d*2;
                circleRect.Height += d*2;
                CGPath path = new CGPath ();
                path.AddEllipseInRect (circleRect);
                g.SetStrokeColor (circleColors [i]);
                g.AddPath (path);
                g.StrokePath ();
            }
        }
    }

Post your code and we'll be able to better help you. – Guy Kogus Nov 24 '14 at 17:24 — Guy Kogus, Nov 24 '14 at 17:24

score 0 · Answer 1 · edited May 23 '17 at 12:12

You need to move all your drawing code to a subclass of CALayer, and decide parameters which, once varied, will produce the desired animations. Convert these parameters to the layer's properties, and you can animate the layer's properties with CABasicAnimation (or even [UIView animateXXX]).

See this SO question for more information.

Make sure that you set the layer's rasterizationScale to [UIScreen mainScreen].scale to avoid blurs on Retina.

Animate multiple shapes in UIView

1 Answers1