After Effects에서 CSS 전환 및 키프레임으로 전환하기

웹사이트는 점점 더 모바일 앱처럼 보입니다. 또한 사용자는 점점 더 앱과 같은 경험을 기대하고 있습니다. 푸시 알림에서 오프라인 모드에 이르기까지 기본 웹 앱이 제공됩니다.

웹 앱이 기본 앱처럼 작동하면 디자인 상호 작용도 사용 사례, 즉 애니메이션의 편재성을 해결하기 위해 변경됩니다. 애니메이션은 Uber에서 Lyft, Snapchat에서 Instagram에 이르기까지 우리가 즐겨 사용하는 모든 앱에서 상호 작용을 유도합니다.

웹 개발자로서 우리는 기본 웹 앱 환경에서 가장 중요한 성능과 유지 관리가 모두 가능한 애니메이션을 만들기 위한 좋은 기반이 필요합니다. After Effects에서 CSS 전환, 애니메이션 및 키프레임으로 이동할 수 있어야 합니다.

애프터이펙트란?

After Effects는 그래픽 및 모션 디자이너가 애니메이션의 키 지정, 구성 및 추적에 사용하는 Adobe의 업계 표준 제품입니다. 많은 디자이너가 애니메이션 시작 및 종료 시간에 대한 참조 테이블과 함께 시각화하기 쉬운 샘플 비디오로 애니메이션 레이어를 내보내 팀에 아이디어를 전달하는 데 사용하는 사실상 의 도구입니다.

데모 비디오와 참조 표는 함께 개발 팀이 애니메이션을 구현하는 방법에 대한 좋은 기준을 제공합니다. 비디오는 전체 그림을 보는 데 사용되며 참조 표는 애니메이션 상호 작용을 만들거나 끊는 미세한 세부 정보를 제공합니다.

After Effects로 할 수 있는 일

After Effects로 만들 수 있는 것은 우리의 상상력에 의해서만 제한됩니다. 이미지 또는 비디오에 대해 끝없는 수의 포스트 프로덕션 효과를 제공할 수 있습니다. 웹의 범위에서는 아이디어를 공유할 수 있는 플랫폼을 제공합니다.

위의 빨간 공을 고려하십시오. 공은 After Effects를 사용하여 애니메이션되어 중앙으로 천천히 롤링되고 잠시 멈춘 다음 천천히 가속되어 뷰포트를 종료합니다. 이동, 크기 조정, 회전 및 색상 변경에 대한 고전적인 웹 애니메이션은 After Effects에서 쉽게 수행되며 애니메이션 구현을 위해 즉시 생성된 요구 사항 문서(또는 비디오 또는 GIF)의 역할을 합니다.

시작하는 데 필요한 도구

JavaScript, HTML5, CSS3 및 기타 여러 언어가 웹 사이트에서 트래픽을 수신하는 대부분의 주요 사용자 에이전트에서 표준이 되면서 이러한 도구를 도매로 사용하는 것이 점점 더 실현 가능해지고 있습니다. 다음은 애니메이션을 구현할 때 염두에 두어야 할 몇 가지 핵심 기술입니다.

CSS 전환

CSS 전환은 CSS 속성의 변경 사항이 요소에 적용되는 속도를 제어하는 ​​방법을 제공합니다. 스타일을 즉시 적용하는 대신(전환 없이) 사용자 정의 규칙을 사용하여 정의된 가속 곡선에 점진적으로 적용할 수 있습니다. 예를 들어 일정 기간 동안 배경색을 검정색에서 흰색으로 변경하는 것입니다.

 transition-property: background-color; transition-duration: 3s;

요소에 이 규칙을 적용하면 배경색이 변경되는 데 3초가 걸리며 점차적으로 회색 음영을 거쳐 검정색에서 흰색으로 변경됩니다. 이것은 중간 값을 계산하는 transition-timing-function과 애니메이션의 시작을 지연시키는 transition-delay를 추가하여 추가로 사용자 정의할 수 있습니다.

CSS 전환은 배경색을 변경하거나 요소를 새 위치로 이동하는 것과 같은 간단한 상호 작용 에 좋습니다.

CSS 애니메이션 사용

CSS 애니메이션은 웨이포인트를 사용하여 애니메이션 사이의 중간 단계를 더욱 세밀하게 제어할 수 있습니다. 웨이포인트(또는 키프레임)는 애니메이션 중에 요소에 특정 스타일을 적용할 때 고정된 시점입니다. 그런 다음 정의된 키프레임을 사용하여 애니메이션의 모양을 배치합니다.

