lottie-web的使用

232 阅读1分钟

1、安装

$ npm i lottie-web -D

2、使用(.json文件的使用,如果是链接则是 path: '...')

-- utils
import lottie from 'lottie-web'
/**
 * lottie-web 加载 .json 文件动画
 * @param dom
 * @param jsonFile
 */
export const jsonAnimation = (dom: string, jsonFile: any) => {
  lottie.loadAnimation({
    container: document.querySelector(dom) as Element,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: jsonFile
  })
}
-- page
import { jsonAnimation } from '@/utils'
import LoginBgc from '@/assets/json/login_bgc.json'

jsonAnimation('#login_bgc', LoginBgc)