Lottie와 함께 애니메이션-CSS 튜토리얼-php.cn

JSON 파일을 가져옵니다

HTML에 스크립트를 추가하십시오

활성 애니메이션

예를 들어보십시오

트리거 애니메이션

캔버스?

더 많은 작업

집

웹 프론트엔드

CSS 튜토리얼

Lottie와 함께 애니메이션

尊渡假赌尊渡假赌尊渡假赌

Mar 28, 2025 am 10:34 AM

Lottie와 함께 애니메이션

웹 애니메이션은 매우 흥미로울뿐만 아니라 사용자 참여를 효과적으로 향상시키고 방문자를 고객으로 전환합니다. 트위터의 "좋아요"버튼을 생각해보십시오 : 좋아하는 것을 클릭하면 화려한 거품이 하트 모양의 버튼 주위에서 화려한 거품이 확산되고 버튼이 점차 원이되고, 마침내 붉은 색이 표시된 후에는 빨간색 채우기 상태가됩니다. 심장 모양 개요를 간단히 채우면 그 효과가 훨씬 나빠질 것입니다. 이러한 흥분과 만족감은 애니메이션이 사용자 경험을 향상시키는 방법을 완벽하게 보여줍니다.

이 기사에서는 Lottie를 사용하여 웹 페이지에서 Adobe After Effects 애니메이션을 렌더링하여 버튼과 같은 Twitter와 같은 복잡한 애니메이션 효과를 달성하는 방법을 소개합니다.

BodyMovin은 애니메이션을 JSON 형식으로 내보내는 Adobe After Effects의 플러그인입니다. Lottie는 이러한 JSON 애니메이션을 모바일 및 웹 페이지에서 기본적으로 렌더링 할 수있는 라이브러리입니다. 그것은 Hernan Torrisi에 의해 만들어졌습니다. "나는 후 효과를 사용하지 않고이 게시물이 나를위한 것이 아닐 수도있다"고 생각한다면 잠시 기다려주세요. 나는 후 효과를 사용하지 않지만 프로젝트에서 Lottie를 사용했습니다.

물론 웹 페이지에서 애니메이션을 만들기 위해 Lottie를 사용할 필요는 없습니다. 또 다른 방법은 처음부터 애니메이션을 디자인하는 것이지만, 특히 Lottie가 다루는 복잡한 애니메이션 유형의 경우 매우 시간이 많이 걸릴 수 있습니다. 또 다른 옵션은 무제한 애니메이션 유형을 가진 GIF 애니메이션을 사용하는 것이지만, 파일 크기는 일반적으로 BodyMovin에서 생성 한 JSON 파일의 두 배입니다.

그것이 어떻게 작동하는지 이해하기 시작합시다.

JSON 파일을 가져옵니다

Lottie를 사용하려면 After Effects 애니메이션이 포함 된 JSON 파일이 필요합니다. 다행히 ICONS8은 JSON, GIF 및 After Effects 형식에서 사용할 수있는 많은 무료 애니메이션 아이콘을 제공합니다.

HTML에 스크립트를 추가하십시오

또한 HTML에서 BodyMovin 플레이어의 JavaScript 라이브러리를 소개하고 loadAnimation() 메소드를 호출해야합니다. 기본 방법은 다음과 같습니다.

<div id="icon-container"></div>
<script>
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('icon-container'), // 必需
    path: 'data.json', // 必需
    renderer: 'svg', // 必需
    loop: true, // 可选
    autoplay: true, // 可选
    name: "Demo Animation", // 可选
  });
</script>

로그인 후 복사

활성 애니메이션

애니메이션이 컨테이너에로드 된 후 이벤트 리스너를 사용하여 활성화 방법을 구성하고 애니메이션의 동작을 트리거 할 수 있습니다. 다음은 사용 가능한 속성입니다.

container : 애니메이션의 DOM 요소를로드하십시오
path : 애니메이션이 포함 된 JSON 파일의 상대 경로
renderer : SVG, Canvas 및 HTML을 포함한 애니메이션 형식
loop : 부울 값, 애니메이션이 루프가 재생되는지 지정
autoplay : 부울 값,로드 후 애니메이션이 자동으로 재생되는지 지정합니다.
name : 미래 참조에 사용되는 애니메이션 이름

