Chapter 13. Animation and behaviors

 

This chapter covers

  • Providing interactive animations
  • Using keyframes
  • Using and creating easing functions
  • Working with and creating behaviors

Believe it or not, there once was a time when I had to cower in my high-wall cube at a client site, trying to make sure no one saw me designing icons in a graphics program, or hand-coding subtle timer-based animation for an application UI. Oftentimes, the only way I could make real progress on the UX assets was when I worked from home. Working with those things was looked upon as “not real work.” At the same time, the clients expected icons and application UI to magically appear as though someone just pressed the “Make it Awesome” button on an IDE.[1]

1 Of course, these same clients would block access to newsgroups and anything with a forum, because they considered that productivity-wasting. Most of the developers did their problem searches at home, wasting entire days without peer support.

Gladly, for most companies, those days are gone. The value of good graphics, good UX, and for the most part, good animation has become mainstream in all but the most conservative organizations. The last of those, and probably the least broadly accepted, is animation.

13.1. Animating a value over time

13.2. Mastering the timeline

13.3. Storyboards

13.4. Keyframing

13.5. Interpolation

13.6. Easing functions

13.7. Behaviors, triggers, and actions

13.8. Summary