json返回的img图片被原样输出_Aha Lottie | 动态修改 Lottie 中的图片

01. how

接着上一篇动态修改 Lottie 中的文本，来说说如何完成这个兄弟功能

原理不再赘述，关于图片我们同样可以在三个阶段分别找到修改方案

这篇文章会讲解如何将下面这段 lottie 动画中的红包 替换为礼物盒

知乎视频​www.zhihu.com

Alipay Design​sage.alipay.com

02.A 修改 lottie.json

所有的图片都会被放置到 json 的 assets 数组中，并用 p 字段标识相应地址（http 或 base64），所以这种方案还是比较简单的

示例代码

const 

修改后效果

知乎视频​www.zhihu.com

02.B 修改 JS 对象

相比修改文本，要修改图片略麻烦一些，主要是 lottie-web 本身并没有直接提供类似 updateDocumentData 这样的方法，不过只要知道实现原理，找到解法并不难

通过阅读 lottie-web 源码，可以发现 svg 和 canvas 模式下，图片的实现不一样（svg, canvas），所以我们的修改方案也需要判断先判断 renderer 模式

示例代码

anim.addEventListener('DOMLoaded', () => {
  if (anim.renderer.rendererType === 'canvas') {
    // canvas 模式下的图片替换
    anim.renderer.elements[0].elements[8].img.src = 「'https://gw.alipayobjects.com/mdn/rms_91e1e4/afts/img/A*2mfsTo-gbDgAAAAAAAAAAABkARQnAQ';
  } else {
    // svg 模式下的图片替换，前两个参数为固定值
    anim.renderer.elements[0].elements[8].innerElem.setAttributeNS(
      'http://www.w3.org/1999/xlink',
      'href', 
      'https://gw.alipayobjects.com/mdn/rms_91e1e4/afts/img/A*2mfsTo-gbDgAAAAAAAAAAABkARQnAQ'
    );
  }  
});

注意，在 canvas 模式下替换的图片需要保持与原图片尺寸一致，否则实际动画效果会有问题；svg 模式下则受益于svg image 元素的特性不需要如此强的约束

03.C 修改 svg 元素

与文本同理，仅限于 svg 渲染模式，只需要设计师在图层命名时，尾部加入 #xxx 即可，这样生成的 svg 元素就会有一个 id 属性为 xxx，比如

那么通过 DOM API 找到元素修改属性即可

anim.addEventListener('DOMLoaded', () => {
  const element = document.getElementById("xxx");
  element.querySelector("image").href = 'https://gw.alipayobjects.com/mdn/rms_91e1e4/afts/img/A*2mfsTo-gbDgAAAAAAAAAAABkARQnAQ';
});

总结

动态修改 lottie 中的图片，与动态修改文本大同小异，只是 JSON 结构的属性、JS 对象的 API 有所不同，另外图片不像文本，在 canvas 模式下可以正常使用，lottie 导出时也没有特殊的要求