레이어 닫기버튼을 위해 로띠와 한바탕 놀아보았다.

이번 배포건에 포함되는 업무 중 하나는 개선된 ui를 적용하는 것이었다. 정말 단순하게 생각하면 디자인 -> 퍼블리싱 -> 개발로 나는 변경된 마크업만 적용시켜주면 되었다. 근데 여기서 lottie가 사용되는 조건이 있었다.

1. 버튼을 눌러 레이어를 오픈한다.
2. 레이어 닫기 버튼이 lottie로 animation 동작을한다.
3. 레이어 닫기 버튼이 유지된다.
4. 레이어가 닫힐 때, lottie로 animation 동작을 한다.

의 시나리오를 가지고 있었다.

여기서 문제가 발생했는데,

1. 레이어가 열고 닫힐 때마다 로띠를 실행시켜주려면 play 후, onComplate 되었을 때 destroy를 시켜주어야한다.
2. 이때, destroy되며 lottie svg가 사라진다. (json을 svg형식으로 랜더링함)
3. 멈추어있는 버전의 버튼 모양이 bg에 깔려있지 않아 버튼 ui가 사라지게 된다.

이 현상이 발생해 퍼블리셔에게 button 마크업에 bg를 깔아달라고 요청했다. 레이어 닫기를 표시하는 X가 그려진 이미지였는데, 로띠파일과 깔아준 bg 파일이 상이하여 애니메이션이 끝난 후 X 표시가 줄어드는 현상이 발생했다!

해당 현상에 대하여 공유하고 다른 파일을 요청드렸더니, 어쩔 수 없다며 퍼블리싱에서 구현한 코드를 보여주셨다. 바닐라스크립트로 짠 코드였는데, 레이어 오픈 버튼에 addListener event를 걸어서 버튼이 클릭 되면, 레이어 닫기의 오픈 버튼 로띠파일을 play, 레이어 닫기의 클로즈 버튼 로띠파일을 stop시킨다. 반대로 레이어 닫기 버튼을 클릭시에는 오픈 버튼 로띠파일을 stop, 레이어 닫기의 로띠파일을 play시킨다. 이 후, 레이어가 닫혀야 하니 로띠파일들은 그냥 노드에 play 상태로 남겨진 채 display: none이 된다.

더불어 레이어 닫기 하나의 버튼에 레이어가 열렸을 때 버튼 마크업, 레이어가 닫힐 때 버튼 마크업을 따로주어 서로 display:none으로 컨트롤한다.

개인적으로는 별로 좋지 않은 방법이라고 생각되었는데, bg도 깔아주셨고, 나름 작성하신 코드도 쉐어해주셔서 더이상 뭘 요청드릴 수 없어 조금 꼬았지만 js에서 해결하였다.

1.레이어가 오픈되었을 때, 레이어 닫기 오픈 버튼 로띠파일을 실행 시키고 onComplate 시에 stop 시킨다.
2. 레이어 닫기 오픈 버튼 로띠파일의 로띠 설정을 변수에 저장해둔다. (이렇게 해야 실행된 애니메이션 아이디가 동일한 정보를 가져올 수 있다.)

var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
})

3. 레이어 닫기 클로즈 버튼 클릭 시, 상단에서 저장한 변수를 destroy해주고, 새롭게 닫기 클로즈 버튼의 로띠를 바로 실행 후, 완료 시 디스트로이 해준다.

animation.destroy();
레이어닫기.paly();

이렇게 진행했을 때, 더 나아진 점은

1. 레이어 닫기 오픈 버튼의 로띠가 실행 후, 멈춤으로 버튼이 사라지지 않고 그대로 노출되어있다.
2. 레이어 닫기 오픈 버튼 sgv, 레이어 닫기 클로즈 버튼 svg가 레이어가 뜨기 전에 노드에 존재하지 않는다. (만약 존재한다면 레이어를 사용하지 않았을 때에도 정보를 읽어오는 셈으로 초반 로드가 느리다.)
3. 마크업을 하나만 사용할 수 있다. (play 되는 버튼을 숨겨줄 필요없이 destroy 시키기 때문)
4. 노드가 더 깔끔하여 성능에 큰 이점이 없더라도 분명 작게라도 이점이 있다.

 

 

 

https://airbnb.io/lottie/#/

Lottie Docs

 

https://hyermione.tistory.com/125

lottie란 무엇인가. lottie가 gif보다 나을까?