美文网首页
vite+vue项目中用lottie做加载动画效果

vite+vue项目中用lottie做加载动画效果

作者: zZ_d205 | 来源:发表于2024-02-03 16:59 被阅读0次

    官网地址:
    https://airbnb.io/lottie/#/web
    本地安装

    npm install lottie-web
    或者:
    yarn add lottie-web
    

    页面引入
    ts:

    import lottie from 'lottie-web'
    onMounted(() => {
      const animationContainer = document.querySelector('#lottie')
      if (animationContainer) {
        lottie.loadAnimation({
          container: animationContainer,
          path: '/animate/data.json', // Required
          loop: true, // Optional
          autoplay: true, // Optional
          name: 'HomeBanner', // Name for future reference. Optional.
        })
      }
    })
    

    html:

         <div id="lottie"></div>
    

    注意事项:
    path:需要写绝对路径
    可将所有文件都放在public文件夹下面,否则打包的时候不会正常打包

    相关文章

      网友评论

          本文标题:vite+vue项目中用lottie做加载动画效果

          本文链接:https://www.haomeiwen.com/subject/xryxadtx.html