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,179
Loading comments...

More from Roy Peled