요소가 바운스로 애니메이션되기를 원한다고 가정합니다. 요소는 위로 이동하고 원래 위치로 다시 이동하고 약간 위로 이동한 다음 원래 위치로 다시 이동해야 합니다. 키프레임을 사용하여 탄력적 효과를 애니메이션에 걸리는 시간의 백분율로 나눌 수 있습니다.

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

CSS 전환과 마찬가지로 개발자가 구성할 수 있는 옵션이 많이 있습니다. animation-iteration-count 값을 infinite 사용하여 애니메이션을 무기한 반복하거나 animation-direction 속성을 사용하여 애니메이션이 흐르는 방향을 제어할 수도 있습니다. 많은 CSS 애니메이션 속성은 애니메이션을 디자인에 일치시키기 위한 세밀한 제어를 제공합니다.

CSS 애니메이션은 확장, 회전 및 바운스와 같은 짧은 반복 애니메이션 에 유용합니다.

자바스크립트 사용

JavaScript는 Raspberry Pi 서버에서 클라이언트 측 코드에 이르기까지 다양한 용도로 사용되지만 핵심 용도 중 하나는 여전히 요소의 클래스 이름을 변경하는 것입니다. 클래스 이름을 변경하는 것은 요소의 상태를 관리하는 사소하지만 효과적인 방법입니다.

애니메이션을 시작하기 위해 초기에 숨겨진 구성 요소에 신호를 보내는 active 클래스의 간단한 추가가 한 예입니다. 아래의 공을 고려하십시오. JavaScript를 사용하여 CSS 전환 속성을 사용하여 애니메이션을 트리거하는 클래스를 추가합니다.

이 애니메이션의 첫 번째 부분은 HTML, CSS 및 JavaScript의 간단한 조합을 사용하여 복제할 수 있습니다.

HTML:

 <div class="ball"></div>

CSS:

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

자바스크립트:

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

제한 시간( 500ms )이 만료되면 active 클래스가 ball div 에 추가되어 transform 속성이 변경되고, 이 클래스는 ball 요소의 transform 속성을 감시하는 transition 속성을 트리거합니다. JavaScript를 사용하여 CSS 클래스를 변경하면 구성 요소의 상태를 관리하는 데 도움이 될 뿐만 아니라 CSS 애니메이션 및 전환을 넘어 애니메이션을 더 자세히 제어할 수 있습니다.

JavaScript를 사용하여 애니메이션을 제어하면 사용자 입력 또는 애플리케이션 상태와 같은 동적 요소를 기반으로 이벤트를 트리거 하는 상태 관리 에 유용합니다.

아이디어에서 애프터이펙트, CSS와 자바스크립트까지

페이지의 요소에 애니메이션을 적용해야 하는 작업이 있다고 상상해 보십시오. 이 요소를 빨간 공으로 만들어 봅시다. 공은 페이지를 중심으로 회전해야 하고 확대 및 축소해야 합니다.

After Effects를 사용하면 애니메이션이 트리거될 때 상호 작용이 어떻게 보이는지에 대한 모형을 만들 수 있습니다. 아래의 움직이는 공이 그 예입니다. 빨간 공이 처음에 약간 확장된 다음 원형 루프 주위에서 가속을 시작하고 원래 위치로 다시 감속하는 방법에 주목하세요. 그래야만 공이 원래 크기로 축소됩니다.

움직이거나 멈추기 전에 공이 커지거나 줄어드는 위치 위의 스케일 이동을 고려하십시오. 이것은 디자이너가 After Effects에서 제작한 작은 기능이며 미세한 세부 사항을 놓치지 않도록 개발자에게 명확하게 전달해야 합니다.

그렇기 때문에 After Effects에서 개발자로 넘어가기 전에 몇 가지 준비가 필요합니다. 우리는 단순히 애니메이션이 작동하는 비디오 파일을 만들고 개발자와 공유하고 하루라고 할 수 없었습니다.

아이디어를 명확하게 전달하는 한 가지 방법은 애니메이션에 필요한 단계를 자세히 설명하는 스프레드시트 를 만드는 것입니다. 애니메이션의 복잡성에 따라 티켓의 간단한 낙서, 목록이 포함된 텍스트 파일 또는 완전한 스프레드시트가 될 수 있습니다.

