Animations/websites 878/student/animations/dna_replication/inde x.html .
Web Animations
-
Upload
bsuresh2 -
Category
Technology
-
view
176 -
download
0
Transcript of Web Animations
Web Animations
Puppet Icon Designed by Juan Pablo Bravo, The Noun project
Hola!
Suresh (@bsuresh2)
Front-end Developer
Mobile And Application Development team @CtiDigital
vsDeclarative
http://cats-paradise.net/
Imperative
Before we begin...
http://www.visualphotos.com/image/2x2714849/boxer_taping_hands_before_fight
a: A motion picture made by photographing successive
positions of inanimate objects (as puppets or
mechanical parts).
b: A motion picture made from a series of drawings
simulating motion by means of slight progressive
changes.
“Animation”
From webster definition of animation
There is more to it...
http://i.telegraph.co.uk/multimedia/archive/01958/Boxing_1958661b.jpg
Rule
s Principle
s
Tricks
Techniqu
es
Twelve
Commandments
Revelation Icon Designed by Cédric Villain, The Noun project
Gifted to this world
by...
The God
Ollie Johnston
&
Frank ThomasFrom Disney Inc.
● Squash and stretch
● Anticipation
● Staging
● Action and Pose to Pose
● Follow Through and Overlap
● Slow in Slow out
● Arc
● Secondary Motion
● Timing
● Exaggeration
● Solid drawing
● Appeal
Animation by Definition
Object moves from A to B aka
simulating motion by progressive
changes over time.
Squash and stretch
Squash and Stretch
- This gives a sense of weight and flexibility to
drawn objects.
- It can be applied to simple objects, like a
bouncing ball.
- Or more complex constructions, like the
musculature of a human face.
Anticipation
Anticipation
- Prepare the audience for an action,
- Example
- a golfer making a swing has to swing the club back
first.
- This technique can also be used for less
physical actions
Staging
Action and Pose to Pose
Action - CSS Transitions
- Drawing out a scene frame by frame from
beginning to end.
- Creates a more fluid, dynamic illusion of
movement
- Better for producing realistic action
sequences.
Pose to Pose - CSS Keyframes
- This involves starting with drawing a few key
frames, and then filling in the intervals later
- Works better for dramatic or emotional
scenes.
- Hybrid combination can be used as well!
Follow Through and Overlap
● To give the impression that characters follow the laws of
physics, including the principle of inertia.
● Exaggerated use of the technique can produce a
comical effect
● While more realistic animation must time the actions
exactly, to produce a convincing result.
Slow in Slow out aka. Easing
Arc
● Most natural action tends to follow an arched
trajectory.
● Animation should adhere to this principle by
predefined/generated "arcs" for greater
realism.
Secondary Motion
● Emphasize, rather than take attention away
from, the main action.
● If the latter is the case, those actions are
better left out.
Timing
● On a purely physical level, correct timing
makes objects appear to obey the laws of
physics.
● For example, an object's weight determines
how it reacts to an force, like a push based
on reaction.
Exaggeration
● Exaggeration is an effect
especially useful for animation,
IMITATION!
● Imitation of reality depends on
whether one seeks realism or a
particular style.
Appeal
● There are several tricks for making
a animation connect better with
the audience;
● Symmetry, golden ratios! even a
hint of naturalistic fractal
distributions.
All combined together!
A little Demo time!
Wooooah...cool!
Some real life examples
vsDeclarative
http://cats-paradise.net/
Imperative
Declarative Animations
● Performance
● Ease of wrapping
● Motion Principles?!
Extracts from ngeurope famo.us talk by Zack brown, http://codepen.io/redouglas/pen/vCgwc
Declarative Animations - The Hard
part
● Interactions?!
● Complex Orchestrated Animations
● Timing & knowing when things are done
● Design changes
● Authoring, Refactor?!
● Maths/computed physics
Extracts from ngeurope famo.us talk by Zack brown
Imperative animations
● Animations can be orchestrated
● Halted and reversed at any given point
● User interactions
● Computational physics
● External forces like spring, elastic, damping, oscillation!
Imperative animations - The Hard
part
● Performance
● Load times
● Devices
● GPU Layer Access
What Now?!
Browser Challenges
Browser Repaint
Repaints can be tricky!
Spanish fresco restoration - http://www.bbc.co.uk/news/world-europe-19349921
The Browser Repaint!
The Browser Repaint - Inspectors
● Chrome dev tools Timeline
● Mozilla MozAfterPaint
● IE Visual Round Trip Analyser
(VRTA)
The Common Struggle
● Complex DOM
● Web standards
● Accessibility
● Jank Busting
● GPU layer access
Light at end of tunnel
● Various frameworks like Famo.us, KineticJS
GSAP, ionic framework, Material design
● WebGL
● SVG Animations, Bonsai, Snap.svg, RaphealJS, D3
● Web Standards/Browsers RAF (Req Animation frame),
Prefix free, ‘will-change’ property, WebGL support etc.,
Light at end of tunnel
● Tools to help you traverse the Animation universeBookmarklet for Browser independent paint inspection by Lindsey Simon at Google
https://developers.google.com/speed/articles/reflow
CSS Triggers
http://csstriggers.com/
Light at end of tunnel
● Abstractions can be good
● Can also be hinderance?!
Thanks!
&
Any Questions?!
@bsuresh2