내가 답답해서 적어두는 리액트에서 쓰는 Lottie 색상바꾸기

• json 파일에서 ty: fl 부분을찾아 K 배열을 변경한다.
  [R,G,B] 이며 , 0-255범위가 아닌, 0-1의 범위를 갖고있다 ( 0.74 , 0.23,1 등)

{
  ty: "fl",
  c: {
    a: 0,
    k: [
      0,
      0,
      0,
    1
    ]
  },
  o: {
    a: 0,
    k: 100
  },
  nm: "Fill 1",
  mn: "ADBE Vector Graphic - Fill"
},

• lottie-colorify 패키지 설치

1. 패키지 설치

npm i lottie-colorify 

2. lottie-colorify 임포트하기
   임포트 위치는 LottieComponent ( 전글 참고 )

import Lottie from 'lottie-web';
import { colorify,replaceColor,flatten,getColors } from 'lottie-colorify';
import SomeAnimation from './SomeAnimation.json';

3. Lottie 컴포넌트에서 작성하면된다

// 1. colorify : 색상을 변경 ( 원하는 색상 배열에 넣기 ) 
import Lottie from 'lottie-web';
import { colorify } from 'lottie-colorify';
import SomeAnimation from './SomeAnimation.json';

const animation = Lottie.loadAnimation({
  container: container.current,
  animationData: colorify(['#ef32d0', [50, 100, 200], '#fe0088'], SomeAnimation),
});

// 2. replaceColor : 단일색상 변경하기 ( A 를 B로 )
import Lottie from 'lottie-web';
import { replaceColor } from 'lottie-colorify';
import SomeAnimation from './SomeAnimation.json';

const animation = Lottie.loadAnimation({
  container: container.current,
  animationData: replaceColor('#ef32d0', '#fe0088', SomeAnimation),
});

// 3. 단색으로 통일하기 
import Lottie from 'lottie-web';
import { flatten } from 'lottie-colorify';
import SomeAnimation from './SomeAnimation.json';

const animation = Lottie.loadAnimation({
  container: container.current,
  animationData: flatten('#fe0088', SomeAnimation),
});

//4. 현재색상 추출하기
import Lottie from 'lottie-web';
import { getColors } from 'lottie-colorify';
import SomeAnimation from './SomeAnimation.json';

console.log(getColors(SomeAnimation));

// 5. 여러색상을 하나하나 바꾸기
// loadAnimation 을 호출 하기전 replaceColor를 이용해서 변경해준다.
let anim = loaded.json;
anim = replaceColor('#ff0000', '#00ff00', anim);
anim = replaceColor('#0000ff', '#ff0000', anim);
anim = replaceColor('#00ff00', '#0000ff', anim);


myAnim = lottie.loadAnimation({
  animationData: anim
});

참고 : https://www.npmjs.com/package/lottie-colorify?activeTab=readme