애니메이션에 대한 정보를 전달하는 또 다른 방법 은 동영상 자체에 애니메이션을 삽입하는 것입니다. After Effects에서 바로 이 작업을 수행하여 구현자에게 컨텍스트를 제공하기 위해 규모, 단계 수 및 기타 정보와 같은 중요한 정보를 추가할 수 있습니다. 이를 통해 데모 비디오를 보편적인 정보 소스로 사용할 수 있습니다.

After Effects에서 내보낸 이 비디오 파일은 디자이너와 개발자 간의 계약 형식으로 작동합니다. 공통된 이해가 있으면 CSS 클래스, JavaScript 이벤트, CSS 전환, CSS 애니메이션 및 JavaScript 애니메이션과 같은 도구를 사용하여 구현할 수 있습니다.

1. 애니메이션 분해

패턴을 찾고 타이밍을 기록하십시오.

가장 먼저 할 일은 각 요소(또는 요소 그룹)에 대한 애니메이션의 타임라인을 그리는 것입니다. 애니메이션 주변의 타이밍과 애니메이션 수명 주기를 동기화하려면 애니메이션이 교차하는 위치를 이해해야 합니다. 계획은 복잡한 애니메이션의 핵심이므로 향후 요구 사항에 대해 유지 관리 가능한 방식으로 솔루션을 점진적으로 구축할 수 있습니다.

위의 정보를 바탕으로 다음 단계로 분류합니다.

1. 구성 요소를 초기화하고 트리거를 기다립니다.
2. 트리거되면 크기를 늘리고 그림자를 확장합니다.
3. 그 후, ease-in-out 원을 그리며 이동합니다.
4. 그런 다음 크기를 줄이고 그림자를 줄입니다.

개요의 이점은 애니메이션 요소 외부에 있어야 하는 구성 요소를 이해한다는 것입니다. 예를 들어 그림자는 공과 독립적이어야 합니다. 에세이를 요약하는 것과 유사하게 애니메이션을 분해하는 것은 우리가 해야 할 일에 대한 생각을 정리하는 것입니다. 아웃라인은 애니메이션 이면의 사고 과정을 보여주며 우리 작업에 대한 문서 역할도 합니다.

2. 이해 관계자와 협상

일부 영역을 단순화할 수 있습니까? 애니메이션의 어떤 부분이 필수입니까? 타이밍을 동기화할 수 있습니까?

작업을 수행하는 데 필요한 작업을 조사한 후에는 흥정을 합니다. 디자이너 및 제품 소유자와 협상하는 것은 모든 개발자의 책임입니다. 구현자는 핵심적인 성과, 수행할 수 있는 작업 및 수행할 수 없는 작업을 완전히 이해하고 있습니다.

애니메이션에서 미세한 디테일을 제거하면 사용자 경험이 바뀔 수 있기 때문에 애니메이션은 까다롭습니다. 개발 기반의 예를 들면 애니메이션 동작 방식을 변경하는 것은 API 호출에서 수신할 수 있는 응답 페이로드를 변경하는 것과 유사합니다. 특정 사항은 변경될 수 있지만 일부는 반드시 있어야 합니다.

이것은 디자이너 및 출시 일정이 주어진 제품 소유자와의 관계를 기반으로 한 사례별 상황입니다. 특정 애니메이션을 제거해 달라고 요청하는 것은 우리의 전문 영역을 벗어나므로 권장하지 않습니다.

협상에 대한 좋은 접근 방식은 타이밍을 동기화하거나 브라우저가 기본적으로 수행할 수 없는 애니메이션을 단순화하고 유지 관리가 어렵고 성능이 저하될 수 있으므로 JavaScript를 사용하는 애니메이션을 피하는 것입니다. 우리는 대신 이러한 양보를 요청할 수 있고 또 요청해야 합니다.

3. 공격 계획

각 요소의 시작 및 종료 상태가 어떠해야 하는지 파악합니다. 각 전환 타이밍이 발생해야 하는 위치를 확인하십시오. CSS 클래스에서 BEM을 활용하여 애니메이션을 명확하게 적용합니다. JavaScript가 CSS를 위해 제한되어야 하는 이유를 이해하십시오.

앞에서 설명한 애니메이션을 살펴보겠습니다. 5가지 상태가 우리에게 튀어나옵니다.

1. 빨간 공과 약간의 그림자가 있는 초기 상태;
2. 더 긴 그림자가 있는 공의 확대 버전;
3. 원 주위의 공의 움직임;
4. 그림자와 함께 공의 축소;
5. 트리거를 기다리는 초기 상태로 돌아갑니다.

