HTML5에 대한 이펙트 애니메이션 내보내기

Sep 17, 2025

어떻게

웹의 애니메이션이 여기에 있습니다. 그것은 우리의 미묘한 움직임에서 온 모든 일에 있습니다. UI 디자인 인생에, 완전히 애니메이션 된 캔버스 경험과 WebGL 실험은 우리가 한 번 생각이 가능하다고 생각하는 것에 도전하고 있습니다.

Devs의 창의력과 브라우저의 기능이 증가하고 웹상의 애니메이션은 비디오와의 불량한 관계였습니다. 모션 그래픽 커뮤니티가 수년간주의해서주의를 기울여 왔습니다. 당신이 유지할 수있는 복잡한 사이트가 있다면 웹 호스팅 서비스는 지점에 있어야합니다.

찬성 가이드 UI 디자인

개발자는 Greensock 및 Snap.svg와 같은 도서관에 의존하여 JavaScript를 통해 애니메이션을 재현하는 데 무거운 리프팅을 수행합니다. 이러한 도구가 많은 유연성을 주었지만, 이들은 사용 가능한 애니메이션의 정밀도와 미묘량과 비교할 수 없습니다. After Effects CC. 자체 타임 라인 및 그래프 완화. 웹 관점에서, 애프터 효과는 코드를 강요하기 전에 동작을 조정하고 시도하는 데 매우 적합합니다.

character with 'Ae' written on its belly — BodyMovin : 마법의 '웹 렌더링'기능 Adobe Forgot [모든 이미지 : Hungry Sandwich Club]

시작하다 보디 모 피 , Adobe After Effects의 Adobe After After Effects에서 브라우저에서 표시되고 조작되는 Adobe After Effect의 획기적인 확장. 제작자 제작자 헤난 탄 토리 , Bodymovin은 애니메이터와 개발자 간의 많은 장벽을 제거합니다. 기본 수준에서 플러그인은 마법의 '웹에 대한 렌더링'기능으로 작동합니다. Adobe는 잊어 버렸습니다. 가장 진보 된 것은 대화 형 애니메이션에 대한 새로운 가능성을 엽니 다.

Bodymovin은 이러한 새로운 가능성을 충족시키기 위해 도구, 플러그인 및 시스템이 상승하는 링크입니다. Airbnb의 롯데 과 페이스 북의 키 프레임 두 가지 모두 이러한 기초를 빌드하며 마침내 가장 강력한 애니메이션 도구를 웹에 가져오고 있습니다.

왜 Bodymovin을 사용합니까?

SVG는 인터넷을 통해 가져 와서 모든 것이 고품질, 가볍고 확장 가능해야한다는 기대를 가져 왔습니다. Bodymovin은 귀하의 컴포지션의 모든 것을 모든 크기로 유지하는 아름답게 선명한 SVG로 모든 것을 렌더링합니다. 그 GIF를 밝게하거나 사용자가 부풀어 오른 비디오 파일을로드하도록 강요하기 위해 더 이상 손상되지 않습니다.

애니메이션을 수출하는 프로세스를 단순화하는뿐만 아니라 Bodymovin은 개발자가 새로운 대화 형 경험으로 창의력을 발휘할 수있는 잠재력을 더 많이 열립니다. Interactive IK RIG가 대화식 IK 장비에서 애니메이션 - 대화 형 텍스트로 이루어지는 확장자가 사용한 환상적인 방법의 일부에 대해 Codepen을 확인하십시오.

Web Dev 프로세스를 더욱 단순화하려면 웹 사이트 빌더 ...에

Ae character and www. character — 모든 것은 웹 친화적 인 SVG로 렌더링됩니다.

내 보낸 애니메이션은 다른 모든 요소와 마찬가지로 브라우저에서 조작 할 수 있으므로 애니메이션을 웹 디자인 내에서 대화 형 및 실험 도구로 생각할 수 있습니다. 그리고 이제 Bodymovin 때문에 애니메이션을 웹에 가져 오는 것은 결코 쉬운 일이 아닙니다. 이 자습서에서는 애니메이션을 After Effects에서 내보내는 방법을 배우고 사용자의 클릭에 응답하는 간단한 루핑 애니메이션을 만듭니다.

