vue3+ts+lottie动画

效果

前言

1.动画部分试用lottie, 文字滚动使用的elementui走马灯
2.lottie资源官网: https://lottiefiles.com/
3.lottie详细参考(大神中文总结): https://juejin.cn/post/6983670062293598221

html代码

  <el-row >
  <!--      el-row, el-col标签为布局使用,参考时忽略-->
      <!--      动画部分-->
      <el-col :span="1">
        <div style="position: relative">
          <div style="position: absolute;right: 10px;width: 40px;height: 40px;" id="lottie"></div>
        </div>
      </el-col>
      
      <!--      走马灯部分-->
      <el-col :span="8">
          <el-carousel height="40px" direction="vertical" indicator-position="none">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 text="2xl" justify="center">Message....{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
      </el-col>
</el-row >

TS代码

//安装lottie
npm install lottie-web

import lottie from "lottie-web" //引入lottie
import alertIcon from "../assets/dynamic_icons/alert.json"  //引入自己动画的json文件

//初始化loctie
let animation
const initLottie = () => {
  animation = lottie.loadAnimation({
    container: document.getElementById("lottie") as Element,
    renderer: "svg",
    loop: true,   //循环播放 true/number/false
    autoplay: true,
    animationData: alertIcon
  });
  animation.play()
}

onMounted(() => {

  if (location.href.indexOf("#reloaded") == -1) {
    location.href = location.href + "#reloaded";
    window.location.reload();
  } else {
    initLottie()
  }


})

css代码

  //样式根据自己需要修改即可
.el-carousel__item h3 {
  color: #FF6E31;
  opacity: 0.75;
  line-height: 40px;
  margin: 0;
  text-align: left;
}