Claireware Software

Software for Your Mac and iPhone

Custom Animation with Sound - Take 2

I am developing a new iOS app where I needed an easy way to animate image sequences, move them, and have sound coordinated with it all. An additional goal of mine was to allow me to configure animations easily in a plist. My first attempt at doing this was functional, but it did not use CAAnimation to control the image sequence. Instead, it used NSTimer's to control the image changes. Furthermore, it used the CALayer drawRect: method to display images rather than simply setting the CALayer content property.

But, I didn't program things that way on a whim. It was important that I had sound play and image transition coordinated. CAAnimation offers no direct way to do this. So, I figured if I controlled exactly when the image transitioned, I can control when the sound played. However, performance wasn't the best, especially when I had 20+ of this layers playing at the same time. Loading up the CFRunLoop with a large number of quickly firing NSTimer objects slows everything down.

So I rewrote the MKSoundCoordinatedAnimationLayer class to use CAAnimation internally to coordinate everything - well, almost everything. The sound play is still managed through NSTimer objects. CAAnimation just doesn't offer a direct way to coordinate something against an animation.

If you are looking for an easy to use class for setting up and managing image sequence animations, check out MKSoundCoordinatedAnimationLayer. Key features are:

  • Animations are completely configured from NSDictionary that can be loaded from a plist file.
  • Frames can have specific timing rather than being equally spaced through the overall duration.
  • Looping translations and rotating sequences can be specified as part of or independently of an image frame transition.
  • Sound play is precisely timed (as well as an NSTimer can precisely time) against the animation loop.
  • Animation play can be controlled by loop count or play duration.
  • An optional NSInvocation can be fired when the animation play is complete, which is useful for sequencing actions.

Check out the code on GitHub.
blog comments powered by Disqus
Site logo
Claireware Software
© 2009-2012 Michael Kamprath • Privacy PolicyLegalContact