For a recent project involving speech recognition, I was interested in analyzing how the different animations and transitions in the Siri interface were constructed. Specifically I wanted to know how Apple managed to make the transitions between the recording button and the sine wave animation look so smooth.
The difficulty in analyzing these transitions is that they take place in fractions of a second, so at 60fps is it impossible to see what is going on in each frame of the animation. I needed to somehow slow the animation down.
As it turns out, this is a relatively simple task, because with iOS 8 and OS X Yosemite, QuickTime allows us to make a screen recording from a connected iOS device. When you have the video in Quicktime, you can view each individual frame by using the arrow keys to skip back and forth. This will allow you to see how beautifully intricate these transitions really are.
If you want to turn the screen recording into an animated GIF, like I've done for these examples, you can use FFmpeg and ImageMagick from the command line to speed up the process. These are the steps I followed:
Convert .mov to image sequence:
ffmpeg -i "input.mov" frames/image%d.png
Convert image sequence to animated GIF:
convert -delay 60 -loop 0 frames/image*.png output.gif
Crop GIF image to appropriate size:
convert output.gif -coalesce -repage 0x0 -crop 640x200+0+936 +repage cropped_output.gif
You'll need to adjust the parameters here to get the right crop for your purpose. The
crop parameter is defined as