개발에 뛰어들기 전에 저는 After Effects에서 많은 모션 그래픽 작업을 했습니다. 그러나 그 배경에도 불구하고 나는 여전히 웹에서 애니메이션을 만드는 것이 상당히 당혹스럽다는 것을 알았습니다.
비디오 그래픽은 특정 비율로 디자인된 다음 내보내집니다. 완료! 그러나 웹에는 "내보내기 설정"이 없습니다. 우리는 코드를 세상에 내보내기만 하면 애니메이션이 어떤 장치에 놓이든 적응해야 합니다.
그럼 반응형 애니메이션에 대해 알아보겠습니다! 와일드 웹에서 애니메이션에 접근하는 가장 좋은 방법은 무엇입니까? 우리는 몇 가지 일반적인 접근 방식, 몇 가지 GSAP 특정 팁 및 몇 가지 동작 원리를 다룰 것입니다. 약간의 프레임 작업을 시작하겠습니다...
이 애니메이션은 어떻게 사용됩니까?
반응형 애니메이션에 대한 Zach Saucier의 기사 코드로 뛰어들기 전에 최종 결과에 대해 생각하기 위해 한 걸음 물러서기를 권장합니다.
애니메이션이 애플리케이션의 여러 부분에서 반복되는 모듈입니까? 확장이 필요합니까? 이 점을 염두에 두면 애니메이션의 크기를 조정하는 방법을 결정하고 노력을 낭비하지 않는 데 도움이 될 수 있습니다.
이것은 훌륭한 조언입니다. ㅏ 거대한 반응형 애니메이션 디자인의 일부는 해당 애니메이션이 확장되어야 하는지 여부와 방법을 알고 처음부터 올바른 접근 방식을 선택하는 것입니다.
대부분의 애니메이션은 다음 범주에 속합니다.
- 결정된: 모든 장치에서 동일한 크기와 종횡비를 유지하는 아이콘 또는 로더와 같은 것에 대한 애니메이션입니다. 여기서 걱정할 것은 없습니다! 거기에 일부 픽셀 값을 하드 코딩하고 하루를 시작하십시오.
- 유동체: 다양한 장치에서 유동적으로 조정해야 하는 애니메이션. 대부분의 레이아웃 애니메이션이 이 범주에 속합니다.
- 타겟팅 : 특정 장치 또는 화면 크기와 관련되거나 특정 중단점에서 크게 변경되는 애니메이션(예: 데스크톱 전용 애니메이션 또는 터치 또는 호버와 같은 장치별 상호 작용에 의존하는 상호 작용).
유동적이며 대상이 지정된 애니메이션에는 다양한 사고 방식과 솔루션이 필요합니다. 한 번 보자…
유체 애니메이션
As 앤디 벨 말한다 : 브라우저의 마이크로 관리자가 아니라 브라우저의 멘토가 되어보세요. 브라우저에 몇 가지 확실한 규칙과 힌트를 제공하고 브라우저를 방문하는 사람들을 위해 올바른 결정을 내리도록 하세요.
(여기 슬라이드 그 프레젠테이션에서.)
유동적인 애니메이션은 브라우저가 힘든 작업을 하도록 하는 것입니다. 많은 애니메이션은 처음부터 올바른 단위를 사용하기만 하면 다양한 컨텍스트에 쉽게 조정할 수 있습니다. 이 펜의 크기를 조정하면 애니메이션이 다음을 사용하는 것을 볼 수 있습니다. 뷰포트 단위 브라우저가 조정함에 따라 유동적으로 확장됩니다.
보라색 상자는 다른 중단점에서 너비도 변경하지만 백분율을 사용하여 이동하므로 애니메이션도 함께 확장됩니다.
다음과 같은 애니메이션 레이아웃 속성 left 과 top 레이아웃 리플로우와 불안정한 '버벅거림' 애니메이션을 유발할 수 있으므로 가능한 경우 변환과 불투명도를 고수하십시오.
하지만 우리는 이러한 단위에만 국한되지 않습니다. 다른 가능성을 살펴보겠습니다.
SVG 단위
SVG 작업에 대해 내가 좋아하는 것 중 하나는 즉시 반응하는 애니메이션에 SVG 사용자 단위를 사용할 수 있다는 것입니다. 단서는 이름에 정말 — 확장 벡터 그래픽입니다. SVG-land에서 모든 요소는 특정 좌표에 표시됩니다. SVG 공간은 요소를 배열할 수 있는 무한한 그래프 용지와 같습니다. 그만큼 viewBox 우리가 볼 수 있는 모눈종이의 치수를 정의합니다.
viewBox="0 0 100 50”이 다음 데모에서는 SVG viewBox is 100 폭 단위 및 50 키가 큰 단위. 이것은 요소를 다음과 같이 애니메이션하면 100 x축을 따라 단위를 지정하면 SVG가 얼마나 크든 작든 상관없이 항상 상위 SVG의 전체 너비만큼 이동합니다! 데모 크기를 조정하여 볼 수 있습니다.
부모 컨테이너의 너비를 기반으로 자식 요소에 애니메이션을 적용하는 것은 HTML 영역에서 약간 더 까다롭습니다. 지금까지 우리는 자바스크립트로 부모의 너비를 잡아야 했습니다. from 위치가 변환되지만 애니메이션할 때 약간 더 바이올린 to 다음 데모에서 볼 수 있듯이 어딘가에 있습니다. 끝점이 변환된 위치이고 화면 크기를 조정하는 경우 해당 위치를 수동으로 조정해야 합니다. 지저분... 🤔
크기 조정 시 값을 조정하는 경우 디 바운스, 또는 브라우저가 크기 조정을 완료한 후 함수를 실행할 수도 있습니다. 크기 조정 리스너는 초당 수많은 이벤트를 발생시키므로 각 이벤트의 속성을 업데이트하는 것은 브라우저에서 많은 작업을 수행합니다.
그러나 이 애니메이션 속도 범프는 곧 과거의 일이 될 것입니다! 드럼롤 주세요... 🥁
컨테이너 유닛! 사랑스러운 물건. 이 글을 쓰고 있는 시점에는 Chrome과 Safari에서만 작동합니다. 하지만 이 글을 읽을 즈음에는 Firefox도 사용할 수 있게 될 것입니다. 이 다음 데모에서 실제로 작동하는지 확인하십시오. 저 꼬마들이 가는 것 좀 봐! 부모 요소에 상대적인 애니메이션이 흥미롭지 않습니까!
이 브라우저 지원 데이터의 출처 사용해도 되나요, 더 자세한 내용이 있습니다. 숫자는 브라우저가 해당 버전 이상에서 기능을 지원함을 나타냅니다.
데스크탑
| 크롬 | 파이어 폭스 | IE | Edge | Safari |
|---|---|---|---|---|
| 105 | 아니 | 아니 | 105 | 16.0 |
모바일/태블릿
| Android Chrome | 안드로이드 파이어 폭스 | Android | iOS의 사파리 |
|---|---|---|---|
| 106 | 아니 | 106 | 16.0 |
FLIP으로 유동적인 레이아웃 전환
앞서 언급했듯이 SVG-land에서는 모든 요소가 하나의 그리드에 깔끔하게 배치되어 반응적으로 쉽게 이동할 수 있습니다. HTML 랜드에서는 훨씬 더 복잡합니다. 반응형 레이아웃을 구축하기 위해 다양한 위치 지정 방법과 레이아웃 시스템을 사용합니다. 웹에서 애니메이션을 만들 때 가장 큰 어려움 중 하나는 많이 레이아웃 변경은 애니메이션이 불가능합니다. 요소가 위치에서 이동해야 할 수도 있습니다. relative 에 fixed, 또는 플렉스 컨테이너의 일부 자식은 뷰포트 주위에서 부드럽게 섞일 필요가 있습니다. 어쩌면 요소의 부모를 다시 지정하고 DOM에서 완전히 새로운 위치로 이동해야 할 수도 있습니다.
까다롭죠?
잘. FLIP 기술은 하루를 저장하기 위해 여기에 있습니다. 그것은 우리가 이러한 불가능한 것들을 쉽게 움직일 수 있게 해줍니다. 기본 전제는 다음과 같습니다.
- 먼저,: 전환에 관련된 요소의 초기 위치를 잡습니다.
- 성: 요소를 이동하여 최종 위치를 잡습니다.
- 반대로하다: 첫 번째 상태와 마지막 상태 사이의 변경 사항을 확인하고 변환을 적용하여 요소를 원래 위치로 되돌립니다. 이것은 요소가 여전히 먼저 위치하지만 실제로는 그렇지 않습니다.
- 연극: 반전된 변환을 제거하고 속이는 먼저 상태 지난 (주).
다음은 GSAP의 FLIP 플러그인을 사용하는 데모입니다.
바닐라 구현에 대해 조금 더 이해하려면 Paul Lewis의 블로그 게시물 — 그는 FLIP 기술의 두뇌입니다.
SVG를 유연하게 확장
당신은 나를 잡았습니다 ... 이것은 아닙니다 정말 애니메이션 팁. 그러나 좋은 애니메이션을 위해서는 무대를 올바르게 설정하는 것이 필수적입니다! SVG는 기본적으로 매우 훌륭하게 확장되지만 다음을 사용하여 확장하는 방법을 제어할 수 있습니다. preserveAspectRatio, SVG 요소의 종횡비와 viewBox 가로 세로 비율이 다릅니다. 와 거의 동일한 방식으로 작동합니다. background-position 과 background-size CSS의 속성. 선언은 정렬 값(background-position)와 소개 or 일부분 참조 (background-size).
해당 Meet 및 Slice 참조에 관해서는 — slice 처럼 background size: cover및 meet 처럼 background-size: contain.
preserveAspectRatio="MidYMax slice"— x축 중앙, y축 하단에 정렬하고 전체 뷰포트를 덮도록 확대합니다.preserveAspectRatio="MinYMin meet"— x축의 왼쪽, y축의 위쪽에 정렬하고 전체를 유지하면서 확대합니다.viewBox명백한.
톰 밀러 다음을 사용하여 한 단계 더 나아갑니다. overflow: visible CSS에서 높이를 제한하면서 "stage left"와 "stage right"를 표시하는 포함 요소:
반응형 SVG 애니메이션의 경우 SVG 보기 상자를 사용하여 특정 브라우저 너비 아래에서 자르고 크기가 조정되는 보기를 만드는 동시에 브라우저가 너비보다 넓을 때 오른쪽과 왼쪽에 SVG 애니메이션을 더 많이 표시하는 것이 편리할 수 있습니다. 한계점. SVG에서 볼 수 있는 오버플로를 추가하고 팀을 구성하여 이를 달성할 수 있습니다.
max-heightSVG가 수직으로 너무 많이 확장되는 것을 방지하는 래퍼.
유연하게 조정되는 캔버스
Canvas는 다음을 사용하여 복잡한 애니메이션에 훨씬 더 적합합니다. 많은 SVG 또는 HTML DOM에 애니메이션을 적용하는 것보다 움직이는 부분이 많지만 본질적으로 더 복잡합니다. 이러한 성능 향상을 위해 노력해야 합니다! 사랑스러운 반응형 단위와 즉시 확장 가능한 SVG와 달리, 주위를 둘러싸고 약간의 미세 관리가 필요합니다.
나는 내 설정을 좋아한다 그래야 SVG(편향될 수 있음)와 같은 방식으로 작동하고 내에서 작동하는 멋진 단위 시스템과 고정된 종횡비로 작동합니다. 또한 무언가가 변경될 때마다 다시 그려야 하므로 브라우저의 크기 조정 또는 디바운스가 완료될 때까지 다시 그리기를 지연하는 것을 잊지 마십시오!
조지 프랜시스 이것도 합체 사랑스러운 작은 도서관 Canvas를 정의할 수 있는 viewBox 속성 및 preserveAspectRatio — SVG와 똑같습니다!
대상 애니메이션
때로는 애니메이션에 대해 덜 유동적이고 보다 직접적인 접근 방식을 취해야 할 수도 있습니다. 모바일 장치는 데스크탑 컴퓨터보다 공간이 훨씬 적고 성능 면에서 애니메이션 주스도 적습니다. 따라서 모바일 사용자에게 애니메이션이 없을 수도 있는 축소된 애니메이션을 제공하는 것이 합리적입니다.
때로는 모바일을 위한 최고의 반응형 애니메이션은 애니메이션이 전혀 없는 것입니다! 모바일 UX의 경우 애니메이션이 끝날 때까지 기다리는 것보다 사용자가 빠르게 콘텐츠를 소비할 수 있도록 하는 것이 우선입니다. 모바일 애니메이션은 콘텐츠, 탐색 및 상호 작용을 지연시키기보다는 향상시켜야 합니다. 에릭 반 홀츠
이를 위해 CSS로 스타일을 지정할 때와 마찬가지로 미디어 쿼리를 사용하여 특정 뷰포트 크기를 타겟팅할 수 있습니다! 다음은 미디어 쿼리를 사용하여 처리되는 CSS 애니메이션과 다음으로 처리되는 GSAP 애니메이션을 보여주는 간단한 데모입니다. gsap.matchMedia():
이 데모의 단순함은 많은 마법을 숨기고 있습니다! JavaScript 애니메이션은 하나의 특정 화면 크기에서만 올바르게 작동하기 위해 좀 더 많은 설정과 정리가 필요합니다. 나는 과거에 사람들이 CSS에서 보기에서 애니메이션을 숨겼던 공포를 보았습니다. opacity: 0, 하지만 애니메이션은 여전히 리소스를 사용하여 백그라운드에서 계속 움츠러들고 있습니다. 😱
화면 크기가 더 이상 일치하지 않으면 가비지 수집을 위해 애니메이션을 종료하고 해제해야 하며 다른 스타일과의 충돌을 방지하기 위해 애니메이션의 영향을 받는 요소를 모션 도입 인라인 스타일에서 지워야 합니다. 까지 gsap.matchMedia(), 이것은 성가신 과정이었습니다. 우리는 각 애니메이션을 추적하고 이 모든 것을 수동으로 관리해야 했습니다.
gsap.matchMedia() 대신 애니메이션 코드를 특정 경우에만 실행되는 함수에 쉽게 넣을 수 있습니다. 미디어 쿼리 성냥. 그런 다음 더 이상 일치하지 않으면 모든 GSAP 애니메이션 및 스크롤 트리거 해당 기능에서 자동으로 되돌립니다. 애니메이션이 표시되는 미디어 쿼리는 모든 힘든 작업을 수행합니다. GSAP 3.11.0에 있으며 게임 체인저입니다!
우리는 화면 크기에만 국한되지 않습니다. 있다 수많은 미디어 기능 훅!
(prefers-reduced-motion) /* find out if the user would prefer less animation */
(orientation: portrait) /* check the user's device orientation */
(max-resolution: 300dpi) /* check the pixel density of the device */다음 데모에서는 다음 항목에 대한 검사를 추가했습니다. prefers-reduced-motion 애니메이션에서 방향 감각을 잃은 사용자가 주변에서 윙윙거리는 것들로 인해 방해받지 않도록 하기 위함입니다.
그리고 Tom Miller가 장치의 종횡비를 사용하여 애니메이션을 조정하는 다른 재미있는 데모를 확인하세요.
화면 크기를 넘어 상자 밖에서 생각하기
반응형 애니메이션은 화면 크기보다 더 많은 것을 고려해야 합니다. 다른 장치는 다른 상호 작용을 허용하며, 이를 고려하지 않으면 약간의 엉킴에 빠지기 쉽습니다. CSS에서 호버 상태를 만드는 경우 다음을 사용할 수 있습니다. hover 미디어 기능은 사용자의 일차 입력 메커니즘은 요소를 가리킬 수 있습니다.
@media (hover: hover) {
/* CSS hover state here */
}몇 가지 조언 제이크 휘틀리:
많은 시간 동안 우리는 브라우저 너비를 기반으로 애니메이션을 만들어 데스크톱 사용자가 호버 상태를 원한다는 순진한 가정을 합니다. 저는 개인적으로 과거에 데스크탑 레이아웃 > 1024px로 전환했지만 JS에서 터치 감지를 수행할 수 있는 문제가 많았습니다. 이는 레이아웃이 데스크탑용이었지만 JS가 모바일용인 불일치로 이어졌습니다. 요즘 나는 패리티를 보장하고 ipad Pro 또는 Windows 표면을 처리하기 위해 호버와 포인터에 기대고 있습니다(커버가 아래로 내려갔는지 여부에 따라 포인터 유형이 변경될 수 있음)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)그런 다음 CSS 레이아웃 쿼리와 JavaScript 쿼리를 결합하여 입력 장치를 기본 요소로 고려하겠습니다. 되지 않습니다. 반대가 아니라 너비로.
ScrollTrigger 팁
GSAP를 사용하는 경우 ScrollTrigger 플러그인, 장치의 터치 기능을 쉽게 식별하기 위해 연결할 수 있는 편리한 작은 유틸리티가 있습니다. ScrollTrigger.isTouch.
0- 건들지 말것 (포인터/마우스만 해당)1- 터치 전용 장치(예: 전화)2– 장치는 수락할 수 있습니다 터치 입력 및 마우스 포인터 (Windows 태블릿과 같은)
if (ScrollTrigger.isTouch) {
// any touch-capable device...
}
// or get more specific:
if (ScrollTrigger.isTouch === 1) {
// touch-only device
}반응형 스크롤 트리거 애니메이션에 대한 또 다른 팁…
아래의 데모는 이미지 갤러리를 가로로 이동하는 것인데 화면 크기에 따라 너비가 달라집니다. 스크러빙된 애니메이션의 중간에 화면 크기를 조정하면 애니메이션이 깨지고 값이 부실해질 수 있습니다. 이것은 일반적인 과속 방지턱이지만 쉽게 해결할 수 있는 문제입니다! 화면 크기에 따른 계산을 기능적 값으로 팝하고 설정 invalidateOnRefresh:true. 그렇게 하면 브라우저 크기가 조정될 때 ScrollTrigger가 해당 값을 다시 계산합니다.
보너스 GSAP 얼간이 팁!
모바일 장치에서 브라우저 주소 표시줄은 일반적으로 스크롤할 때 표시되거나 숨겨집니다. 이것은 크기 조정 이벤트로 간주되며 시작됩니다. ScrollTrigger.refresh(). 이것은 애니메이션에서 점프를 유발할 수 있으므로 이상적이지 않을 수 있습니다. GSAP 3.10 추가 ignoreMobileResize. 브라우저 표시줄이 작동하는 방식에는 영향을 미치지 않지만 ScrollTrigger.refresh() 발사에서 터치 전용 장치에서 작은 수직 크기 조정.
ScrollTrigger.config({
ignoreMobileResize: true
});모션 원리
웹에서 모션 작업을 할 때 고려해야 할 몇 가지 모범 사례를 알려 드리겠습니다.
거리 및 완화
반응형 애니메이션에서 잊기 쉬운 작지만 중요한 것은 속도, 운동량 및 거리의 관계입니다! 좋은 애니메이션 현실 세계를 모방해야 한다 믿을 수 있고 실제 세계에서 더 먼 거리를 커버하는 데 더 오래 걸립니다. 애니메이션이 이동하는 거리에 주의하고 사용된 지속 시간과 여유 시간이 다른 애니메이션과 관련하여 의미가 있는지 확인합니다.
또한 더 많은 이동 거리가 있는 요소에 보다 극적인 완화를 적용하여 증가된 모멘텀을 표시할 수도 있습니다.
특정 사용 사례의 경우 화면 너비에 따라 지속 시간을 더 동적으로 조정하는 것이 도움이 될 수 있습니다. 이 다음 데모에서는 gsap.utils 현재에서 반환된 값을 고정하기 위해 window.innerWidth 합리적인 범위로 설정한 다음 해당 숫자를 기간에 매핑합니다.
간격 및 수량
명심해야 할 또 다른 사항은 다양한 화면 크기에서 요소의 간격과 양입니다. 인용 스티븐 쇼:
창 주위에 간격이 있는 환경 애니메이션(시차, 구름, 나무, 색종이 조각, 장식 등)이 있는 경우 화면 크기에 따라 크기를 조정하고 수량을 조정해야 합니다. 큰 화면에는 전체에 걸쳐 더 많은 요소가 퍼져 있어야 하지만 작은 화면에는 동일한 효과를 위해 몇 개만 필요합니다.
나는 방법을 좋아한다 오페르 비슈니아 애니메이션을 무대로 생각합니다. 요소를 추가하고 제거하는 것은 형식적일 필요가 없으며 전체 안무의 일부가 될 수 있습니다.
반응형 애니메이션을 디자인할 때 문제는 동일한 콘텐츠를 뷰포트에 밀어 넣어 "맞추는" 방법이 아니라 기존 콘텐츠 집합을 선별하여 동일한 의도를 전달하는 방법입니다. 즉, 추가할 콘텐츠와 제거할 콘텐츠를 의식적으로 선택해야 합니다. 일반적으로 애니메이션의 세계에서 사물은 프레임 안이나 밖으로 튀어나오지 않습니다. 요소를 "무대"에 들어가거나 나가는 것으로 생각하고 시각적 및 주제적 의미를 만드는 방식으로 전환에 애니메이션을 적용하는 것이 좋습니다.
그리고 그것은 많은 것입니다. 반응형 애니메이션 팁이 더 있으면 댓글 섹션에 표시하세요. 매우 유용한 정보가 있으면 이 정보 요약에 추가하겠습니다!
추가
의 메모 하나 더 톰 밀러 이 기사를 준비하면서:
반응형 애니메이션 기사에 대한 이 팁은 너무 늦었지만 "빌드하기 전에 모든 애니메이션을 완료"하는 것이 좋습니다. 저는 현재 "모바일 버전"으로 일부 사이트 애니메이션을 개조하고 있습니다. 감사합니다
gsap.matchMedia... 하지만 처음부터 별도의 모바일 레이아웃/애니메이션이 있다는 것을 알았더라면 좋았을 것입니다.
나는 우리 모두가 "미리 계획"하기 위한 이 팁이 절대적인 마지막 순간에 왔다는 점에 감사한다고 생각합니다. 감사합니다, Tom. 그리고 그 개조에 행운을 빕니다.