이전 예에서는 animationData 속성에 주석을 달았습니다. 그것은 path 속성에 상호 배타적이며 내보내는 애니메이션 데이터를 포함하는 객체입니다.

예를 들어보십시오

아이콘 에서이 애니메이션 재생/일시 정지 제어 아이콘으로 Lottie를 사용하는 방법을 보여주고 싶습니다.

BodyMovin Player Library는 여기에서 정적으로 호스팅되며 HTML에 직접 배치 할 수 있지만 패키지로도 사용할 수 있습니다.

 NPM 설치 LOTTIE-WEB ### 또는 YARN ADD LOTTIE-WEB

로그인 후 복사

그런 다음 HTML 파일에 설치된 패키지의 DIST 폴더의 스크립트를 포함하십시오. SkyPack에서 라이브러리를 모듈로 가져올 수도 있습니다.

 "https://cdn.skypack.dev/lottie-web"에서 lottieweb 가져 오기;

로그인 후 복사

현재 일시 정지 버튼이 루프 재생 중이며 자동으로 재생됩니다.

애니메이션이 액션에 의해 트리거되도록 변경합시다.

트리거 애니메이션

AutoPLay가 꺼지면 After Effects에서 내보내는 방식이므로 정적 일시 정지 아이콘이 나타납니다.

그러나 걱정하지 마세요! Lottie는 애니메이션 인스턴스에 적용 할 수있는 몇 가지 방법을 제공합니다. 즉, NPM 패키지의 문서화가 더 포괄적입니다.

우리는 몇 가지 일을해야합니다.

처음에는 "재생"상태로 표시되었습니다.
클릭하면 애니메이션을 "일시 중지"하도록 설정하십시오
그런 다음 클릭하면 둘 사이의 애니메이션을 전환하십시오.

goToAndStop(value, isFrame) 메소드는 여기서 매우 적합합니다. 애니메이션이 컨테이너에로드되면이 메소드는 애니메이션이 제공된 값으로 이동하도록 설정 한 다음 여기에서 중지합니다. 이 경우 애니메이션이 재생 될 때 애니메이션의 가치를 찾아서 설정해야합니다. 두 번째 매개 변수는 제공된 값이 시간 또는 프레임을 기반으로하는지 여부를 지정합니다. 기본값이 false (즉, 시간 기반 값)의 부울 유형입니다. 우리는 애니메이션을 프레임으로 재생하도록 설정하려면 true로 설정했습니다.

값을 기반으로 한 타임 라인을 기반으로 한 타임 라인의 특정 지점으로 애니메이션을 설정합니다. 예를 들어, 애니메이션 시작시 시간 값 (일시 정지시)은 1입니다. 그러나 애니메이션은 프레임 값에 따라 특정 프레임 값으로 설정됩니다. Techterms에 따르면 프레임은 이미지 시퀀스의 단일 이미지입니다. 따라서 애니메이션의 프레임 값을 5로 설정하면 애니메이션이 애니메이션의 다섯 번째 프레임으로 이동합니다 (이 경우 "이미지 시퀀스").

다른 값을 시도한 후, 나는 애니메이션이 프레임 값 11에서 16에서 1에서 재생된다는 것을 알았습니다. 그래서 나는 14를 안전하게 선택했습니다.

이제 사용자가 클릭하면 잠시 멈추고 사용자가 다시 클릭하면 재생할 수 있도록 애니메이션이 필요합니다. 다음으로 playSegments(segments, forceFlag) 메소드가 필요합니다. segments 매개 변수는 두 숫자를 포함하는 배열 유형입니다. 첫 번째 및 두 번째 숫자는 메소드가 각각 읽어야하는 첫 번째 및 마지막 프레임을 나타냅니다. forceFlag 메소드가 즉시 트리거되어야하는지 여부를 나타내는 부울 값입니다. False로 설정되면 애니메이션이 segments 배열의 첫 번째 프레임으로 지정된 값으로 재생 될 때까지 기다립니다. 사실이라면 클립이 즉시 재생됩니다.

여기서 나는 클립을 플레이에서 일시 중지로 재생 해야하는시기를 나타내는 깃발을 만들었고, 일시 정지에서 재생까지 클립. 또한 전환을 즉시 수행하기를 원하기 때문에 forceFlag Boolean을 True로 설정했습니다.

그게 다야! 애프터 효과에서 애니메이션을 브라우저로 렌더링합니다! 고마워요!