Algorithms for Animation
Simple formulas to
activate
play
inform with
brand
UI
Good afternoon everyone. Thanks for joining
There is however a meta purpose of this talk: bridging the design and development gap
With creating software applications, we tend to see our work as distinctly in the code. The reality is that we might actually really enjoy the design aspect. Software engineers naturally design, it is just usually represented in code.
We should also take into consider the greater experience design.
How many of you consider yourselves a designer? Developer? Hybrid?
Designing animations for software has always been a bit decoupled from the implementation.
Developers can benefit by understanding basic principles behind animation design
Everyone can play a role in adding life to the interface
Math, and by extension physics, is the foundation of our reality (design, nature, beauty abstracted away gives us math formulas)
"You can take a problem that can't be solved directly by animation and can't be solved by technology and work together to acheive a much better resolution." - Joe Longson, Senior Software Engineer - Zootopia
So I really geek out on animation movies, mostly Pixar but really all of them. And the process of producing one of these moveis really facinates me.
Creating the animation and lighting effects for today's movies requies huge server farms and super computers with somewhere around 55,000 cores.
My friend who used to work at Dreamworks told me this great story about how they used to have to ship in generators because the power plant that was literally next door couldn't supply enough cooling energy
400,000-plus computations per day require new animation techniques way beyond the scope of this talk.
The most intersting thing though is how they were able to create less software by collaborating with the designers more closely and iterating on what might be possible.
CLI
GUI
NUI
So we're not making the next Nemo but the experiences in software are moving closer and closer to the real world
Software is just layer upon layer of abstractions to get a machine to do something
In the beginning, there was the command line interface. Now we have the GUI (WIMPs if you will, windows, icons, menus, pointer)(
The next level is NUI or natural, using our fingers for touching, squishing, stretching and the sort of thing we see happening with Magic Leap and VR
As we get closer to closer to something that looks like our "world" we have to consider how to make that experience not jarring.
Affordance & percieved affordance
What does it mean to "feel" right? how close does something uphold our view of reality?
We attribute those things around us to have certain properties - this is called affordance.
We will evaluate our experience with something new or novel to us (such as a new interface) by how close it feels to what we know.
Based in our interaction with normal objects in our daily lives and hence in physics.
So using visual metaphors, like a trash can, is one way to indicate something, like deletion, but motion is another.
Animations are cognitive aids
In today's interfaces, the affordance of screens is change
We see things move on a screen and we assign a "perception of causality"
As long as things represent real world physics, we will emotionally engage and intuit meaning from movement
let's look at some examples of ways in which people are using animations to assist users
Animations have always been a part of good Graphical user interfaces. From the annoyingly animated Clippy to the almost equally annoying genie effect. we've suffered through bad animation and mostly ignored the good because it was in service of our primary goal
It started out on desktop apps, but with the advent of better and better browser technology we can produce some of the same effects across environments
Subtle Cues
Really simple animations can do a lot to set up expectations
animations can create an emotional reaction
more and more brands are creating custom animation libraries and components to use in all their digital properties
Apple built it directly into their developer platform, Facebook created a FIG (Facebook Interface Guidelines). Google sort of open sourced theirs with Material Design
assistive and descriptive animation
animation that creates emotional connection to a brand
Allows the user to make a quick decision based on an emotional response to an animation
Give quick feedback
It’s nice to feel like things are reacting to what you’re doing.
CoDrops
if we had a piece of paper for every form we have filled out online we wouldn't have any forests left. bureacracy is alive and well just stored in huge data warehouses
only show me what is relevant now and give them some feedback along the way. It's like asking directions from a very polite person with a nice british accent
Colin Garven
Error states that are easy on the eyes and keep a pace so that you can get what you need to get done and move along.
Small moments like these are what adds to the overall brand voice and experience of a product.
Auto Loading
Plays to our psychology to want to see what is around that next corner
Almost like a slot machine
Nav igation
Animated transitions between screens convey logical relationships and create an understood "map" of an interface from how things enter and exit a screen.
death of breadcrumbs
don't ask someone to read the fucking manual
Adrian Zumbrunnen
Adrian Zumbrunnen
better
no reload and we now know that where the about section is, simple but used everywhere
Context
always keep your users informed and knowing that something is happening
context sensitive navigation
Jason Zigrino
traditionaly this was the spinner or loading animation (which is still widely used)
During the transition, the user is guided to the next view.
Interactive
today's users of software are more and more willing to expore on thier own
We (meaning our kids) are also willing to play and discover things (snapchat anyone?)
less clicking, less reading
let your users explore and discover, make it fun
Sergey Valiukh
How do you communicate animation ideas?
Math
Happily animation has its roots in some very easy math functions.
You can then take basic functions and add in all sorts of complexity
position, velocity, acceleration
Early animation techniques were developed by Windsor McCay
sequences of drawings by the best designers created key animations
lackeys would draw the frames in between
Instead of a human making the natural transitions betwee key frames, we use software to be the "inbetweener", which uses physics and math.
Disney adopted this technique and came up with the "12 principles of animation design"
Motion
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);
}
}
Simple addition of one pixel on another.
Doesn't give much insight into where you are at within the animation - you know position but not necessarily how much progress has been made.
Animation gets interesting when you can start to think of things in terms of percent changed
The basics of animation: interpolation
valueAtTime = (end - start) * time / duration + start
One simple formula describes all animation. all based on time. where you want to start, go (change), total duration and then you can always get at where you are currently in the process
To make these motions appear realistic, interpolation algorithms have been sought that approximate real life motion dynamics.
custom algorithms, motions with unique, unnatural and entertaining visual characteristics
The basics of animation: interpolation
valueAtTime = (end - start) * time / duration + start
One simple formula describes all animation. all based on time. where you want to start, go (change), total duration and then you can always get at where you are currently in the process
To make these motions appear realistic, interpolation algorithms have been sought that approximate real life motion dynamics.
custom algorithms, motions with unique, unnatural and entertaining visual characteristics
Timing
(end - start) * time/duration + start
div.style.left = 900-0 * time/1000 + 0+"px"
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.
Consistent, unvarying progress from beginning to end. Too mathmatetical... need something with some variety
"Using a term like nonlinear science is like referring to the bulk of zoology as the study of non-elephant animals."
- Stanislaw Ulam
The vast majority of mathematical equations and natural phenomena are nonlinear, with linearity being the exceptional, but important, case.
With Fermi and John Pasta, Ulam studied the Fermi–Pasta–Ulam problem, which became the inspiration for the vast field of Nonlinear Science.
Natural move ment
Velocity, Acceleration, Friction, Torque
nothing in our world moves linearly
Easing fun ctions
Easing
(end - start) * easingfunction([0-1]) + start
Change in property times (some float) plus beginning value .
Easing functions define the rate at which your property changes. All that matters is what percentage of the final property value has been reached at any given point during the animation's lifetime.
Power Functions - EaseIn
endX * Math.pow(percentChange, 3) + "px";
Now we get to start playing around with our animations. We can make them more organic and we can tweak our values to produce exactly the effect we are after.
A great (and simple) starting point is the power function.
You can put any power in there and see if it meets your needs.
So that is kinda sudden... and you don't always need to ferarri ... although who doesn't want the ferrari ...
Power Functions - EaseOut
(endX - startX)*(1 - Math.pow(1 - (t / d), 3)) +startX+"px";
We see this a little more used on the web. the slide in. This is back to the feeling that when a person walks into your periferral vision they already have velocity and then they slow down to a stop.
Trig! ... sine :)
(endX - startX)*Math.sin( t/d * Math.PI / 2 ) +startX+"px";
So what if you need a bit of nuance, it isn't a ferrari and it isn't the enter and exit stage left scenario? Trig is what starts to get you towards the more powerful physics engines. These are how you can get really good at representing natural and organic movement.
It is subtle, but the devil is in the details and it is all about precise control.
Introducing time and motion changed everything for me, because what I realized was that it gave you precise control over the emotion you are trying to convey and how an audience will interpret your message. I’d often look to title sequences for inspiration because I was fascinated with how a 30 second or 3 minute sequence had the ability to set the tone for an entire film and foreshadow what was going to happen.
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
(endX - startX)*k * k * ( ( s + 1 ) * k - s ) +startX+"px";
The math is getting a little more complicated now ... we're bringing in some additional factors but the basic underlying equation is still the same. you can pull most of the necessary functions from Robert Penner's easing functions or just check the source for tween.js. then you just plug and play and adjust values.
Bounce
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; } }
Bounce is everywhere. You drop something, likelihood it is going to bounce a bit before it settles. so this is starting to represents our physical world. It is also starting to introduce Newtonian physics to our animations.
Physics Engines
As you get closer and closer to reality, the math starts to go from simple algebra to more complicated calculus.
Things like damping of a spring. this is where things get pretty tricky but there are
There are many great javascript physics engines out there that take a lot of the leg work out of it for you. Diving into the source code can be fun though.
flick gesture from inertial scroll
Initial velocity of your finger then the program takes that slope and degrades it until zero
flick gesture from inertial scroll
damping of a spring. this is where things get pretty tricky but there are
Initial velocity of your finger then the program takes that slope and degrades it until zero
Linear Interpolation Function (start, stop , amount)
function lerp(a,b,x) { return a+x*(b-a); }
The lerp function is convenient for changing anything in a linear fashion.
Rad ial motion
anim.theta += .02*Math.pow(1-anim.r/cw,8) * Math.PI;
anim.p.x = anim.r * Math.cos(anim.theta);
anim.p.y = anim.r * Math.sin(anim.theta);
// Theta here is just how far from the center you are (polar notation)
Depth (varying velocity )
// different shaped circles (depth)
function shape() { return randomCircle(.006, .09) }
// initializes each circle w/ random velocity (px/second)
x:lerp(xmin,xmax,Math.random()),
y:lerp(ymin,ymax,Math.random())}
// basic equation: incremental x and/or y by velocity to get acceleration
anim.p.x += anim.v.x
anim.p.y += anim.v.y
// this just keeps everything w/in the bounds of the canvas
anim.p.x = (anim.p.x + cw/2) % cw - cw/2
anim.p.y = (anim.p.y + ch/2) % ch - ch/2
// constant velocity so just straight line movement
Constraints (gravity)
// simple constraint of gradually increasing gravity
gravity = lerp(0,2,fraction);
// add an amount of gravity to the y velocity
anim.v.y += gravity
// same as before, add the velocity to the position
anim.p.x += anim.v.x
anim.p.y += anim.v.y
// flip velocity for bounce
anim.v.y = -.9*Math.abs(anim.v.y)
// adds a bit of drag to slow down horizonal movement
anim.v.x *= .99;
// simple constraint of gradually increasing gravity
// does not change position necessarily (directly) but acts directly on velocity
// all this does is add the amount of gravity to the y velocity
// so y velocity is always going down
// higher your y velocity, the lower you are on the screen
//(if same velocity, perfectly elastic collision)
// the .09 makes it not perfectly elastic
// friction/gravity
// fluid, slightly viscous or air drag
// still goes in same direction but each movement is a bit slower and will head towards 0
/// tada! Newton's laws in effect
Separation, Align ment, & Cohesion
// set boids direction towards center
var centroidDirection = vsub(anim1.p, centroid)
var centroidDistance = vlength(centroidDirection)
// apply interaction force against boids
var centroidForce = -attraction / (centroidDistance || .001)
anim1.force.x += centroidForce * centroidDirection.x
anim2.force.x += centroidForce * centroidDirection.x
var rejectForce = rejection / (distance ? distance * distance : 0)
anim1.force.x += rejectForce * direction.x
anim2.force.x += rejectForce * direction.y
// match velocity to nearby boids
anim1.force.x += velocitySync * anim2.v.x
anim2.force.x += velocitySync * anim1.v.x
// Craig Reynolds in 1986 created an artificial life program that he called boids (for bird-oids)
Collisions (engines !)
// create a world with a ground and some objects
var bodyDef = new Box2D.Dynamics.b2BodyDef();
var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
// set the details for our constraints
fixtureDef.density = 1.0;
fixtureDef.friction = 0.5;
// step through within constraints of our setup
world.Step( 1 / 60 /* frame-rate */,
10 /* velocity iterations*/,
1 /* position iterations */);
// math gets complex enough here that it is easier to rely on a physics engine to handle the calculations
Static & Dynamic
// set body parts oriented in the right direction
torso: partTransitions(0, -.04, .02, .04, -Math.PI/2),
left_arm: partTransitions(-.018, -.03, .01, .03, -3*Math.PI/4),
// sets how parts are attached to each other
fixtureDef.filter.groupIndex = -1
// set up static & dynamic types
addPhysics(anims.head[0], Box2D.Dynamics.b2Body.b2_staticBody , bodyDef, fixtureDef)
groups.slice(1).forEach(function(group) {
addPhysics(anims[group][0], Box2D.Dynamics.b2Body.b2_dynamicBody , bodyDef, fixtureDef)
})
// static are like parts of the environment (things can swing off of the static body)
// dynamics can move throughout a scene freely
Perform ance
There are lots of things to consider when you are starting to introduce a lot of animations into your web sites. There isn't one easy answer on how best to approach it but there are some basic guidelines.
HTML, CSS, & JS Base d
Use Keyframes, Transitions & Transforms with CSS
Use requestAnimationFrame with JS
Web Animation API (WAAPI)
CSS is more performant when it comes to basic animations - things get pushed to a different thread
CSS has a lot of features: 3D transforms, complex backgrounds, etc
rAF is basically a browser API that is made to optimize concurrent animations together into a single reflow and repaint cycle
To prevent frames from getting dropped due to too many rendering requests, use requestAnimationFrame. requestAnimationFrame takes a callback that executes when the browser pushes a new frame to the screen. Essentially, the browser pulls for work at each frame, instead of us pushing work for each new touch event. This allows for concurrent animation to fit into one reflow/repaint cycle. As a result, it makes animations look much smoother because the frame rate is consistent.
RAIL
Response 100ms
Animation 6ms
Idle 50ms
Load 1000ms
1000 - loading, 100 - finger down response, 6 - per frame, 50 - idle for cleanup
JACOB NEILSON
Users have no patience to wait for your UI to load, and once it does they want to make a decision in less than .1 seconds
Rend ering
Clear & Reuse
Procedural Sprites
Keep States
Compositing
Redraw Regions
Procedural Sprites
State Stack & Transformation
Compositing
The future is... meow
Responsive design can now adapt websites to VR
Go play !
So I'd like to encourage you all to go out and play with animations and with these formulas. See what you can do with just an HTML page and some simple JS functions. Play around with the values and find out what types of animations appeal to you.
Courtney Hemphill