요구사항

• After Effects로 만든 json 파일에서 에셋을 교체해, 유저마다 다른 애니메이션을 보여줄 수 있는 기능
• 모바일에서도 문제없이 동작
• twitter player card 에 업로드 가능
• 보여지는 에니메이션을 다운로드 할 수 있는 기능

에셋 교체

• 이미지

  "assets": [
    {
      "id": "axie image color.png",
      "w": 1280,
      "h": 960,
      "u": "images/",
      "p": "img_0.png",
      "e": 0
    },

위 json 에서 u,p 변경

• 폰트
  • svg 랜더시
    • .json fonts/list 에 데이터 추가됨
    • 웹에서 별도로 로딩 필요
  • canvas
    • after effect 에서 설정 변경해야함
      • https://github.com/airbnb/lottie-web/issues/3104
    • .json에 char 관련 데이터 추가됨

정상적인 에니메이션을 위해 웹에서 이미지 에셋과 폰트가 모두 로딩되었을때 재생함수 호출해야 함

모바일에서의 재생

• mobile 에서는 frame drop 으로 light-lottie 사용도 가능
  • glare 효과는 적용되지 않음
  • https://github.com/airbnb/lottie-web/wiki/Lottie-Light

twitter player card

https://developer.x.com/en/docs/x-for-websites/cards/overview/player-card#testing 이 문서 따라하면 동작 meta data 를 잘 성정해야함