fondo
En el proyecto, el esquema de animación comúnmente utilizado para la carga es la animación Gif.
Hay algunos problemas con la animación Gif, como: tamaño de archivo grande, incapacidad de escalar para que coincida con diferentes tamaños y densidades de pantalla, tendencia a la creación de alias, incapacidad para controlar la animación, etc.
Otros esquemas de animación comúnmente utilizados son:
- Marcos de secuencia png: tamaño de archivo grande, puede distorsionarse en diferentes resoluciones de pantalla
- Animación SVG: alto costo de implementación, propenso a una restauración de animación baja
Actualmente, el proyecto necesita ser investigado y la animación de Lottie es una solución altamente factible.
Introducción a Lottie
Lottie es una biblioteca de animación de código abierto de airbnb, que admite múltiples plataformas como Android, iOS, Web, React Native y Windows. Proporciona un flujo completo de herramientas desde AE a cada terminal. Los diseñadores pueden exportar animaciones a través del complemento Bodymovin de AE json 文件y luego a través de Lottie 实现动画效果.确保动画的还原度
lottie实现的动画效果：
lottie-web
lottie-web admite una variedad de funciones y proporciona funciones complejas de control y monitoreo de animaciones.
Un ejemplo de uso es el siguiente:
lottie.loadAnimation({
container: animationWindow,
renderer: 'svg',
loop: true,
autoplay: true,
path: 'https://linwu-hi.github.io/lottie/animation_ll2ddfyg.json'
});
Cómo controlar la reproducción de la animación:
| nombre | describir |
|---|---|
| animacion.play | Reproducir la animación, comenzando desde el cuadro detenido actualmente |
| detener | Deja de reproducir la animación y vuelve al cuadro 0 |
| pausa | Pausa la animación, deteniéndose en el cuadro actual y manteniendo presionado |
| Ir A Y Detener | animation.goToAndStop(value, isFrame); salta a un determinado momento/fotograma y se detiene. isFrame (falso predeterminado) indica si el valor representa el marco o el tiempo (milisegundos) |
| ir a y jugar | animation.goToAndPlay(value, isFrame); salta a un determinado momento/fotograma y reprodúcelo |
| Ir A Y Detener | animation.goToAndStop(30, true); Salta al fotograma 30 y detente |
| jugarSegmentos | animation.playSegments(arr, forceFlag); arr puede contener dos números o una matriz de dos números, forceFlag indica si se debe forzar la reproducción del segmento inmediatamente animation.playSegments([10,20], false); después de reproducir el segmento anterior , reproducir 10-20 fotogramas animation.playSegments([[0,5],[10,18]], true); reproducir directamente 0-5 fotogramas y 10-18 fotogramas |
| velocidad fijada | animation.setSpeed(velocidad); establece la velocidad de reproducción, la velocidad es 1 significa velocidad normal |
| establecerDirección | animation.setDirection(dirección); Establezca la dirección de reproducción, 1 significa reproducción hacia adelante, -1 significa reproducción hacia atrás |
| destruir | animation.destroy(); Eliminar la animación, eliminar la etiqueta del elemento correspondiente, etc. Al desmontar, este método debe llamarse |
Escuche los eventos:
| nombre | describir |
|---|---|
| datos_listos | Después de cargar la animación json |
| completo | La reproducción está completa (no se activará en la reproducción en bucle) |
| loopComplete | Se activa cuando finaliza la reproducción en bucle actual (reproducción en bucle/reproducción sin bucle) |
| entrarFrame | Se activará cada vez que se ingrese un cuadro, cada cuadro se activará durante la reproducción y el método de parada también se activará |
| inicio de segmento | Se activará cada vez que se ingrese un cuadro, cada cuadro se activará durante la reproducción y el método de parada también se activará |
| DOM Cargado | Activado después de que se ha agregado dom relacionado con la animación a html |
| destruir | se disparará cuando se elimine la animación |
Actuación de animación de Lottie
Al comparar las animaciones de Lottie y Gif, los datos muestran que las animaciones de Lottie tienen tamaños de archivo más pequeños, velocidades de cuadro más altas y mejor rendimiento.
- Animación GIF
- LottieAnimación
reaccionar-lottie
react-lottie encapsula lottie-web en un componente de React, lo que facilita su uso en React.
import React from 'react'
import Lottie from 'react-lottie';
import * as animationData from './pinjump.json'
export default class LottieControl extends React.Component {
constructor(props) {
super(props);
this.state = {isStopped: false, isPaused: false};
}
render() {
const buttonStyle = {
display: 'block',
margin: '10px auto'
};
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
};
return <div>
<Lottie options={defaultOptions}
height={400}
width={400}
isStopped={this.state.isStopped}
isPaused={this.state.isPaused}/>
<button style={buttonStyle} onClick={() => this.setState({isStopped: true})}>stop</button>
<button style={buttonStyle} onClick={() => this.setState({isStopped: false})}>play</button>
<button style={buttonStyle} onClick={() => this.setState({isPaused: !this.state.isPaused})}>pause</button>
</div>
}
}
vista-lottie
vue-lottie encapsula lottie-web en un componente vue, lo que facilita su uso en vue.
también tienenvue3-lottie
<template>
<div id="app">
<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
<div>
<p>Speed: x{{animationSpeed}}</p>
<input type="range" value="1" min="0" max="3" step="0.5"
v-on:change="onSpeedChange" v-model="animationSpeed">
</div>
<button v-on:click="stop">stop</button>
<button v-on:click="pause">pause</button>
<button v-on:click="play">play</button>
</div>
</template>
<script>
import Lottie from './lottie.vue';
import * as animationData from './assets/pinjump.json';
export default {
name: 'app',
components: {
'lottie': Lottie
},
data() {
return {
defaultOptions: {animationData: animationData},
animationSpeed: 1
}
},
methods: {
handleAnimation: function (anim) {
this.anim = anim;
},
stop: function () {
this.anim.stop();
},
play: function () {
this.anim.play();
},
pause: function () {
this.anim.pause();
},
onSpeedChange: function () {
this.anim.setSpeed(this.animationSpeed);
}
}
}
</script>