lottie动画动态更改切图添加事件

最近有个业务需求用到好几个lottie动画，并且动画中需要根据不同的用户展示对应的用户头像及提示文案。刚开始调研时发现有一个lottie-api是用来处理这种情况的，但是后面发现其实可以让设计在输出lottie动画时在对应的元素增加一个id（注意要让设计把你要动态化的dom节点在lottie加载完成后就出现，否则监听DOMLoaded会拿不到对应的dom），我们就可以在加载完动画的json文件后通过id找到对应的dom节点并进行后续操作：

  import Lottie from 'lottie-web'//动态引入lottie文件const lottie = await import(`../assets/lotties/xxx.json`);this.lottie = Lottie.loadAnimation({container: lottieRef.current,loop: false,autoplay: false,animationData: lottie,});//监听动画的DOMLoaded事件，lottie的dom节点加载完后this.lottie.addEventListener('DOMLoaded', () => {//1、更换动画中的图片const imgWrap = document.getElementById(LOTTIE_IMG_MAP[key]);const img = imgWrap.querySelector('image');const newImg = this.getNewImg(key, null);if (img && newImg) {img.setAttribute('href', newImg);}//2、给动画的按钮增加点击事件const btnWrap = document.getElementById(LOTTIE_BTN_MAP[key]);if (btnWrap) {//在这里监听事件btnWrap.addEventListener('click', () => {this.closeLottie();})}})//播放lottiethis.lottie.play();