lottie-palette v0.0.6

LottiePalette

English | 中文

介绍

LottiePalette 是一个「运行时」捕获单帧修改 Lottie 动画颜色的工具，目前仅支持 SVG 的渲染方式。

Demo：LottiePaletteViewer

安装

npm install lottie-palette
# or
yarn add lottie-palette

或者直接引用到你的页面上：

<script src="./lottie-palette.js"></script>

使用

⚠️ 注：LottiePalette 不包含 Lottie，请单独引入

import Lottie from 'lottie-web/build/player/lottie_svg'
import LottiePalette from 'lottie-palette'

let lp = null

const lottie = Lottie.loadAnimation({
  container: document.getElementById('#lottie-wrapper'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path,
  rendererSettings: {
    progressiveLoad: false // 关闭按需加载以确保路径在DOMLoaded时全部加载
  }
})

lottie.addEventListener('DOMLoaded', () => {
  lp = new LottiePalette(document.getElementById('#lottie-wrapper'))
  // 初始化实例后，LottiePalette会自动生成当前svg的颜色映射表
})

// 假如你想改变动画中色值为的黑色元素改为白色，你可以：
lp.updateColor('rgb(0, 0, 0)', '#fff', true) // 第三个参数为是否更新渐变色
// or
lp.updateColor('#000', 'rgb(255, 255, 255)', true)

⚠️ 注：

1. 假如你想多次更新同一个元素（同一系列）的颜色，请确保 updateColor() 的第一个参数为最开始的颜色（LottiePalette 实例化时的状态），若你想刷新 LottiePalette 内颜色映射表的状态，可以调用 updateMaps()。
2. 在 DOMLoaded 时实例化 LottiePalette 能满足大部分场景，若出现颜色缺少的情况（例如动画的颜色是动态变化的）请自己控制 LottiePalette 的初始化时机或使用 updateMaps()。

方法