animation

Turning a Sequence of PNGs into a Basic Animation with Flash

On a recent project, I had a team of Atomic developers come to me with an animation problem. They wanted to animate an icon, but they wanted it to be a series of PNGs. This post will review the process we took in finding a tool to create the animations and a few key pointers I learned along the way to improve the look of the animation.

Finding the Right Tools

My first thought was to use Apple’s Quartz Composer, where I have been prototyping most of my interactions and animations lately. I even found a cool patch plugin (Quartz Composer ImageExporter) that would record the animation and save a series of PNGs. But there was a big drawback: I couldn’t change the frames per second. This caused the playback to be choppy like a flip book missing every other page. By this stage in the process, I had a rough mockup of how we wanted to animate the icons, as Quartz Composer make it pretty easy with a few patch libraries like Origami (Facebook) and Avocado (IDEO). Read more on Turning a Sequence of PNGs into a Basic Animation with Flash…

Visualizing Garbage Collection Algorithms

Most developers take automatic garbage collection for granted. It’s just another amazing feature provided by our language run-times to make our jobs easier.

But if you try to peek inside a modern garbage collector, it’s very difficult to see how they actually work. There are thousands of implementation details that will confuse you unless you already have a good understanding of what it’s trying to do and how they can go fantastically wrong.

I’ve built a toy with five different garbage collection algorithms. Small animations were created from the run-time behavior. You can find larger animations and the code to create them at github.com/kenfox/gc-viz. It surprised me how much a simple animation reveals about these important algorithms.

Cleanup At The End: aka No GC

The simplest possible way of cleaning up garbage is to just wait until a task is done and dispose of everything at once. This is a surprisingly useful technique, especially if you have a way of breaking up a task into pieces. The Apache web server, for example, creates a small pool of memory per request and throws the entire pool away when the request completes.

The small animation to the right represents a running program. The entire image represents the program’s memory. Memory starts out colored black, which means it isn’t used. Areas that flash bright green or yellow are memory reads or writes. The color decays over time so you can see how memory was used, but also see current activity. If you watch carefully, you can see patterns emerge where the program begins to ignore some memory. Those areas have become garbage — they are not used and not reachable by the program. Everything else that isn’t garbage is “live”. Read more on Visualizing Garbage Collection Algorithms…

How to Animate Images in a UIImageView with Completion Handler

I needed to do a simple animation on my iOS project recently, and I was frustrated by how difficult it turned out to be. I wasn’t writing a game, so I didn’t need to bring in the power of the Sprite Kit libraries. All I needed was to show a series of images in a UIImageView.  

My first attempt was to use the UIImageView.animationImages api to do my animation. This was incredibly easy, but very limiting. After the animation was complete, I needed to show the last frame of the animation in the UIImageView. This proved to be very difficult if not impossible with the animationImages API. After the animation completes, the UIImageView is reset to the original image that was displayed before the animation started. If my animation had been symmetric, it would not have been a problem.

Attempt #1 – Using the AnimationImages Property for Animation

This API is really simple. Load up a series of images in an array and set the UIImageView.animationImages property to that array of images. Next tell the UIImageView how long your animation is and whether to repeat the animation and call start. It is that easy. Read more on How to Animate Images in a UIImageView with Completion Handler…