LottiePalette
English | 中文
Intro
LottiePalette is a runtime util which can change the color of Lottie ani in single frame, for now it only support SVG renderer.
Demo:LottiePaletteViewer
Install
npm install lottie-palette# or yarn add lottie-palette
or just include the compiled file to your page:
Usage
⚠️ PS:LottiePalette is not include Lottie, please import Lottie additionally.
let lp = null const lottie = Lottie lottie // You can change the black color paths 2 white via this:lp// orlp
⚠️ PS:
- If you want 2 update the color of the same elements (which have same color) multiple times, make sure that the first parameter of
updateColor()
is the inital color (when LottiePalette is instantiated or update map), if you want to refresh the color map, execute theupdateMaps()
function. - Instantiating LottiePalette in
DOMLoaded
event perform well at most cases. In case the color is missing, (for example, the color of the ani is dynamical), please manage the initialization of LottiePalette or just useupdateMaps()
.
Methods
Method | Description | Arguments | Returns |
---|---|---|---|
[[Constructor]] |
the Constructor of LottiePalette | $element:Element SVG Element 2 init |
|
updateColor |
update single color | key:String initial color(accept rgb, hex format) value:String new color value isUpdateGrad: Boolean update gradient or not |
|
updateLinearGrads |
update linear gradient(recommand 2 use updateColor) | key:String initial gradient lottie-palette-id value:String new gradient lottie-palette-id |
|
updateLinearGradColor |
update single color of linear gradient | key:String initial color(accept rgb, hex format) value:String new color value |
|
getInitColors |
get all initial colors | :Array, foramt: rgb | |
getInitLinearGrads |
get all initial linear gradient | type:String the format of array's item ('css' |
'id') , default: 'css' |
updateMaps |
update color map |