After Effects 파일을 준비하는 방법

After Effects 기능을 지원하는 기능이 크게 향상되었으며 상자에서 똑바로 좋은 결과를 얻을 수 있습니다. 그렇게 말하면, 당신의 멋진 3D 레이어가 시작되지 않도록 멋진 3D 레이어가 멋지 지 않으므로 제한을 알고 있습니다. 프로젝트를 시작하기 전에 항상 최신 버전의 BodyMovin을 다운로드하고 GitHub 페이지를 확인하여 현재 지원되는 기능을 확인하십시오.

재미있는 부분으로 나아갈 수 없도록 너무 맛있는 것이 아닙니다. 깔끔한 파일은 깔끔한 마음을 만듭니다. 이 경우 그들은 브라우저에서 멀리 떨어져있는 추가 작업을 가져 와서 실키한 원활한 재생을 제공합니다. 첫째로, 귀하의 콘텐츠가 완전 벡터 전원을위한 효과를 획득 한 후에 콘텐츠가 있는지 확인해야합니다. Illustrator 파일을 모양 레이어로 변환하려면 벡터 레이어에서 셰이프 작성을 마우스 오른쪽 버튼으로 클릭하고 선택할 수 있습니다. 이 단계에서 모양이 아닌 모든 레이어는 이미지로 변환되고 벡터로 렌더링되지 않습니다.

다음으로, 레이어와 서브 레이어를 통해 수표를 가져라. 아무것도 희생하지 않고 모양의 내용을 단순화 할 수있는 좋은 기회가 있습니다. 그룹, 경로 수를 줄이려고 노출 된 필수 요소로 채우십시오.

마스크를 돌봐

마스크는이 단계에서 미끄러지는 쉬운 방법입니다. 알파 마스크가 SVG 렌더러와 함께 작동하지만 캔버스로 전환하도록 선택해야합니다. 마스크는 성능이 비싸서 효율적으로 사용합니다.

표현

BodyMovin은 애니메이션 데이터를 JSON 파일로 변환하는 After Effects 확장 및이 파일을 해석하고 브라우저에서 렌더링 할 수있는 웹 페이지에 포함하도록 애니메이션 데이터와 bodymovin.js 플레이어를 포함하는 After Effects 확장입니다.

파일이 잘되기를 생각해보십시오. 윈도우 & GT를 통해 Bodymovin 확장을 개설하십시오. 확장 및 보디 모 피핀.

새로 고침을 치면 이후 효과 프로젝트의 모든 구성 요소 목록이 표시됩니다. 선택한 COMP를 선택한 다음 웹 프로젝트의 내부에서 대상 폴더를 선택하십시오. 당신이 행복하게되면 렌더링을 클릭하고 마법이 일어나는 것을보십시오. 완료되면 '완성'메시지가 나타납니다. 축하합니다! 플레이어가 애니메이션을 다시 만들어야하는 모든 정보로 JSON 파일을 내 보냈습니다.

two characters — 레이어를 확인하십시오 - 지원되지 않는 기능 또는 After Effects에서 사용되는 표현식 일 수 있습니다.

새로 내 보낸 애니메이션을 테스트하려면 미리보기 & gt; 현재 렌더링하고 기대하는 것과 조금 다른 것처럼 보이는 무언가를 발견 할 수 있으므로 타임 라인을 통해 문지르게하는 것을 잊지 마십시오. 문제가 발생하면 다시 점프하고 레이어를 확인하십시오. 지원되지 않는 기능이나 After Effects에서 사용되는 표현식 일 수 있습니다.

