Developer Advocate & Trainer Manager
at
@SchibstedSpain


#Web #CSS #Javascript

#Animation #PostCSS

Joan León

Web Animations API

 Creando una animación


element.animate( keyframes, options )

Línea de tiempo

@keyframes

CSS

Propiedades de tiempo

animate-*

CSS

JS

JS

WAAPI

 Keyframes { object }

let keyframes = {
    transform: ['none', 'scale(2)']
}
WAAPI Creando una animación

CSS

JS

@keyframe scale {
    from { transform: none }
    to { transform: scale(2) }
}
element.animate( keyframes, properties )

 Keyframes [ array ]

let keyframes = [
    { transform: 'none' },
    { transform: 'scale(2)' }
]
WAAPI Creando una animación

CSS

JS

@keyframe scale {
    from { transform: none }
    to { transform: scale(2) }
}
element.animate( keyframes, properties )

 Properties { object }

let properties = {
    duration: 3000,
    iterations: Infinity,
    direction: 'alternate',
    delay: 2000
}
WAAPI Creando una animación

CSS

JS

.anomated {
    animation-name: scale;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 2s;
}
element.animate( keyframes, properties )

 Properties { object }

let properties = {
    delay: 0,
    direction: 'normal',
    duration: 0,
    easing: 'linear',
    endDelay: 0,         // No CSS version
    fill: 'none',
    iterationStart: 0,   // No CSS version
    iterations: 1
}

JS

WAAPI Creando una animación
element.animate( keyframes, properties )

 Animate

let animation = new Animation([effect][, timeline])

animation.pause()
animation.play()
animation.reverse()
animation.finish()
animation.cancel()

Methods

WAAPI Creando una animación
element.animate( keyframes, properties )

 Animate

animation.currentTime
animation.effect
animation.finished
animation.id
animation.playState
animation.playbackRate
animation.ready
animation.startTime
animation.timeline

Properties

WAAPI Creando una animación
element.animate( keyframes, properties )
animation.oncancel
animation.onfinish

Events

 Animate

animation.playbackRate = 0.5;

animation.playbackRate = 1;

animation.playbackRate = 2;

animation.playbackRate = 3;

Properties

WAAPI Creando una animación
element.animate( keyframes, properties )

 Animate

if ( synced ) {
  p2.currentTime = p.currentTime - (Math.random() * 700);
} else {
  p2.currentTime = p.currentTime;
}
WAAPI Creando una animación
element.animate( keyframes, properties )

Web Animations model

 Web Animations model

WAAPI

 Web Animations model

let keyframes = [
  { width: '50px'},
  { width: '100px'}
]

let options = {
  duration: 2000,
  iterations: 2,
  delay: 3000
}

let animation = element.animate(keyframes, options)
WAAPI

 Web Animations model

let keyframes = [
  { width: '50px'},
  { width: '100px'}
]
element.animate( keyframes, properties )
WAAPI

 Web Animations model

let keyframes = [
  { width: '50px'},
  { width: '75px'},
  { width: '100px'}
]
element.animate( keyframes, properties )
WAAPI

 Web Animations model

let keyframes = [
  { width: '50px'},
  { width: '75px'},
  { width: '85px'},
  { width: '100px'}
]
element.animate( keyframes, properties )
WAAPI

 Web Animations model

let keyframes = [
  { width: '50px', offset: 0},
  { width: '75px', offset: 0.75},
  { width: '85px', offset: 0.85},
  { width: '100px', offset: 1}
]
element.animate( keyframes, properties )
WAAPI

 Animaciones mútiples

WAAPI
let animated = document.querySelector('.toAnimate');
let pulseKeyframes,
    activateKeyframes,
    haveFunKeyframes;

let pulse = animated.animate(pulseKeyframes, 1000);
let activate = animated.animate(activateKeyframes, 3000);
let haveFunWithIt = animated.animate(haveFunKeyframes, 2500);

CSS

JS

.toAnimate {
  animation: pulse 1s, activate 3000ms, have-fun-with-it 2.5s;
}

@keyframes pulse { /* ... */ }
@keyframes activate { /* ... */ }
@keyframes have-fun-with-it { /* ... */ }

 Animaciones mútiples

WAAPI
var a = document.querySelectorAll('div');
a = Array.prototype.slice.call(a);

a.forEach(function(el, i, ra) {
  var to = {
    x: Math.random() * (i % 2 === 0 ?-11 : 11),
    y: Math.random() * 12
  }
  
  el.animate([
    { transform: 'translate(0,0)' },
    { transform: 'translate('+to.x+'rem,'+to.y+'rem)' }
  ], {
    duration: (Math.random() + 1) * 2000,
    direction: 'alternate',
    fill: 'both',
    iterations: Infinity,
    easing: 'ease-in-out'
  });
  
  el.animate([
    { opacity: Math.random() },
    { opacity: Math.random() }
  ], {
    duration: (Math.random() + 1) * 2000,
    direction: 'alternate',
    fill: 'both',
    iterations: Infinity,
    easing: 'ease-in-out'
  });
  
  el.animate([
    { background: 'lightcoral' },
    { background: 'lightgreen' }
  ], {
    duration: (Math.random() + 1) * 2000,
    direction: 'alternate',
    fill: 'both',
    iterations: Infinity,
    easing: 'ease-in-out'
  });
});

 KeyframeEffect

