Lottie是Airbnb开发的一种轻量级的JavaScript库,它能够在Web、iOS和Android平台上呈现高质量、动态的矢量动画。Lottie使得在应用中使用复杂的矢量动画变得更加容易,并且在不同平台上能够实现更高的视觉一致性。而lottie-web是Lottie的Web版本,使用它可以在Web页面中展示高品质、流畅的动态矢量动画。
安装:
npm i lottie-web
使用:
<template>
<div id="animation"></div>
</template>
<script>
import lottie from 'lottie-web';
export default{
mounted(){
const dom = document.getElementById("animation");
lottie.loadAnimation({
container: document.getElementById('animation'),
loop: true,
autoplay: true,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
quality: 'high',
},
path: 'animation.json'
});
}
}
</script>
<style>
#animatiion{
width: 55%;
height:50%;
}
</style>