关键: 设计师那边要给要操作的地方 ,增加id ; 

 

通过id,去操作要加数据的地方;稳如狗~~  

 

如果是动态图片,那么 设计师给的josn 生成的 svg, 格式必须是 : <g><image></image></g>,如下图所示

如果是文字,那么设计师要给的 json 生成的 svg, 格式必须 <g><text><tspan></tspan></text></g>,如下图所示,

不清楚的话,觉得有用的话,欢迎留言~  (转载请说明出处)

    _this.lottieFunc(boat, 'boat');



 lottieFunc: function(animationData, id){
        var _this = this;
        var params = {
            container: document.getElementById(id),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            animationData: animationData
        };
        var anim;
   
        anim = lottie.loadAnimation(params);
        anim.addEventListener('DOMLoaded', () => {  

            const txt_1 = document.getElementById("txt_1");
            txt_1.querySelector("tspan").innerHTML = "拾亿";

            const txt_2= document.getElementById("txt_2");
            txt_2.querySelector("tspan").innerHTML = "距离100米";
      
            const txt_3 = document.getElementById("txt_3");
            txt_3.querySelector("tspan").innerHTML = "阿道夫";

            const txt_4= document.getElementById("txt_4");
            txt_4.querySelector("tspan").innerHTML = "距离98米";

            const txt_5 = document.getElementById("txt_5");
            txt_5.querySelector("tspan").innerHTML = "大师傅";

            const txt_6= document.getElementById("txt_6");
            txt_6.querySelector("tspan").innerHTML = "距离10米";
            

            $('#img_1').find('image').attr('href','/images/avatar.jpg');
            $('#h_2').find('image').attr('href','/images/logo.jpg');
            $('#h_3').find('image').attr('href','/images/content.png');
          });
       
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