Skip to content

Latest commit

 

History

History
78 lines (58 loc) · 4.17 KB

README.CN.md

File metadata and controls

78 lines (58 loc) · 4.17 KB
Raw

LottiePalette

English | 中文文档

npm GitHub file size in bytes

介绍

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

Demo：Lottie Palette Viewer

安装

# npm
npm install lottie-palette
# yarn
yarn add lottie-palette
# cdn
<script src="https://cdn.jsdelivr.net/npm/lottie-palette@0.0.6/dist/lottie-palette.js"></script>

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

<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()。

方法

方法 说明 参数 返回
[[Constructor]] LottiePalette 构造函数 $element:Element 初始化的 SVG 动画元素
updateColor 更新单个颜色 key:String 初始颜色（接受 rgb，hex 格式） value:String 替换颜色 isUpdateGrad: Boolean 是否更新渐变
updateLinearGrads 更新线性渐变（建议使用 updateColor） key:String 初始渐变的 lottie-palette-id value:String 替换渐变的 lottie-palette-id
updateLinearGradColor 更新渐变中的单个颜色 key:String 初始颜色（接受 rgb，hex 格式） value:String 替换颜色
getInitColors 获取映射表中全部颜色 :Array，元素以 rgb 形式展示
getInitLinearGrads 获取映射表中全部线性渐变 type:String 返回数组中元素的类型（'css' 'id'），默认为'css'
updateMaps 更新颜色映射表