답변:
웹에서 사물을 애니메이션하는 방법에는 여러 가지가 있습니다. 애니메이션을 만든 다음 웹 애니메이션으로 내보내는 방법이 훨씬 더 있습니다.
AfterEffects 또는 Animate CC (Illustrator 및 Photoshop 파일을 모두 가져올 수 있음)와 같은 애니메이션을 디자인 할 경우 인력 분할 및 그래픽 편집기 사용의 명백한 이유가 있습니다.
그렇게 말하면 항상 다음 중 하나에 컴파일해야합니다 .
제한된 상호 작용 기능 :
보다 완전한 대화식 :
이제 좀 더 자세히 살펴 보겠습니다.
GIF는 애니메이션에 많은 상호 작용이 필요하지 않고 동적으로 크기를 조정할 필요가없고 상대적으로 작은 경우에 적합한 방법입니다. 잘 만들어진 GIF는 성능에 대한 걱정없이 연결 한 그림만큼 상세 할 수 있습니다. 투명 오버레이 (또는 그 일부)를 사용하여 약간의 상호 작용도 가능합니다.
참고 사항 : Imgur에서 만든 GIF 파일을 WebM 또는 MP4 비디오 형식으로 즉시 변환 하는 .gifv형식이 생겼습니다 . 최종 파일 크기를 크게 줄임으로써 성능이 향상됩니다. 같은 일을 고려할 수도 있습니다.
매끄럽지 만 스타일이 높은 애니메이션을 유지하는 또 다른 방법은 스프라이트를 사용하는 것입니다. Google은 로고 애니메이션 과 같은 작업에이 방법을 사용합니다 . 또 다른 좋은 예는 Alexander Engzell의 오래된 웹 사이트 로,이 방법을 사용하여 아픈 타이포그래피 애니메이션이 있습니다. GIF가 너무 크지 만 상호 작용이 많이 필요하지 않을 때 최적입니다.
또한 Google에서 사용 하는 스프라이트 또는 GIF와 비슷한 매우 흥미로운 JavaScript 애니메이션을 보았습니다 (왼쪽 상단에 Chrome 이미지를 가져 가면 Chrome에 있어야 함) 대신 애니메이션 마스크를 사용합니다. 그들이 전체 파일 크기를 제한하기 위해이 접근법을 사용했다고 생각합니다.
우리는 최근 몇 년 동안 비디오에 관한 훌륭한 기능을 얻었습니다. 이 <video>요소를 사용하면 이전과는 다른 방식으로 비디오를 상호 작용하고 사용하는 방식을 사용자 정의 할 수 있습니다. 이제 전체 화면 배경 비디오를 쉽게 사용할 수 있고 스크롤시 프레임 단위 이동 과 같은 작업을 수행 할 수 있습니다 . 또한 FaceBook은 사용자가 특별한 이벤트에 대한 피드를 환영 할 때 간단한 애니메이션에 비디오를 사용한다는 것을 알았습니다 . 장점은 파일 크기를 아주 작은 크기로 압축 할 수 있고 비디오 편집 소프트웨어가 할 수있는 모든 것보다 광범위한 애니메이션을 수행 할 수 있다는 것입니다. 따라서 누군가가 아픈 비디오를 만들 수 있다면 웹 페이지에 환상적인 추가 기능으로 쉽게 전환 할 수 있습니다.
분명히, 비디오는 웹상의 대부분의 애니메이션 (예 : 버튼 전환 등)에는 좋지 않으므로 어디에서나 사용하지 마십시오.
이 모든 것을 말하면서, 애니메이션을 동적으로 생성하려면, 실제로 기본적인 상호 작용 이상의 것이 필요할 때, 3D 환경을 만들려고 할 때 그리고 다른 많은 경우에 GIF, 스프라이트 또는 비디오는 단순히 그걸 잘 라라. 이것이 결정되면 몇 가지 다른 옵션이 있으며 그중 가장 좋은 것은 애니메이션과 요구에 달려 있습니다.
통계는 없지만 내가 본 대부분의 웹 애니메이션은 Canvas를 사용 합니다. 캔버스는 성능이 뛰어나고 생성이 유연하기 때문에 사용하기 좋습니다. 실제 캔버스와 같이 서로 위에 물건을 칠하기 때문에 하나의 브라우저 (DOM) 요소 만 사용합니다. JavaScript로 칠한 내용과 위치를 추적하여 멋진 애니메이션과 게임을 만들 수 있습니다.
그러나 Canvas 사용의 주요 단점은 확장이 상대적으로 어렵다는 것입니다. 물론 애니메이션에 따라 다른 방법을 사용하는 것보다 반응 형 캔버스 애니메이션을 만드는 것이 더 어렵습니다. 또 다른 단점은 Canvas 요소를 크롤링 할 수 없기 때문에 Canvas에 많은 콘텐츠를 포함하는 것은 SEO에 적합하지 않다는 것입니다 (해당되는 경우 시각적으로 숨겨진 콘텐츠의 HTML을 넣어이 문제를 해결할 수 있습니다). 같은 참고로 Canvas에서는 사용자를위한 텍스트 선택과 같은 작업이 어렵습니다 (특히 CreateJS와 같은 라이브러리를 사용하지 않는 경우).
Canvas의 주요 용도는 Google의 기념일 로고 이며 종종 Canvas에서 수행됩니다. 게임이나 인터랙티브 애니메이션이있을 때마다 내가 볼 때마다 Canvas를 사용합니다. 상호 작용이 없으면 GIF 또는 스프라이트를 사용합니다.
Canvas 작업을보다 쉽게 수행 할 수 있도록 도와주는 훌륭한 라이브러리가 많이 있지만 필요한 작업에 따라 반드시 필요한 것은 아닙니다. Canvas를 위해 만든 것 중에는 CreateJS (Animate CC에서 내보낼 수 있음), Pixi.js , PaperJS , KineticJS 및 FabricJS (내 인상 순서대로 배치)가 있습니다. Lottie (이전 BodyMovin) 라는 After Effects 플러그인은 Canvas (또는 SVG [1] )로 내보낼 수 있으며 애니메이션 엔진이 내장되어 있습니다.
물론 GSAP와 같은 큰 애니메이션 라이브러리를 Canvas와 쉽게 페어링 할 수도 있습니다. 당신이 연결 한 그림과 같은 세부 사항에 대해서는 일종의 프레임 워크를 사용하는 것이 좋지만 많은 것들에 대해서는 실제로 필요하지는 않습니다. 특히 유용합니다. 특히 이미 그중 하나를 사용하는 방법을 알고 있다면 유용합니다.
웹에서 쉽게 반응하는 방식으로 애니메이션을 적용하는 또 다른 강력한 방법은 SVG ( Scalable Vector Graphics ) 를 사용하는 것 입니다. 확장 가능한 벡터 인 목적을 잘 수행합니다. 많은 사람들이 처음에는 혼란스러워하는 SVG를 사용하지만 SVG의 좌표 시스템 및 변환과 같은 대부분에는 SVG를 설명하는 훌륭한 기사가 있습니다.
SVG에 대한 많은 사랑스러운 점 중 하나는 JavaScript, 순수 CSS ( :hover상태, transforms, transitions 및 animations 포함) 또는 SMIL 애니메이션 (SVG로 사물을 애니메이션하는 "기본"방식)으로 애니메이션 할 수 있지만 IE는 ' 전혀 지원하지 않으며 점차 감가 상각되고 있습니다 ). CSS에서 (상대적으로) 간단하지 않을 때마다 CSS를 먼저 사용한 다음 JavaScript를 사용하는 것이 좋습니다. SVG 요소를 모핑하려면 부분 지원만으로 괜찮다면 SMAP 가 허용 될 수 없다면 GSAP의 MorphSVG 플러그인 과 같은 도구를 실제로 사용해야합니다 .
SVG 요소는 어떤 모양이든 될 수 있으므로 멋진 효과 를 만드는 데 사용할 수 있습니다 . Sarah Drasner는 SVG 애니메이션에 관한 유용한 성능 벤치 마크 를 만들어 SVG에 애니메이션을 적용하는 방법이 가장 현명한 방법임을 보여줍니다.
애니메이션 (및 브라우저 지원 필요)에 따라 Snap.svg 또는 GSAP 와 같은 라이브러리 가 유용 할 수 있지만 종종 CSS와 필요한 경우 약간의 사용자 정의 JS 만 있으면됩니다. 이미 말한 바와 같이 Lottie (이전 BodyMovin) 라는 After Effects 플러그인 과 Flash 2 SVG 라는 Flash 확장은 SVG 애니메이션을 만드는 데 실제로 도움이 될 수 있습니다.
자세한 내용은 SVG 요소 애니메이션에 대한 이 관련 게시물을 살펴보십시오 .
추신 : SVG를 대화식으로 사용하거나 대화 형이 아닌 경우 배경 이미지로 <object>직접 <svg>XML 요소 에 포함하거나 태그에 SVG를 사용하는 것이 가장 좋지만 , 다른 방법 도 있습니다.
내 경험상 CSS 애니메이션 및 전환은 주로 UI 요소 및 기타 기본 전환 및 애니메이션에 사용해야합니다. 그럼에도 불구하고 때때로 UI 애니메이션 / 전환에 GSAP 또는 Velocity.js 와 같은 JS 애니메이션 라이브러리를 사용하는 것이 적절합니다. 실제로 원하는 동작 유형과 CSS에서 수행하기 편리한 지 여부에 따라 다릅니다.
순수한 CSS로 멋진 것을 만들 수는 있지만 일반적으로 이미지를 조작 할 때에도 CSS를 사용하여 예제로 제공하는 것과 같은 복잡한 그림을 만드는 것이 더 어렵습니다. 복잡한 CSS 애니메이션은 종종 JavaScript에 비해 유지 관리가 더 어렵습니다. 다른 단점은 CSS 애니메이션은 JavaScript로 변경하기 가 어렵고 JavaScript 와 혼합 될 때 너무 잘 재생되지 않는다는 것입니다.
그러나 전환과 애니메이션을 사용한 간단한 상호 작용은 일반적으로 CSS를 사용해야합니다. 기본값으로 설정해야합니다. CSS를 사용하여 애니메이션을 적용하는 방법을 배우려면 웹 애니메이션 소개를 확인하십시오 .
Animate.css 와 같은 라이브러리에서 유용한 애니메이션과 여유 함수를 찾아서 자신의 프로젝트에서 가져 와서 추가 할 수도 있습니다. 라이브러리 전체가 거의 필요하지 않으며 원하는 부분 만 가져갑니다.
DOM 기반 JavaScript 애니메이션은 매우 간단합니다. jQuery와 같은 끔찍한 애니메이션 라이브러리로 인해 나쁜 평판을 animate()얻었지만 특히 웹 애니메이션 API (아래 설명) 또는 GSAP , Velocity.js 또는 mo.js 와 같은 특수 애니메이션 라이브러리를 사용할 때 특히 높은 성능을 발휘할 수 있습니다 ( GSAP에는 jQuery를 대신 할 수 있는 특별한 플러그인 도 있습니다 .animate). 이러한 라이브러리를 사용하면 많은 요소를 애니메이션으로 만드는 것과 같이보다 집중적 인 애니메이션의 경우 다른 유형의 애니메이션보다 성능이 뛰어납니다.
DOM 기반 애니메이션을 사용해야하는 주된 이유는 이미 만들어진 DOM 요소와 관련된 많은 사용자 애니메이션 또는 복잡한 타임 라인이있는 경우입니다. 종종 이미 지정된 이유로 DOM 대신 Canvas와 같은 것을 사용하는 것이 가장 좋습니다.
GSAP와 같은 라이브러리 를 사용하면 애니메이션 매트릭스를 추적 하여 호버링시 애니메이션 속도를 늦추는 등 미친 짓을 할 수 있습니다. 이러한 방식으로 DOM 기반 애니메이션은 잘 수행 할 때 다른 형태의 애니메이션보다 더 사용자 정의되고 대화식이 될 수 있습니다. 유일한 단점은 때로는 빌드 방법과 수행해야 할 작업에 따라 성능이 좋지 않다는 것입니다.
WebGL 은 주로 3D 작품을 만드는 방법입니다. 그것은 몇 가지가 멋진 프로젝트를 체크 아웃해야합니다. 모든 웹 페이지에서 사용되는 것은 아니지만 언급해야합니다.
실제로 DOM 요소에 애니메이션을 적용하여 3D (및 2D) 환경을 만들 수 있습니다. 라이브러리를 사용할 때 WebGL은 Canvas 사용으로 대체되지만 여전히 모바일을 크게 지원하지 않으며 성능이 과도해질 수 있습니다. 일반적으로 WebGL을 사용해야하는지 아닌지를 명확하게 알 수 있습니다.
내 경험으로는 실제로 WebGL 라이브러리를 사용해야합니다. 고맙게도 좋은 것들이 있습니다. ThreeJS 는 내가 본 가장 일반적인 PixiJS 입니다. A -Frame 과 같은 WebGL 프레임 워크 는이를 선택하여 기본 사항을 매우 쉽게 만들 수 있습니다.
웹 애니메이션 API는 애니메이션이 구현 및 성능 개선과 짝 브라우저에서 유지 관리하는 방법을 표준화하기위한 시도이다. SVG를 포함한 DOM 요소와 함께 사용해야합니다. CSS 애니메이션의 구조와 유사하지만 (JS보기 형식) 타임 라인 및 성능 향상과 같은 기능을 추가합니다.
컴포 지터 스레드에 애니메이션을 추가하여 성능을 향상시킵니다 (자세한 내용 은 주제에 대한 이 글 을 참조하십시오 ). 사용 방법에 대한 소개는 Mozilla 문서 또는 이 소개 게시물을 확인하십시오 .
당신은 ", 요청할 수 있습니다 이 자바 스크립트 애니메이션 라이브러리를 대체 할 것인가? "대답이 " 희망 일부 ". 기본 브라우저 애니메이션 엔진은 모든 사람에게 유리하며, 그와 같이 덜 강력한 애니메이션 라이브러리는 쓸모 없게됩니다. 그럼에도 불구하고,보다 강력한 애니메이션 라이브러리는 GSAP가 지적한 것과 같은 추가적인 이점을 여전히 가질 것 입니다. WAAPI가 널리 지원되면 라이브러리가 필요한지 여부는 여전히 사용자의 요구에 따라 결정됩니다.
WAAPI는 현재 잘 지원 되지 않지만 오늘날 프로덕션 에서 폴리 필 과 함께 사용할 수 있습니다 . 계속 나아지고 더 많은 지원을받을 것으로 보입니다.
성능 이 좋지 않은 속성을 사용 하거나 리플 로우 / 다시 그리기를 피하십시오 .
페이지에서 많은 요소를 애니메이션으로 만드는 것은 더 집중적이며 나중에 변경하기가 어려울 수 있으므로 피하십시오.
CSS를 사용하는 transition경우 가능한 이유없이 애니메이션에 오버를 사용하십시오 . 그들은 더 잘 수행하고 일반적으로 작업하기가 더 쉽습니다.
will-change애니메이션을 적용 할 큰 요소 의 속성을 지능적으로 사용하여 브라우저가 미리 알 수 있도록합니다. 이에 대한 자세한 내용과 제안 사항은 이 SitePoint 기사 와 같은 주제를 읽으십시오 .
JavaScript에서 타이밍을 수행 할 때는 피하고 setInterval선택 하십시오 requestAnimationFrame(GSAP와 같은 우수한 애니메이션 라이브러리는 타임 라인을 사용하는 경우이를 수행합니다).
가능하면 웹 애니메이션 API에는 JavaScript의 다른 방법으로 애니메이션을 적용 할 수있는 기능이 없으므로 사용하십시오.
최종 제품에서 Flash를 실행해서는 안됩니다 . JavaScript 애니메이션의 성능, 동적, 편집이 쉽고, 다운로드가 필요하지 않으며, 더 많은 플랫폼에서 작동하며 (Flash는 대부분의 태블릿 / 휴대폰에서 작동하지 않음), 부피가 큰 오래된 Flash보다 응답 성이 뛰어납니다. 또한 접근하기가 쉽지 않으며 SEO에 익숙하지 않습니다.
Animate CC (Flash의 브랜드 변경)는 애니메이션을 만드는 유용한 방법이며 Create.js를 사용하여 Canvas로 내보낼 수 있습니다 .
일반적으로 애니메이션을 만드는 데 사용할 수있는 여러 가지 방법이 있습니다. 가장 좋은 방법은 원하는 작업에 따라 다르며 때로는 더 나은 방법이 명확하지 않습니다. 종종 같은 프로젝트에서 여러 개를 사용하고 있습니다. 중요한 것은 비판적 으로 생각 하고 애니메이션의 동작 방식을 정확하게 이해하고이를 기반으로 방법을 결정하는 것입니다. 또한 조금씩 일한 경우에도 도움이됩니다.
[1]-Lottie 는 기본 Android, iOS 및 React Native로 내보낼 수도 있습니다 .
내 경험상 정적 애니메이션 (사용자와의 상호 작용을위한 애니메이션이 아님)을 수행 할 때 가장 효과가 좋은 것은 After Effects의 일러스트레이션에 애니메이션을 적용한 후 최종 결과를 .GIF 파일로 내보내는 것입니다. 이를 통해 애니메이션은 브라우저 친화적이며 모든 장치에서 동일한 시각화를 보장합니다.
그러나 사용자가 상호 작용할 수있는 것을 찾고 있다면 Canvas가 실제로 갈 길이며, CreateJS가 EaseJS 라이브러리 작업에 적합하다고 생각합니다.
어쨌든 귀하의 예에 따르면 애니메이션 GIF 파일로도 동일한 결과를 얻을 수 있습니다.
After Effects로 작업하는 경우 Bodymovin 플러그인을 사용할 수 있습니다 . 모바일 및 웹 사용을 위해 작업을 렌더링합니다. HTML에 사용할 수있는 .json 및 lottie.js 파일이 있습니다. 그러나 먼저 일반 설정에서 스크립트가 파일을 작성하고 네트워크 에 액세스하도록 허용 을 해제해야합니다 . 완료되면 Window , Extensions 로 이동하여 Bodymovin을 찾으 십시오 . 컴포지션을 선택하고 저장할 위치를 설정하고 렌더를 클릭하십시오. .json 및 lottie.js 파일을 HTML에 넣으면 작업이 완료됩니다. GIF는로드하는 데 더 많은 시간이 필요하기 때문에 최상의 솔루션이 아니라고 생각합니다.
당신은 여기에서 다운로드 할 수 있습니다 : http://aescripts.com/bodymovin 당신의 가격을 추가하거나 무료로 원한다면 당신은 $ 0.00를 넣을 수 있습니다 ...
다음은 Bodymovin을 사용하고 Visual Studio를 사용하여 웹 사이트에서 애니메이션을 설정하는 방법에 대한 자습서입니다. youtube.com/watch?v=YmPsCD5jRDw&t=282s
HTML 및 CSS 기본 사항을 알고 있다면 쉽게 이해할 수 있습니다. 그 튜토리얼이 도움이 되었으면 좋겠습니다.