Cocoa: Animated path (moving dotted line)

Go To


I am making an image editing application, and need to show selection areas on the screen. In Illustrator, Photoshop, GIMP, and everything else this is shown using an animated dotted line that kind of crawls around the selection.

I need to do this same thing. How do I put an animated line like that on a view in Cocoa?

2012-04-03 21:42
by mtmurdock


Sometimes this effect is called "marching ants", if that helps you search at all.

Here's how to do it with Core Animation.

2012-04-04 06:16
by Kurt Revis
(Oops, I didn't notice that you used the "marching-ants" tag! - Kurt Revis 2012-04-04 06:28
This tutorial is for iOS, is it the same in cocoa (osx) - mtmurdock 2012-04-05 01:08
CoreAnimation works similarly in OS X, yes - Kurt Revis 2012-04-05 05:44


Usually these "crawling" lines are only a few frames of animation. Maybe only 2.

Make a custom view which is aware of the dimensions of this "selection" area. Start with just a 1px white line. Then, you can take the x & y dimensions of each pixel, mod them by the desired "size" of each "link" to determine if one particular pixel is to be black or white. Modify your decision of "black or white" current time to animate.

Alternatively, a png of a "grid" of black and transparent square could be animated as shifting diagonally on top of a solid white border line. Crop the "grid" view to only be visible directly over the border and it may accomplis that same "crawling" look. This might be an expensive way to accomplish it but maybe it will give you ideas.

2012-04-03 21:55
by snakeoil