Lubberhose와 같은 일부 After Effects Plugins는 Bodymovin을 지원합니다. Rubberhose는 가이드 레이어와 숨겨진 레이어를 사용합니다. 이를 활성화하려면 선택한 구성 옆의 설정 톱을 클릭하고 필요한 기능을 틱하십시오.

모든 것이 좋다면 뒤에 퇴장을 떠나기 전에 한 가지가 필요합니다. 이 단계에서는 애니메이션을 설명하는 신선한 Data.json 파일이 있어야하지만 Bodymovin 플레이어는 해석 할 수 없습니다. 확장 프로그램에서 오른쪽 상단의 '플레이어'버튼을 클릭하고 JSON 파일로 저장하십시오.

애니메이션을로드하십시오

이제 필요한 모든 것을 가지고 있으면 코드를 똑바로 바르게 뛰어 올리고 페이지에 애니메이션을 표시하기 위해 기본 사항을 바랍니다.

먼저 새로운 컨테이너를 만듭니다 #ANIM_CONTAINER. 애니메이션을 보관하십시오. 또한 그를 포함시켜야합니다 bodymovin.js. 닫는 본문 태그 전에 파일. 다음으로 BodyMovin을 애니메이션에 대해 모든 것을 알리고 새로운 컨테이너에 넣으십시오.

단계별로 설정 단계를 걷자.

 var 컨테이너 = Document.GetElementById ( 'Anim_Container');
// 우리의 애니메이션을 설정합니다

var animdata = {
컨테이너 : 컨테이너,
렌더러 : 'svg',
자동 재생 : 사실,
루프 : true,
경로 : 'data.json'
};
varnam = bodymovin.loadAnimation (AnimData);

애니메이션의 모든 매개 변수를 정의해야합니다. BodyMovin에 애니메이션이로드되기를 원하는 컨테이너를 SVG 요소로 렌더링 할 수 있습니다. 그런 다음 애니메이션이로드되는 즉시 재생되도록 알리고 완료되면 시작을 시작할 수 있습니다.

Path 속성은 BodyMovin Player에 애니메이션의 JSON 데이터 파일을 찾을 수있는 위치에 알려줍니다. Cors-Origin 자원 공유 정책 (CORS)으로 인해 JSON 파일에 액세스하기 위해 사용할 기술은 서버 또는 로컬 서버에있는 경우에만 작동합니다. 로컬로 작업하려면 Data.json을 객체를 변수에 할당하는 JavaScript 파일로 만들 수 있습니다. 이 경우 설치가 이렇게 보일 수 있습니다.

& lt; script src = "js / data.js"& gt; & lt; / script & gt;
& lt; script & gt;
var container = document.getElementById ( 'anim_container');
// 우리의 애니메이션을 설정합니다
var animdata = {
컨테이너 : 컨테이너,
렌더러 : 'svg',
자동 재생 : 사실,
루프 : true,
AnimationData : 데이터
};
varnam = bodymovin.loadAnimation (AnimData);
& lt; / script & gt;

페이지를 새로 고침하면 컨테이너 내부에서 애니메이션을 재생해야합니다. Dev 도구로 선택하면 애니메이션의 각 요소가 이제는 이제 포함되어 있음을 알 수 있습니다. & lt; g & gt; 태그를 실시간으로 변형 중입니다.

놀랍습니다. 이제 브라우저에서 보여주는 아름답고 선명한 애니메이션이 있습니다 (비참한 비디오 태그가없는 ...). 애니메이션은 항상 컨테이너에 맞게 조정할 수 있으므로 앞으로 나아가 써라!

BodyMovin은로드 된 후 애니메이션을 제어하기위한 강력한 방법이 있습니다. 같은 방법을 호출합니다 anim.pause () 또는 anim.setDirection () 다른 방식으로 재생을 조작 할 수 있습니다. 몇 가지 예를 살펴 보겠습니다.

anim.setDirection (-1) 리버스에서 애니메이션을 재생할 것입니다
anim.pause () 과 anim.play () 애니메이션을 시작하고 중지합니다
anim.setspeed (0.5) 반면에서 애니메이션을 재생할 것입니다

