web animations api
WEB
animatios
history
1995
the web supports gifs
netscape navigator 2.0
In September 1995, native support for Compuserve's GIF file format was added
2005
The planets aligned
Browsers | CSS | Javascript
Script.aculo.us
A new JS framework was released, helping "webmasters" of the time to add effects and animations to their web pages
var element =
document.getElementById("animate");
Effect.fade(element);
2010
Css animations
CSS animations
Appeared in a nightly build of webkit, and demonstrated on the webkit blog in 2009 (https://webkit.org/blog/324/css-animation-2/).
In 2010 it was build into Chrome
In 2012 in all major browsers
@keyframes bounce {
from {
left: 0px;
}
to {
left: 200px;
}
}
2017
web animations api
FIREFOX | CHROME | OPERA | ANDROID
2017+
Animated PNG
FIREFOX | SAFARI
Unofficial
WEB
animations
api
Animation API basics
let animationObject =
element.animate( KeyframesFormat , Duration | options )
From-to animation
Animates an element's style property
using an array of values
element.animate( KeyframesFormat,
options )
KeyframesFormat = {
Property: [value, value, ...],
Property: [value, value, ...],
...
}
el.animate({ opacity: [0,1] }, 300);
Keyframes animation
Animates an element
Using a new set of style declarations for each keyframe
element.animate( KeyframesFormat,
options )
KeyframesFormat = [
{
Property: value,
Property: value,
offset: Percentage,
easing: EasingFunction
},
...
]
el.animate([{opacity:0}, {opacity:1}], 300);
Animation options
Allows us to control how the animation is played on the element
el.animate({opacity: [0,1]}, options);
let options = {
delay: ms,
duration: ms,
endDelay: ms,
direction: AnimationDirection,
easing: EasingFunction,
fill: AnimationFill,
iterations: 1...Infinity,
iterationStart: Percentage
}
Animation object
Properties and methods of the created animation
Allows us to modify existing animations
Properties:
let animation =
el.animate({opacity: [0,1]}, 300);
animation.currentTime
// Gets the current time of
// the animation
animation.effect
// Gets/sets the keyframes and
// timing of the animation
animation.playState
// Gets/sets the animation state:
// idle | pending |
// running | paused | finished
animation.startTime
// Gets/sets the animation starting time
animation.playbackRate
// Gets/sets the playback rate
Animation object
Properties and methods of the created animation
Allows us to modify existing animations
Methods:
let animation =
el.animate({opacity: [0,1]}, 300);
animation.cancel()
// Cancels the animation
animation.finish()
// Finishes the animation immediately
animation.pause()
// Pauses the animation
animation.play()
// Plays/resumes the animation
animation.reverse()
// Reverses the animation
Animation object
Properties and methods of the created animation
Allows us to modify existing animations
Events/Promises:
let animation =
el.animate({opacity: [0,1]}, 300);
animation.oncancel = () => { ... }
// Fires when animation cancels
animation.onfinish = () => { ... }
// Fires when animation finishes
animation.ready.then( ()=> { ... } )
// Promise for when animation is ready to play
animation.finished.then( ()=> { ... } )
// Promise for when animation is finished
What is it good for?
function animateMario(){
return Promise.resolve()
.then( goombaWalk.play )
.then( marioSprite.play)
.then( marioWalkIn )
.then( marioSprite.cancel )
.then( jumpSequenceStart )
.then( goombaWalk.pause )
.then( goombaSprite.cancel )
.then( jumpSequenceEnd )
.then( marioSprite.play )
.then( marioWalkOut )
}
animateMario()
.then(()=> { alert("Game over") });
What is it not good for?
Thank you
WAAPI
By Roy Peled
WAAPI
- 1,778