Algorithms for Animation
Simple formulas to activate your UI
Welcome, this is a 40 minute talk distilled to 20 min. bear with me
DesignV Dev
The purpose of this talk is two fold.
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.
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.
Motion is a new and powerful design material that can be used to great affect in communicating with your users.
There are already more and more great resources available to help find best practices in animation in UI
Google Material Design
iOS 7 Design Resources
Metro UI CSS
Affordance, percieved affordance & signifiers
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
Humans have crap perception of color in their peripheral vision but are great at sensing movement.
Animated transitions between screens convey logical relationships and create an understood "map" of an interface from how things enter and exit a screen.
Adrian Zumbrunnen
Adrian Zumbrunnen
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.
- thinking about things in terms of percent complete
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.
this will then work for everything - you will have your different parameters like position, color, shape, etc but you can map them to a value between 0 to 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";
>
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.
nothing in our world actually moves like that
Easing functions
Same beginning and end but with variation in the speed of execution. Start slow and move more quickly.
Easing
valueAtTime = (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
var run = function () {
time = new Date().getTime() - startTime;
div.style.left = 1000 * Math.pow(percentChange, 3) + "px";
if(time / duration < 1) requestAnimationFrame(run);
}
>
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
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);
}
>
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 :)
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);
}
>
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 and physics are incredibly powerful in representing natural and organic movement.
It is subtle, but the devil is in the details
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);
}
>
The math is getting a little more complicated now ... 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
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";
>
Bounce is everywhere, it is playful and noticable without being obnoxious... like blinking
Tools
Software
JS Frameworks
CSS
So you can see that when animations start to get complicated, the math does start to get a bit more complicated as well. It is worthwhile to take the opportunity to play around with it but there are also lots of options out there to take care of it for you as well. Given the basic knowledge you have now, you can understand better what is going on under the hood.
Software
Adobe Edge Animate
Adobe After Effects
Flinto
Keynote
Quartz
Total control, but still a handoff point to developers.
JS Frameworks
Framer.js
Tween.js
GSAP (Greensock)
jQuery
Animating in JavaScript does give you a lot of control: starting, pausing, reversing, interrupting and cancelling are trivial. Some effects, like parallax scrolling, can only be achieved in JavaScript.
.box {
CSS: browser can optimize the animation. pushed to GPU.
position, scale, rotation and opacity
great for simple animation on interface elements that don't have a lot of interdependency in their transitions
CSS
Animate.css
SASS/LESS mixins
CSS: browser can optimize the animation. pushed to GPU.
position, scale, rotation and opacity
great for simple animation on interface elements that don't have a lot of interdependency in their transitions
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!
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.
