Motor de animación de JavaScript ligero-anime. js

Vista prévia

Descripción

Anime. js es una biblioteca de animación de JavaScript ligera (~ 10kb minificada) pero robusta, de alto rendimiento que funciona con CSS, transformaciones individuales, SVG, atributos DOM y objetos JS.

¿Cómo funciona?

Incluya la biblioteca de JavaScript principal anime. js en el documento y estamos listos para ir.

<script src="anime.min.js"></script>

Crear una animación personalizada en un elemento especificado mediante función de de anime.

var myAnimation = anime({


targets: ['.el-1', '.el2'],


// more options here
});

Configuración completa para ayudar a crear animaciones personalizadas.

// CSS Selectors: 'div','.thing','path'
// DOM Element: document.querySelector('.thing')
// Nodelist: document.querySelectorAll('.thing')
// Javascript Object: {prop1: 100, prop2: 200}
// Javascript Array: ['.thing-1', 'div']
targets: ['.el-1', '.el2'],

// animaton duration in ms
duration: 1000,

// animation delay in ms
delay: 0,

// number or boolean
loop: false,

// autoplay on page load
autoplay: true,

// 'normal', 'reverse' or 'alternate'
direction: 'normal',

// easing function
easing: 'easeOutElastic',

// higher is stronger
elasticity: 400,

// number or boolean
round: false,

// callback functions
begin: undefined,
update: undefined,
complete: undefined

Api.

// play the animation
myAnimation.play();

// pause the animation
myAnimation.pause();

// restart the animation
myAnimation.restart();

// advance in the animation
myAnimation.seek();

Ayudantes.

// Return an array of all active animations objects
anime.list;

// Change all animations speed (from 0 to 1).
// Will slow down all animations by half of their original speed
anime.speed = .5;

 // Return the complete list of anime.js easing functions
anime.easings;

// Remove one or multiple targets from the animation.
// Will remove all divs with the class '.item-2'
anime.remove('.el-2');

 // Get current valid value from an element.
// Will return '100px'
anime.getValue('div', 'translateX');

 // Generate a random number between two numbers.
// Will return a random number between 10 and 40
anime.random(10, 40);

Registro de cambios

v3.0.1 (01/17/2019)

• El parámetro Direction ahora se cambia correctamente cuando la animación se invierte

01/12/2019

• Corrija las devoluciones de llamada de cambio

06/18/2018

• v2.2.0