Algorithms for Animation

Simple formulas to activate your UI

DesignVDev

The meta purpose of this talk to to attempt to bridge the gap between developers and designers.

How many of you consider yourselves a designer? Developer? Hybrid?

Designing animations for software has always been a bit decoupled from the implementation. translating that onto web or mobile is always a bit tricky.

Developers can also benefit by understanding some of the basic principles behind animation design so they can add in some interesting elements to their interface designs

Windsor McCay working at disney, came up with a way to create cartoon animations

Traditional disney animation consisted of the best designers creating a few key animation drawings and then a "inbetweener" would draw in the scenes between. This is where keyframe and tween came to be.

We use software to be the "inbetweener".

So instead of a human determining tbe direction and speed that this figure flips, we've can use math to actually create very organic and natural animations from one state to the next.

Animations are cognitive aids

Motion is something we as humans inately respond to. But we are also very sensitive to it. So it needs to feel right.

• Google Material Design
• iOS 7 Design Resources
• Metro UI CSS

What does it mean to "feel" right?

It is very much based in reality and in our interaction with everyday things Don Noman in "The design of everyday things" talks about affordance

Things have understood physical properties which we can intuit to mean certain things. this is affordance.

In much the same way, user interfaces can naturally lead people to take the correct steps to accomplish their goals.. this is a signifier or perceived affordance: The concept of affordance derives from cognitive psychology and refers to particular characteristics of an object that guide the viewer.

"a desirable property of a user interface — software which naturally leads people to take the correct steps to accomplish their goals."

Motion detection

Navigation

Context

Math

Animation has its roots in some very easy math functions.

Coming up with an easy way to play around with animations can actually be a bit tricky without pulling out Flinto or Adobe Quartz or some bloated framework.

I am assuradly not good at math. I can get by, about as well as I can get by in paris with my french. which is to say, i can communicate, i can have some fun, and I can get what I want to get across across. I feel about the same with math and happily have found ways to have fun with it in my coding.

Moving pixels

var ball = document.getElementById('ball');					
var start = 0;

var basicAnimation = function (e) {							
	start += 12;	     
	basic.style.left = start + "px";
	if (Math.abs(start) <= 800) { requestAnimationFrame(basicAnimation); }	
}
	

This works great when you are thinking specifically about frames and pixels. Hard to make this sophisticated, to introduce an ease or variance.

No control over timing.

The basics of more robust animations lies in interpolation

The basics of animation: interpolation

valueAtTime = (end - start) * time / duration + start

One simple formula describes all animation.

Once you understand this, you can manipulate your animation without limit.

It is all based on time. You need to know where you are going to start, where you want to go (change), where you are currently, and what the total duration should be for the animation

Breaking it down to [0-1]

valueAtTime = (end - start) * time / duration + start

change = end - start

percent complete = time/duration

when making some kind of animation, we know the starting and ending positions, and want to transition between these. All of these can be converted to interpolation from 0 to 1.

you are trying to map everything into a point of reference between 0 and 1

multiply any value between 0 and 1 with another value between 0 and 1, and the result is guaranteed to be between 0 and 1.

So Interpolation allows you to start talking more generally and easily porting over whatever you need to put motion to into a very easy range of reference.

Timing

var time, startTime;		

var start = function () {
	startTime = new Date().getTime();
	run();
}

var run = function () {							
	time = new Date().getTime() - startTime;
	div.style.left = 1000 * time / 1000 + "px";

	if(value < 1) requestAnimationFrame(run);
}
	

Now we have a consistent number to work with. All animations will fall in a range from [0-1]. The percentage of completion…

What a property value is at any given time isn't nearly as important as how that property changed from its initial value to the final value over the lifetime of the animation.

	//valueAtTime = (end - start) * time / duration + start
	div.style.left = 1000-0 * time / 1000 + 0 + "px";

	

The vast majority of mathematical equations and natural phenomena are nonlinear, with linearity being the exceptional, but important, case.

Easing functions

Easing

	valueAtTime = (end - start) * easingfunction([0-1]) + start		

Change in property times (some float) plus beginning value.

Power Functions - EaseIn

var run = function () {							
  time = new Date().getTime() - startTime;  
  div.style.left = 1000 * Math.pow(percentChange, 3) + "px";

  if(time / duration < 1) requestAnimationFrame(run);
}

Power Functions - EaseOut

var run = function () {							
  time = new Date().getTime() - startTime;  
  div.style.left=(endX - startX)* (1 - Math.pow(1 - (t / d), 3)) +startX+"px";
  if(time / duration < 1) requestAnimationFrame(run);
}
	

Trig! ... sine :)

var run = function () {							
  time = new Date().getTime() - startTime;  
  div.style.left=(endX - startX)* Math.sin( t/d * Math.PI / 2 ) +startX+"px";
  if(time / duration < 1) requestAnimationFrame(run);
}

Follow Through

> 1

We can also go beyond that 0-1 range

One of the 12 Basic Principles of Animation is Follow through or elastic movement.

Follow through refers to an animation technique where things don't stop animating suddenly. They exceed their final target slightly before snapping back into place. This useful technique is something that can only be done by going beyond the 0-1 range.

Elasticity

var s = 1.70158;
var run = function () {							
  time = new Date().getTime() - startTime;  
  k = time / duration;
  div.style.left=(endX - startX)* k * k * ( ( s + 1 ) * k - s ) +startX+"px";
  if(time / duration < 1) requestAnimationFrame(run);
}

Bounce

var easeFunc = function(k) {
if ( k < ( 1 / 2.75 ) ) { 
return 7.5625 * k * k;
} else if ( k < ( 2 / 2.75 ) ) { 
return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
} else if ( k < ( 2.5 / 2.75 ) ) {	
return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
} else { 
return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375; }
}
div.style.left=(endX - startX)* easeFunc(t/d) +startX+"px";

Birds on a Wire

Tools

• Software
• JS Frameworks
• CSS

Software

• Adobe Edge Animate
• Adobe After Effects
• Flinto
• Keynote
• Quartz

JS Frameworks

• Framer.js
• Tween.js
• GSAP (Greensock)
• jQuery

.box { -webkit-transform: translate(0, 0); -webkit-transition: -webkit-transform 500ms; transform: translate(0, 0); transition: transform 500ms; }

.box.move { -webkit-transform: translate(100px, 100px); transform: translate(100px, 100px); }

position, scale, rotation and opacity

CSS

• Animate.css
• SASS/LESS mixins

position, scale, rotation and opacity

Performance

• CPU vs GPU
• Transforms (scale, rotation, translation, and skew) and opacity
• css layer doesn't have to redraw full canvas

As far as performance, there is a lot to consider before you can just say CSS is better than JS. CSS gets touted as being more performant because it offloads calculations to a different thread and harnesses the GPU

JS translate3d or matrix3d.

specific to Transforms (scale, rotation, translation, and skew) and opacity

work is in the initial rendering and document layout, css layer won't have to redraw the full canvas.

Go forth and animate!

References

• Robert Penner - Easing Functions
• Don Norman - The Design of Everyday Things
• Google Material Design
• Disney's Twelve Basic Principles of Animation
• Smashing Magazine - A New Mobile UX Design Material
• Birds on a Wire