5개 주 모두에 대해 스타일이 이전과 이후에 무엇인지 살펴봐야 합니다. 이것은 우리가 그것을 구현하기 위해 어떤 종류의 애니메이션 도구가 필요한지에 대한 정보를 제공할 것입니다.

이를 위해 기본 케이스 스타일로 시작합니다. 요소가 아무데도 나타나지 않으면 아무것도 아닐 수 있고 연결된 애니메이션의 경우 이전 스타일일 수 있습니다.

상태 간에 스타일을 거의 변경 하지 않도록 하여 단순하게 유지합니다 . 시작 및 종료 상태를 식별했으면 요소에 쉽게 적용할 수 있도록 CSS 클래스로 레이블을 지정해야 합니다. 이것은 요소가 의존할 수 있는 AJAX 호출에서 수신된 데이터를 기반으로 하는 클래스의 애플리케이션을 처리하기 위해 JavaScript를 사용할 수 있는 유연성을 제공합니다.

BEM CSS는 수정자를 사용하여 진행 중인 애니메이션의 상태를 표현하는 방법 때문에 명명 전략에 이상적입니다. 애니메이션이 충분히 포괄적인 경우 BEM은 코드 기반에서 작동하는 DRY("반복하지 마세요") CSS 클래스를 유지 관리하는 좋은 방법이기도 합니다. 블록과 요소 마커로 시작한 다음 애니메이션을 진행하면서 수정자를 레이어링합니다.

다음은 샘플 템플릿 클래스 여정입니다.

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

우리는 우리가 애니메이션하고 있는 빨간 공을 나타내는 클래스 공이 있는 컨테이너 요소로 시작합니다. 애니메이션이 경험 전반에 걸쳐 반복됨에 따라 BEM 클래스 이름도 확장에서 원을 그리며 이동합니다. 이것은 스타일이 적용될 때 요소가 어떻게 보일지 추적하는 방법입니다.

4. 꾸준한 시행

개요와 도구를 사용할 준비가 된 상태에서 상태별로 프로젝트 상태를 정리해야 합니다.

필요에 따라 이전 상태를 기반으로 각 상태를 개별 항목으로 반복적으로 다룰 수 있습니다. 각 상태를 명확하게 정의하면 구현 세부 사항보다 코드를 DRY하고 읽기 쉽게 만드는 데 더 집중할 수 있습니다. 그리고 물론, 우리의 논리를 다루기 위해 테스트를 추가하는 것이 좋을 것입니다.

초기 상태

약간의 그림자가 있는 간단한 빨간 공으로 시작합니다.

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

확장

확장에는 요소의 크기와 그림자의 두 부분이 있습니다. 이 애니메이션을 처리하기 위해 DRY-ness에 대한 확장 및 축소 모두에서 공유하는 scale 이라는 키프레임을 사용합니다.

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

Circling(확대 애니메이션 적용 후)

circle 이라는 키프레임을 사용하고 transform-origin 속성을 이동하여 처음부터 요소를 circular 주위로 이동합니다. 회전은 확대 애니메이션이 완료된 경우에만 발생한다는 점에 유의하십시오.

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

축소(동그라미 및 확대 애니메이션 적용 후)

축소하기 위해 animation-direction: reverse 와 함께 키프레임 크기를 재사용하여 scale-up 클래스가 수행하는 것과 반대 작업을 수행합니다. 이것은 우리를 원래 상태로 되돌립니다.

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

작업 데모

이 모든 클래스를 시퀀스로 결합하면 After Effects에서 수행된 렌더링의 CSS 표현을 갖게 됩니다.

시작하려면 공을 클릭하십시오.

CodePen에서 Chris Ng(@chrisrng)의 Pen Animating Ball을 참조하십시오.

결론

이 기사에서 다루는 도구는 최첨단이 아니지만 일반적으로 대부분의 주요 브라우저에서 지원되므로 오늘날 사용할 수 있습니다.

이전에는 페이지에서 요소를 이동하는 것과 같은 간단한 작업을 수행하기 위해 jQuery Animate와 같은 외부 도구를 사용해야 했기 때문에 애니메이션을 구현하는 것이 어려웠습니다. 오늘날 CSS 전환 및 애니메이션은 GPU를 활용하여 기본적으로 효율적으로 수행할 수 있습니다.

애니메이션은 항상 개발자, 디자이너 및 제품 소유자 간의 줄다리기입니다. 비결은 모든 이해 관계자가 제품 품질에 만족하는 중간 지점을 찾는 것입니다. 이 가이드가 이러한 전환에 도움이 되기를 바랍니다.