상호 작용을 추가하십시오

이 다음 단계에서는 JavaScript를 통해 애니메이션에 대한 상호 작용을 추가하는 다양한 방법을 탐색합니다. 이 예제에서는 두 개의 섹션으로 After Effects 애니메이션을 내보내기 : 섹션 A 및 섹션 B. 섹션 A는 1에서 20까지 프레임을 사용합니다. 포고 막대기에).

이제 루프에서 섹션 A를 재생하려고합니다 (사용자가 클릭 한 후에 만) 재생 및 루프 섹션 B. 재생 속성을 사용하여 애니메이션을 이런 식으로 분할 할 수 있습니다. 이 메소드는 시작 및 종료 값이있는 배열과 두 번째 부울 - ISFrame의 두 개의 인수를 취합니다. 이것을 true로 설정하면 애니메이션이 프레임으로 시작 및 종료 값을 읽도록 알려주는 반면 false는 이러한 값을 시간으로 읽도록 알려줍니다.

 anim.pause ();
Anim.PlaySegments ([0,20], TRUE);

이를 추가하면 BodyMovin이 첫 번째 프레임에서 일시 중지하고 0에서 20 프레임까지의 애니메이션을 재생합니다. A.와 함께 애니메이션을 설정하면서 루프 : true 속성 이렇게하면 섹션 A를 계속해서 재생할 것입니다.

전체 예제를 설정합시다. 이 예에서 애니메이션의 두 가지 세그먼트를 사용하므로 두 가지 기능을 만듭니다.

 var 컨테이너 = Document.GetElementById ( 'Anim_Container');
// 우리의 애니메이션을 설정합니다
var animdata = {
컨테이너 : 컨테이너,
렌더러 : 'svg',
자동 재생 : 거짓,
루프 : true,
경로 : 'data.json'
};
varnam = bodymovin.loadAnimation (AnimData);
// 애니메이션이로드 된 경우 FirstLop 함수를 실행하십시오.
anim.addeventListener ( 'DOMLoaded', FirstLoop);
// 재생 기능을 만듭니다
firstleloop () 함수 firstLoop () {
Anim.PlaySegments ([0,20], true);
};
기능 2Loop () {
anim.playsegments ([20,40], true);
};
// 클릭 이벤트를 듣습니다
container.addeventListener ( '클릭', 함수 (이벤트) {
anim.addeventListener ( 'loopcomplete', secondLoop);
});

잘 했어! 이제 사용자가 클릭 할 때까지 애니메이션이 반복되면 두 번째 루프가 시작됩니다. 유일한 문제는 이렇게 뛰어난 점프가 매우 갑작스럽고 애니메이션의 부드러움을 망칠 수 있다는 것입니다.

이상적인 상황은 애니메이션에 세 번째 섹션을 포함시키는 것입니다. 포고가 점프하는 것에서 전환하는 것입니다. 이제 당신의 구조는 다음과 같이 보일 것입니다 :

먼저 - 0에서 20 프레임
전이 - 프레임 20 ~ 30.
두 번째 졸업자 - 프레임 30 ~ 50.

애니메이션을 클릭 할 때까지 첫 번째 루프에 머물기를 원합니다. 이 시점에서 현재 현재 속옷을 입고 전환으로 이동하고있는 루프의 끝을 기다리고 싶습니다. 전환이 완료되면 두 번째 루프로 이동합니다. 이 소리가 복잡하지만 나와 함께있어! 코드는 전체적으로 다음과 같습니다.

 var 컨테이너 = Document.GetElementById ( 'Anim_Container');