WAAPI
let rabbitDownKeyframes = new KeyframeEffect(
    whiteRabbit, 
    [
      { transform: 'translateY(0%)' }, 
      { transform: 'translateY(100%)' }
    ], 
    { duration: 3000, fill: 'forwards' }
  )

let anim = new Animation(rabbitDownKeyframes, document.timeline)
anim.play()
KeyframeEffect(elm,keyframes,options)

element

keyframes

timing

 GroupEffects

WAAPI
let timings = {
  duration: 1000
}
let keyframes = [
  { opacity: 1 },
  { opacity: 0 }
]

let kEffects = [
  new KeyframeEffect(elem, keyframes, timings),
  new KeyframeEffect(elem2, keyframes, timings)
]
let group = new GroupEffect(kEffects)
document.timeline.play(group)
GroupEffect(kEffects)

Level 2

Polyfill

 SequenceEffects

WAAPI
var timings = {
  duration: 1000
}
var keyframes = [
  { opacity: 1 },
  { opacity: 0 }
]

var kEffects = [
  new KeyframeEffect(elem, keyframes, timings),
  new KeyframeEffect(elem2, keyframes, timings)
]
let sequence = new SequenceEffect(kEffects)
document.timeline.play(sequence)
GroupEffect(kEffects)

Level 2

Polyfill

WAAPI vs CSS

 ¿Otra guerra JS contra CSS?

WAAPI vs CSS

CSS

JS

  • Imperativo
  • Declarativo
  • Aceleración por Hardware
  • Aceleración por Hardware
  • timing-function: linear
  • timing-function: ease
  • Eventos e interacción
  • Eventos e interacción
  • Línea de tiempo global
  • Línea de tiempo global
document.timeline

 ¿Otra guerra JS contra CSS?

WAAPI vs CSS

CSS

JS

.element.animated {
    animation: fadeOut 2s linear 0s 1 forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
element.addEventListener('click', (e) => {
	element.classList.toggle('animated')
})
element.addEventListener('click', (e) => {
  element.animate([
    { opacity: 1 },
    { opacity: 0 },
  ], {
    duration: 2000, 
    easing: 'ease', 
    iterations: 1, 
    direction: 'normal', 
    fill: 'forwards' 
  })
})

WAAPI

 Otra alianza JS + CSS

WAAPI + CSS

CSS

WAAPI

Culturilla*

*ProTips

 Culturilla WAAPI

WAAPI

Easing

let keyframes = [
  { opacity: 0, easing: 'easing-in'},
  { opacity: 0, easing: 'easing-out'},
  { opacity: 1 }
]

let options = {
  duration: 1000,
  easing: 'ease-in-out'
}

 Culturilla WAAPI

WAAPI

Offset

let keyframes = [
  { offset: 0, opacity: 0, easing: 'easing-in'},
  { offset: 0.8, opacity: 0, easing: 'easing-out'},
  { offset: 1, opacity: 1 }
]

 Culturilla WAAPI

WAAPI

¿Ya podemos utilizar WAAPI?

web-animations-js

<!-- Include the polyfill -->
<script src="web-animations.min.js"></script>

<!-- Set up a target to animate -->
<div class="pulse" style="width: 150px;">Hello world!</div>

<!-- Animate! -->
<script>
    var elem = document.querySelector('.pulse');
    var animation = elem.animate({
        opacity: [0.5, 1],
        transform: ['scale(0.5)', 'scale(1)'],
    }, {
        direction: 'alternate',
        duration: 500,
        iterations: Infinity,
    });
</script>

web-animations-js

Animación Reactiva

¿Animación Responsive?

Recursos

Motion Crafsmanship

Usa la animación para resolver problemas de diseño

Usa la animación para orientar y dar contexto

Usa de la animación para dirigir el enfoque y la atención

Usa la animación para mostrar causa y efecto

Usa la animación para dar feedback

Usa la animación para demostrar

Usa la animación para resolver problemas de diseño

Gracias {}

Developer Advocate & Trainer Manager
at
@SchibstedSpain


#Web #CSS #Javascript

#Animation #PostCSS

Joan León

slides.com/joanleon

¿Quieres animaciones? Claro que sí, WAAPI

By Joan León

¿Quieres animaciones? Claro que sí, WAAPI

Presentación de la charla ¿Quieres animaciones? Claro que sí, WAAPI | Codemotion 2017

  • 890
Loading comments...

More from Joan León