lottie动态替换文字及图片

原始动画

<template>
    <div>
      <div class="demo" ref="demo"></div>
    </div>
  </template>
  
  <script>
  import lottie from 'lottie-web';
  import dataJson from './data.json'
  import ajpg from '@/assets/a.jpg'
  export default {
    name: 'App',
    mounted() {
      this.demo = this.renderLottie(this.$refs.demo, dataJson)
      this.demo.addEventListener("DOMLoaded", () => {

        // 在动画放到页面上后手动修改图片 需要在layer数据加上ln属性，如 ln: goodsImg
        let goodsImg = document.getElementById('goodsImg')
        goodsImg.querySelector('image').setAttribute("href", ajpg);

        // 文字需要在每一帧进行覆盖
        const replaceText = () => {
          // 在动画放到页面上后手动修改文字 需要在layer数据加上ln属性，如 ln: textElement
          let textElement = document.getElementById('textElement')
          // 通过text上的x、y属性调整文字的位置
          textElement.innerHTML = `<text x="-30">$2000000</text>`
          requestAnimationFrame(replaceText)
        }
        requestAnimationFrame(replaceText)
        
      })

      // this.demo.goToAndStop(110, true)
    },
    methods: {
      renderLottie(ref, data) {
        return lottie.loadAnimation({
          container: ref,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData: data,
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .demo {
    width: 375px;
    margin: 0 auto;
  }
  </style>