// 우리의 애니메이션을 설정합니다
var animdata = {
컨테이너 : 컨테이너,
렌더러 : 'svg',
자동 재생 : 거짓,
루프 : true,
경로 : 'data.json'
};
varnam = bodymovin.loadAnimation (AnimData);
// 애니메이션이로드 된 경우 FirstLop 함수를 실행하십시오.
anim.addeventListener ( 'DOMLoaded', FirstLoop);
// 재생 기능을 만듭니다
firstleloop () 함수 firstLoop () {
Anim.PlaySegments ([0,20], 진실);
};
함수 전환 () {
Anim.PlaySegments ([20,30], true);
anim.removeEventListener ( 'loopcomplete');
anim.addeventListener ( 'loopcomplete', secondLoop);
};
기능 2Loop () {
anim.playsegments ([30,100], true);
anim.removeEventListener ( 'loopcomplete');
};
// 클릭 이벤트를 듣습니다
container.addeventListener ( '클릭', 함수 (이벤트) {
anim.addeventListener ( 'loopcomplete', 전환);
});

클릭하면 A를 사용하고 있습니다 loopcomplete. 루프의 마지막 프레임에 도달 할 때까지 기다리는 청취자는 다음을 실행합니다. 전이() 함수. 여기에서 마지막 수신기를 제거하고 다음 프레임 세트를 재생 한 다음 다시 동일하게하십시오. 전환이 끝나면 전화가 발생합니다 두 번째 졸업 행사 () ...에

그게 다야!

오늘 Bodymovin의 일부 기능을 통해 일했지만 플러그인에 대해 더 많이 배우는 데 관심이 있다면 정보를 찾을 수 있습니다. Bodymovin Github. 페이지. 더 많은 예를 들어, 끊임없이 인상적인 Bodymovin Codepen 컬렉션을 확인하십시오.

바라건대이 튜토리얼은 애프터 효과와 바디 모비스의 사용을 결합하여 웹에 대한 슈퍼 콜 애니메이션을 생산할 수있는 다양한 종류의 방법에 대한 아이디어를주었습니다!

finished animation with triangles on pogo sticks — 애니메이션의 각 부분에 대한 별도 섹션

이제 웹에 대한 애니메이션을 설정할 수 있으므로 내 보낸 파일을 브라우저에 가져 와서 클릭하여 애니메이션을 반응하게 만드십시오. 이전에 이전에 사용한 MP4 파일을 넘어서 미래에 많은 풍부한 웹 경험을 창출하기 위해 보디 모비스를 보았습니다.

개발 프로세스에 밀접하게 애니메이션을 포함시킬 수 있기 때문에 점점 더 중요 해지고 웹 애니메이션 분야가 믿을 수 없을만큼 빠르게 움직이는 것입니다. 끊임없이 성장하는 새로운 확장 기능을 통해 플러그인 및 프레임 워크, 애니메이터 및 개발자는이 프로세스가 시간이 지남에 따라 더 쉽고 더 잘 될 것으로 기대할 수 있습니다. 나는 미래가 무엇을 보유하고 있는지보기 위해 기다릴 수 없다.

백업 할 파일이 많습니까? 우리를 확인하십시오 클라우드 스토리지 픽업.

이 기사는 원래 나타났습니다 그물 잡지 2017 년에. 여기를 구독하십시오 ...에

자세히보기 :

SVG 다각형을 만들고 애니메이션을 작성하십시오
14 놀라운 어도비 After Effects 플러그인
웹 애니메이션을위한 스토리 보드를 만듭니다

HTML5에 대한 이펙트 애니메이션 내보내기

왜 Bodymovin을 사용합니까?

After Effects 파일을 준비하는 방법

마스크를 돌봐

표현

애니메이션을로드하십시오

상호 작용을 추가하십시오

그게 다야!

어떻게 - 가장 인기있는 기사

Photoshop에서 Meme를 만드는 방법

물 시뮬레이션을 만드는 방법

10 가지가 Photoshop과 함께 할 수있는 10 가지

슈퍼 패스트 CSS 용 5 팁

사실적인 실장을 만드는 방법

렌더링을 향상시키는 4 가지 간단한 단계

이 팁으로 유화에 활기를 첨가하십시오

모션에서 만화 스타일의 머리카락을 만드는 방법

카테고리