Animation

See also Physics

Resources

The illusion of life

![The illusion of life_hd.mp4](The illusion of life_hd.mp4) ![10 principles of motion design.mp4](10 principles of motion design.mp4)

Precision

Eular method is frame based More precise is time based

The Eular method simplifies equation:

position += velocity * dt;
velocity += acceleration * dt;

The semi-implicit euler (better):

velocity += acceleration * dt;
position += velocity * dt;

frame skip = based on time non frame skip = based on number frames. It's not precise especially if the frame rate is irregular or not at the original speed

Recusive functions are frame based

Eular method:

let threshold = 0.07;// resting velocity
let friction = 0.15;
let x = 0;
let velocity = 30;

// loop is an equivalent to call a render frame function
while ( velocity > threshold ) {
	velocity *= 1 - friction;
	x += velocity;
}
return x;

See also:

static double lastUpdate=0;
if (lastUpdate!=0) {
	deltaT = time() - lastUpdate;
	velocity += acceleration * deltaT;
	position += velocity * deltaT;
}
lastUpdate = time();

Time based (use integration and calculus):

var restingVelo = 0.07;
var startVelo = 30;
var friction = 0.15;
var startX = 0;

function getBaseLog( a, b ) {
  return Math.log( b ) / Math.log( a );
}

let damping = 1 - friction;
let ticks = getBaseLog( damping, restingVelo / Math.abs( startVelo ) );
// http://mikestoolbox.com/powersum.html
let sum = ( Math.pow( damping, ticks + 1 ) - 1 ) / ( damping - 1 );
x += startVelo * damping * sum;

Eular method

Inching

Aka Ease out animation

position += (destination - position) * friction

ease = 0.25;
position = 0;
destination = 100;

frame{
	velocity = (destination - position) * ease;
	position += velocity;
}

Elastic

Simple harmonic motion — Wikipedia

ease = 0.25;
velocity = 0;
friction = 0.75;
position = 0;
destination = 100;

frame{
	velocity += (destination - position) * ease;
	velocity *= friction;
	position += velocity;
}

Flexible Partial Shifts

var dx:Number = displayObject.x - fixedX;
var dy:Number = displayObject.y - fixedY;
var angle:Number = Math.atan2(dy, dx);
var targetX:Number = fixedX + Math.cos(angle) * springLength;
var targetY:Number = fixedX + Math.sin(angle) * springLength;

Waveform

displayObject.y = centerScale + Math.sin(angle) * range;
angle += speed;

Heartthrob

displayObject.scaleX = displayObject.scaleY = centerScale + Math.sin(angle) * range;
angle += speed;

Easing

See also Catmull–Rom spline and Gradient

Time progression

progress = max(min((nowTimestamp - timestamp) / duration, 1), 0);// 0 to 1

Animation duration

Physics based

Animation based on physics

Use friction, attraction force (gravity, magnetism), push force Mass, velocity (speed + direction), momentum

See Physics

  • The Nature of Code

  • Lib for lot of domains (math, graphics) https://github.com/hapticdata/toxiclibsjs from http://toxiclibs.org/about/

  • https://en.wikipedia.org/wiki/Physics_engine

  • A posteriori (discrete) versus a priori (continuous) computation: https://en.wikipedia.org/wiki/Collision_detection#A_posteriori_.28discrete.29_versus_a_priori_.28continuous.29

  • https://openclassrooms.com/courses/theorie-des-collisions

  • Parametric easing (easing function with parameters like frequency, friction) http://dynamicsjs.com

  • game libs http://phaser.io https://libgdx.badlogicgames.com/index.html

  • native JS canvas only lib https://github.com/phoboslab/Ejecta

https://en.wikipedia.org/wiki/Force https://en.wikipedia.org/wiki/Classical_mechanics

Cat walking

Cats have a very precise method of walking, called “direct registering”, wherein their hind paws fall almost exactly into the place their fore paws did a moment before—this method of walking minimizes noise and visible tracks while ensuring more stable footing as the place has already been felt out by the fore paws

Draggable with inertia

Scrollable, deceleration, rubber band, paging (aka Soft close drawer)

Linear Motion Equations:

vf = vi + at d = ½(vf + vi)t d = vi∙t + ½at vf² = vi² + 2ad

where:

  • d is displacement (∆x)

  • t is time of travel (∆t)

  • a is rate of constant acceleration

  • vi is initial velocity

  • vf is final velocity

https://s2.studylib.net/store/data/005704450.pdf?key=7f28457ce04d3cb302b11a2f52dba5b3&r=1&fn=5704450.pdf&t=1536095317883&p=600

Rubber-banding: x = (1.0 - (1.0 / ((x * c / d) + 1.0))) * d or x = x * 0.5

f(x, d, c) = (x * d * c) / (d + c * x)

where:

  • x is distance from the edge

  • c is constant (UIScrollView uses 0.55)

  • d is dimension, either width or height

UIScrollView to find out the formulae its using for paging, inertia, and bouncing: rubber banding: offset = (0.55 * offset * height) / (height + 0.55 * offset); inertia: exponential decay with .decelerationRate

Like scroll with touch or mouse wheel. See also http://dev.w3.org/csswg/css-snappoints/, -ms-scroll-limit (offlimit bounce) and https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/IpBdJEppjzE/V1Biy1D4v-kJ

Scroll time based on distance:

var baseMinScrollTime = 200;
var baseMaxScrollTime = 500;

var docHeight = $(document).height();
var triggerTop = $(this).offset().top;
var targetTop = $target.offset().top;

var scrollProportion = (targetTop - triggerTop) / docHeight,
var relativeTime = ((baseMaxScrollTime - baseMinScrollTime) * scrollProportion) + baseMinScrollTime,
// Create inverse relationship (quicker the further we scroll)
var scrollTime = -1 * (1 - relativeTime);

$('html, body').animate({
  scrollTop: targetTop - 10
}, scrollTime);

Friction:

vector velocity = speed + direction

google maps Speed decrease like POWER2

f(x) = 99.9%^x

drop (a=0→1)

v = d / t where v = speed or velocity d = distance t = time or duration

stopping distance: start velocity to 0 d = k * v * v, where d = distance k = friction coef v = start speed or velocity

stopping duration?ranl(fr) t = d / v t = time or duration v = average speed or velocity (= start speed / 2) d = distance

In source of the map engine Leaflet https://github.com/Leaflet/Leaflet/blob/63fd4edc76893ab2a2f83d54e703e0a4da73de7b/src/map/handler/Map.Drag.js

Particles

Character control

PreviousAnimationNextApplications

Last updated