THE INS AND OUTS OF EASING

Val Head @vlh

THE INS AND OUTS OF EASING

Val Head @vlh

Let’s get something moving

PROGRESSVA

LUE

Linear easingA constant rate of change with no acceleration or deceleration.

Linear easingA constant rate of change with no acceleration or deceleration.

PROGRESSVA

LUE

Ease in quadAccelerating at the start, speeding up as we go.

TIMEPR

OER

TY V

ALU

E

Penner Easing Equations

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInSine

easeOutSine

easeInOutSine

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInElastic

easeOutElastic

easeInOutElastic

easeInBack

easeOutBack

easeInOutBack

easeInBounce

easeOutBounce

easeInOutBounce

Penner Easing Equations

easeInQuad

TIMEPR

OER

TY V

ALU

E

easeOutQuad

TIMEPR

OER

TY V

ALU

E

easeInOutQuad

TIMEPR

OER

TY V

ALU

E

Cubic Beziers

Source: Cubic-Bezier Curves Under the Hood - vimeo.com/106757336

Source: Cubic-Bezier Curves Under the Hood - vimeo.com/106757336

Cubic-bezier & Penner EqsGreat for pre-defined UI animations

Great for animations that demonstrate actions/functionality

Great for making groups of animations behave similarly

😃

Cubic-bezier & Penner EqsReusable!

Customizable!

but…

Need a defined duration

Need a defined destination

😃

😕

Lerping

Lerp (Linear Interpolation)No set duration

Calculate how far is left to go each frame

Then move a fraction of that each frame

Springs

MakeASpringHappen(200, 10, 25)

Damped spring by Oleg Alexandrov (https://commons.wikimedia.org/wiki/File:Simple_harmonic_oscillator.gif)

F = -k*xspring

Hooke’s Law

Join the crew: uianimationewsletter.com

Let’s chat on twitter: @vlh