Animation Principles in UI Design: Understanding Easing

An in-depth look into Ease-in and Ease-out

Timing and Spacing

NOTE: "Readable" is how animators define clarity in animation — how clear and easy it is to understand what’s happening. 

E.g.:

That doesn’t read = It’s not clear what’s happening
That reads very well = It’s super clear. I got it immediately
Spacing for the red robotic ball and the bouncy green ball

Observing the real world

The Physics behind the bounce: The moment the ball is let go, it has a relatively slow speed. As the force of gravity pulls it down, the ball’s speed keeps increasing until it hits the ground at maximum speed. The ground contact forces the ball back up at roughly the same speed. As the ball moves up, two forces are at work — the rebound force that’s pushing it up and the force of gravity that’s trying to pull it down. The rebound force is slowly spent, causing the ball to reduce speed as it rises higher, until finally it reaches the top of its bounce where there’s no more rebound force. It hangs in there for a microsecond before gravity pulls it back down, causing it to accelerate as before.There’s a reason I’m describing this in words. We’re trying to break down a natural action into concrete steps so that we can recreate it. 
  1. When the ball is at the top, it is slow. As it falls, its speed increases.
  2. While bouncing back up, the ball is fast to start with. It slows as it reaches the top.
  3. When the ball is moving fast, it covers a lot of distance. As it slows down, the distance it covers is much less.

Applying what we observed

NOTE: Don’t be ashamed to “copy” nature as much as you can. Your audience will relate to the animation faster, making it easier for them to read.

Ease-in and Ease-out

Ease-in: start slow and accelerate
Ease-out: start fast and decelerate
CAUTION: There’s a potential for confusion in this terminology. If you read a traditional animation book such as Disney’s The Illusion of Life or The Animator’s Survival Kit, they’ll tell you that, when an object starts slow and then picks up speed, it’s called ease-out, as it is “easing out” of its pose. But, in the software industry (CSS animation, Adobe Edge, etc), this is called ease-in! I’m not sure how this difference came to be, but unfortunately, that’s how it is. So, if you read an article and they’re calling an ease-in as ease-out, don’t get too confused. Just take a quick look at what website you’re on :D.

Reading the easing curves

Icon for ease-in transition in most software products
Time   Y-Position
(sec): (pixels)
----------------
0.0 : 0
0.1 : 34
0.2 : 68
0.3 : 102
0.4 : 136
0.5 : 170
Plotting the red ball on a graph
Time   Y-Position
(sec): (pixels)
----------------
0.0 : 0
0.1 : 2
0.2 : 10
0.3 : 36
0.4 : 87
0.5 : 170
Plotting the green ball on a graph
NOTE: You’ll see more easing options in your software such as quadratic, cubic, quartic, etc. They're just higher easing, but the concept is the same. Just remember — the higher the easing, the more easing you get.

Easing applied to UI Design

There are no rules. Only tools
- Glenn Vilppu

Boring menu without easing
Menu, sprinkled with easing magic

--

--

收錄介面動態設計相關討論與技術文章,歡迎大家投稿 :)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suresh V. Selvaraj

Founder of Nivritti Software. Makers of Mitya — an interaction prototyping tool. www.mitya-app.com