어느 날 우리 UI 디자이너가 나에게 와서 내가 프로그램에서 작성한 애니메이션을 그들이 나에게 준 json 애니메이션으로 대체해야 한다고 말했습니다. 그 이유는 일부 애니메이션은 매우 복잡하고 내가 직접 작성하면 예상한 효과를 얻을 수 없기 때문입니다. 글을 쓰다가 문득 이런 복잡한 애니메이션을 gif로 하면 어떨까 하는 생각이 들었어요. 맞은 편에 앉은 안드로이드 개발자가 재생하면 gif 품질이 좋지 않을 수도 있다고 대답하더군요. 알겠습니다.)
나:? ? ? ? 클라이언트는 json 애니메이션을 추가할 수 있습니다. H5 페이지에서 json 애니메이션을 읽을 수 있다는 말은 들어본 적이 없습니다.
디자이너는 확신을 갖고 웹 버전이 있다고 말했습니다.
이 글을 쓰면서 저는 우리 디자이너 소녀들을 정말 칭찬하고 싶습니다. 그들의 압박 속에서 거의 많은 좋은 솔루션을 찾았습니다.
H5 페이지에서 json 애니메이션을 사용하는 방법에 대한 질문이 있습니다.
H5 페이지 내에서 json 애니메이션을 사용하는 방법이때 디자이너가 나에게 링크를 보냈습니다. 여기 lottie-web을 참조하세요. 이 라이브러리는 Airbnb의 오픈 소스 애니메이션 라이브러리이며 사용이 매우 간단합니다. 디자이너는 AE에서 만든 애니메이션을 통해 JSON 파일만 내보내면 됩니다. 소프트웨어를 사용하면 프런트 엔드에서 Lottie를 사용하여 JSON 파일을 직접 로드하여 애니메이션을 생성할 수 있습니다. 디자이너가 많은 gif를 잘라낼 필요도 없고 복잡한 드로잉을 수행하기 위해 프런트 엔드도 필요하지 않습니다. Stone, Lottie는 iOS, Android, 웹, React를 포함한 모든 플랫폼에서 사용할 수 있습니다. Native를 사용할 수 있으며, 메모리도 덜 차지하고 로딩도 원활합니다. (나는 왜 이제서야 이런 마법 같은 것을 발견하고 있는 걸까?
너무 많이 말했는데, H5 페이지에서 어떻게 사용하나요?
매우 간단합니다. 디자이너가 생성한 폴더가 전송됩니다(디자이너는 AE에 lottie 플러그인을 추가하고 내보내기만 하면 됩니다). 그러면 다음과 같은 모습이 됩니다. 그것이 어떻게 작동하는지 알고 있습니다. (그래서 저는 여전히 여기에 기술적인 글을 쓰고 있습니다.)
농담은 제쳐두고 실제로 사용 중에 많은 함정에 직면했습니다. 다음은 사용 시 주의해야 할 몇 가지 사항입니다.
1. Demo.html에는 사용 시 보기 흉한 인라인 항목이 많이 있습니다.자세히 살펴보면 실제로 데모.html에는 js와 json이 모두 들어 있습니다. 이때 js와 json을 별도로 구분할 수 있습니다.
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script>
애니메이션에 필요한 json 데이터는 data.json 파일에 들어 있는데, 주어진 json 파일의 데이터 형식은 다음과 같습니다. (너무 길어서 자를 수 없습니다.)
json 파일을 별도의 HTML로 도입하기 위해 스크립트를 사용하려면 오류가 발생하므로 json 파일을 수정하고 앞에 변수를 추가하고 값을 할당해야 합니다. 아래와 같이:
이렇게 하면 js 파일과 동일한 방식으로 json을 가져올 수 있습니다.
<script type=text/javascript src=./data.json></script>
이러한 방식으로 사용 가능한 데모.html은 다음과 같이 줄어듭니다.
<html xmlns=http://www.w3.org/1999/xhtml><meta charset=UTF-8><head> <style> body{ background-color:black; 여백: 0px; : 숨김; } #lottie{ 배경색:#fff; 높이:100%; 숨김; translate3d(0,0,0); text-align: center; 불투명도: 1; </style></head><body><div id=lottie></div><script type=text/javascript src= https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script><script type=text/javascript src=./data.json></script><script> var params = { 컨테이너: document.getElementById('lottie'), 렌더러: 'svg', 루프: true, autoplay: true, animationData: animationData }; 애니메이션; lottie.loadAnimation(params);</script></body></html>물론 js 모듈식 프로그래밍을 사용하는 경우 다음과 같이 data.json을 변경하지 않고 직접 가져올 수 있습니다.
'./data.json'에서 animationData 가져오기2. 모바일 장치에 애니메이션 적용
이것이 함정이라고 생각하는 이유는 디자이너가 나에게 준 애니메이션이 전체 화면이고 투명하지 않은 상태에서 애니메이션을 너비 100%로 배치하고 세로 중앙으로 가로채기를 시도했기 때문입니다. 브라우저에서는 360*640 화면에서 너비가 100%이고 표현은 다음과 같습니다. 아래 그림의 파란색 테두리 부분을 참조하세요)
iPhone 화면으로 전환
이 레이아웃은 img의 object-fit 속성이 포함으로 설정된 경우와 동일하게 작동합니다(object-fit도 보물입니다. 관심 있는 학생들이 공부할 수 있으며 사용하기가 매우 쉽습니다).
여기서 디자이너의 요구를 해결하기 위해 주로 다음 코드를 추가합니다.
js 부분: setTimeout(function() { document.getElementsByTagName('svg')[0].style.height = 'auto';}, 50) css 부분: (lottie에 플렉스 레이아웃 추가) #lottie { width:100 %;높이:100%;변환3d(0,0,0);텍스트 정렬:중간;위치:절대; 왼쪽: 0; z-색인: 3; flex-direction: 행 정렬-항목: 센터;최종 효과:
요약위의 사진 스크린샷은 모두 정적이지만 실제로는 동적 효과가 있습니다. 애니메이션을 추가하는 방법을 모르기 때문에 관심이 있으시면 시도해 보십시오.
적용 범위: 일반적으로 전체 화면이나 부분적으로 복잡한 애니메이션에는 이 방법을 사용할 수 있다고 생각합니다. GIF보다 부드럽고 호환성이 좋습니다. 일부 Android 제품에서는 이 방법을 사용하여 H5 페이지를 멋지게 엽니다. 간단한 애니메이션은 일반적으로 자신의 프로그램으로 구현할 수 있으며 함정을 피할 수 있습니다.
참조 링크:
로티 공식 홈페이지
lottie-web github 주소
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.