원칙 및 구현 (1 부) – Smashing Magazine
같지 않은 타임 라인 기반 일련의 이벤트에서 이야기를 전하는 애니메이션 또는 상호 작용 누군가가 무언가를 만질 때 트리거되는 애니메이션, 주변 애니메이션 처음에는 눈에 띄지 않을 수있는 수동 운동입니다. 그러나 그들은 디자인을 미묘한 방식으로 살아있는 것처럼 보이게합니다.
주변 애니메이션에서 요소는 색상 사이에서 미묘하게 전환하거나 천천히 움직이거나 점차적으로 위치를 이동할 수 있습니다. 요소가 나타나고 사라지거나 크기가 변경되거나 천천히 회전 할 수 있습니다.
주변 애니메이션은 방해가되지 않습니다. 그들은주의를 요구하지 않고, 산만하지 않으며, 제품이나 웹 사이트를 사용할 때 달성하려는 것을 방해하지 않습니다. 그들은 또한 장난기가 좋을 수 있으며, 누군가가 그들을 시력을 잡을 때 누군가를 웃게 만듭니다. 그런 식으로, 주변 애니메이션 브랜드의 성격에 깊이를 더하십시오.
주변 애니메이션의 개념을 설명하기 위해 나는 빠른 드로우 맥그로 CSS/SVG 애니메이션으로서 만화 (PDF). 이 만화는 1971 년 Charlton Comics에 의해 출판되었으며, 인쇄 된이 캐릭터는 움직이지 않아서 주변 애니메이션으로 전환 할 수있는 이상적인 후보자가되었습니다.
참고로: 오리지널 커버 아티스트 Ray Dirgo는 1970 년대 Charlton Comics의 Hanna-Barbera 캐릭터를 그리는 그의 작품으로 가장 잘 알려져 있습니다. Ray는 92 세의 나이에 2000 년에 세상을 떠났습니다. 그는 1986 년에 사업을 시작한 Charlton Comics보다 오래 지속되었으며 DC Comics는 캐릭터를 인수했습니다.
팁: Codepen에서 전체 주변 애니메이션 코드를 볼 수 있습니다.
애니메이션에 요소를 선택합니다
페이지 나 그래픽의 모든 것이 움직일 필요는 없으며 주변 애니메이션 디자인의 일부는 다음과 같습니다. 언제 멈출 지 아는 것. 속임수는 소속이없는 곳으로 움직임을 강요하는 대신 자연스럽게 미묘한 움직임에 적합한 요소를 선택하는 것입니다.
자연 운동 신호
내가 무엇을 애니메이션 해야하는지 결정할 때, 나는 자연 운동 신호를 찾고 실제 세계에서 무언가가 자연스럽게 움직일 때를 생각합니다. 나는 나 자신에게 묻습니다. “이것은 무게가 있습니까?”,,, “유연합니까?”그리고 “실생활에서 움직일까요?” 대답이 있다면 “예,” 움직이면 아마도 옳을 것입니다. Ray Dirgo의 커버 아트 워크에는 몇 가지 모션 큐가 있습니다.
예를 들어, Peace Pipe Quick Draw의 퍼핑에는 두 개의 깃털이 매달려 있습니다. 그들은 실제 깃털처럼 파이프가 움직일 때 약간 왼쪽과 오른쪽으로 스윙합니다.
#quick-draw-pipe {
animation: quick-draw-pipe-rotate 6s ease-in-out infinite alternate;
}
@keyframes quick-draw-pipe-rotate {
0% { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}
#quick-draw-feather-1 {
animation: quick-draw-feather-1-rotate 3s ease-in-out infinite alternate;
}
#quick-draw-feather-2 {
animation: quick-draw-feather-2-rotate 3s ease-in-out infinite alternate;
}
@keyframes quick-draw-feather-1-rotate {
0% { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}
@keyframes quick-draw-feather-2-rotate {
0% { transform: rotate(-3deg); }
100% { transform: rotate(3deg); }
}
행동이 아니라 분위기
나는 종종 분위기에 추가하지만주의를 끌기 위해 싸우지 않는 요소 나 장식 세부 사항을 선택합니다.
주변 애니메이션은 자신이보아야 할 사람에게 신호를 보내는 것이 아닙니다. 그들은 분위기를 만드는 것에 관한 것입니다.
여기서, 족장은 파이프에 퍼지면서 천천히 그리고 미묘하게 상승하고 떨어집니다.
#chief {
animation: chief-rise-fall 3s ease-in-out infinite alternate;
}
@keyframes chief-group-rise-fall {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
추가 효과를 위해, 그의 머리에있는 깃털도 그의 상승과 가을과 함께 시간을 움직입니다.
#chief-feather-1 {
animation: chief-feather-1-rotate 3s ease-in-out infinite alternate;
}
#chief-feather-2 {
animation: chief-feather-2-rotate 3s ease-in-out infinite alternate;
}
@keyframes chief-feather-1-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(-9deg); }
}
@keyframes chief-feather-2-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(9deg); }
}
장난기와 재미
주변 애니메이션에서 내가 가장 좋아하는 것 중 하나는 디자인에 재미를 가져다주는 방법입니다. 그들은 기회입니다 성격을 보여줍니다 사람들이 눈에 띄게 웃게 만드는 장난스러운 세부 사항을 통해.
족장을 면밀히 살펴보면 그의 눈썹이 올라가는 것을 발견 할 수 있습니다. Quick Draw의 눈썹은 또한 임의의 간격처럼 보이는 곳에서 튀어 오릅니다.
#quick-draw-eyebrow {
animation: quick-draw-eyebrow-raise 5s ease-in-out infinite;
}
@keyframes quick-draw-eyebrow-raise {
0%, 20%, 60%, 100% { transform: translateY(0); }
10%, 50%, 80% { transform: translateY(-10px); }
}
계층 구조를 명심하십시오
움직임은 눈을 끌어 모으고 미묘한 움직임조차도 시각적 무게가 있습니다. 따라서 가장 큰 영향을 미치는 데 필요한 요소에 대한 가장 분명한 애니메이션을 보유합니다.
그의 파이프를 피우는 것은 Quick Draw McGraw에 분명히 큰 영향을 미쳤으므로 이것을 보여주기 위해 나는 그의 파이프와 깃털을 포함한 그의 요소를 새로운 SVG 그룹 내에서 포장 한 다음 그 흔들림을 만들었습니다.
#quick-draw-group {
animation: quick-draw-group-wobble 6s ease-in-out infinite;
}
@keyframes quick-draw-group-wobble {
0% { transform: rotate(0deg); }
15% { transform: rotate(2deg); }
30% { transform: rotate(-2deg); }
45% { transform: rotate(1deg); }
60% { transform: rotate(-1deg); }
75% { transform: rotate(0.5deg); }
100% { transform: rotate(0deg); }
}
그런 다음이 움직임을 강조하기 위해 나는 그의 그림자를 흔들기 위해 그 값을 반영했습니다.
#quick-draw-shadow {
animation: quick-draw-shadow-wobble 6s ease-in-out infinite;
}
@keyframes quick-draw-shadow-wobble {
0% { transform: rotate(0deg); }
15% { transform: rotate(-2deg); }
30% { transform: rotate(2deg); }
45% { transform: rotate(-1deg); }
60% { transform: rotate(1deg); }
75% { transform: rotate(-0.5deg); }
100% { transform: rotate(0deg); }
}
구속을 적용하십시오
무언가를 애니메이션 할 수 있다고해서 그것이 의미가있는 것은 아닙니다. 주변 애니메이션을 만들 때 이미지를 연구하고 미묘한 움직임이 생명을 더할 수있는 요소를 주목합니다. 나는 질문을 명심한다 : “내가 말하는 이야기는 무엇입니까? 운동은 어디에 도움이되고 언제 산만해질 수 있습니까?”
구속은 단지 덜 행동하는 것이 아닙니다. 옳은 일을 덜 자주하는 것입니다.
수출을위한 SVG를 레이어링합니다
“Smashing Animations Part 4 : SVGS 최적화”에서 나는 내가 의존하는 과정에 대해 썼습니다. “애니메이션을위한 SVG를 준비, 최적화 및 구조화하십시오.” 요소가 단일 SVG 파일에 크램링되면 탐색하기위한 악몽이 될 수 있습니다. 특정 경로 나 그룹을 찾는 것은 건초 더미에서 바늘을 찾는 것처럼 느낄 수 있습니다.
그렇기 때문에 SVG를 레이어로 개발하여 한 번에 한 번의 요소 세트를 내보내고 최적화합니다. 항상 최종 파일에 표시됩니다. 이를 통해 각 청소 섹션에 붙여 넣어 마스터 SVG를 점차적으로 구축 할 수 있습니다.
배경 요소를 내보내고 최적화하고 클래스 및 ID 속성을 추가하고 코드를 SVG 파일에 붙여 넣는 것으로 시작합니다.
그런 다음, 나는 종종 정적을 유지하거나 McGraw와 같은 그룹으로 그룹으로 움직이는 요소를 수출합니다.
마침내 Quick Draw의 파이프, 눈 및 돌로 된 반짝임과 같은 세부 사항을 수출, 이름 지정 및 추가하기 전에.
동일한 크기의 아트 보드에서 각 레이어를 내보내므로 모든 슬롯을 자동으로 제자리에 제자리에 놓기 때문에 정렬 또는 포지셔닝 문제에 대해 걱정할 필요가 없습니다.
주변 애니메이션 구현
프로젝트에 주변 애니메이션을 추가하기 위해 애니메이션 프레임 워크 또는 라이브러리가 필요하지 않습니다. 대부분의 경우, 당신이 필요한 것은 잘 준비된 SVG와 사려 깊은 CS입니다.
그러나 SVG부터 시작하겠습니다. 핵심은 논리적으로 요소를 그룹화하고 CSS의 애니메이션 훅 역할을하는 의미있는 클래스 또는 ID 속성을 제공하는 것입니다. 이 애니메이션을 위해 나는 모든 움직이는 부분을 자체 식별자와 #quick-draw-tail 또는 #chief-smoke-2. 그런 식으로, 나는 쓰레기통에 너구리처럼 Dom을 파헤치지 않고 필요한 것을 정확하게 목표로 삼을 수있었습니다.
SVG가 설정되면 CSS는 대부분의 작업을 수행합니다. 나는 사용할 수있다 @keyframes 보다 표현적인 움직임을 위해서 animation-delay 무작위성과 비틀 거리는 타이밍을 시뮬레이션합니다. 요령은 모든 것을 미묘하게 유지하고주의를 기울이지 않고 기억하고 있다는 것을 기억하는 것입니다.
대부분의 주변 애니메이션은 지속적으로 루프를 유지하므로 가벼운 중량 그리고 성능 친화적입니다. 물론, 동의를 덜 요구 한 사용자를 존중하는 것은 좋은 방법입니다. 당신은 당신의 애니메이션을 @media prefers-reduced-motion 환영 할 때만 실행되도록 쿼리.
@media (prefers-reduced-motion: no-preference) {
#quick-draw-shadow {
animation: quick-draw-shadow-wobble 6s ease-in-out infinite;
}
}
구현하기 쉬운 작은 터치이며 디자인을보다 포괄적으로 만듭니다.
주변 애니메이션 디자인 원칙
애니메이션이 액션보다 분위기와 같은 주변을 느끼기를 원한다면 몇 가지 원칙을 따르는 데 도움이됩니다. 이것들은 단단하고 빠른 규칙이 아니라 연기, 반짝임, 안구 및 눈썹에 애니메이션을하면서 배운 것입니다.
애니메이션을 느리고 매끄럽게 유지하십시오
주변 애니메이션은 편안한 느낌이 들기 때문에 사용하십시오 기간이 길다 그리고 선택하십시오 유기적이라고 느끼는 곡선을 완화합니다. 나는 종종 사용한다 ease-in-out그러나 입방체 베지어 곡선은 더 편안한 느낌과 자연에서 찾을 수있는 움직임을 원할 때 도움이 될 수 있습니다.
원활하게 반복하고 갑자기 변화를 피하십시오
하드리스트 또는 갑작스런 점프는 분위기를 망칠 수 있으므로 애니메이션이 루프되면 순조롭게 순환해야합니다. 당신은 이것을 할 수 있습니다 일치 시작 및 종료 키 프레임또는 animation-direction 에게 alternate 애니메이션이 앞으로 나간 다음 다시 플레이합니다.
계층화를 사용하여 복잡성을 구축하십시오
단일 애니메이션은 지루할 수 있습니다. 별도의 레이어에 각각 5 개의 미묘한 애니메이션이 풍부하고 살아남을 수 있습니다. 사운드 믹스를 만드는 것처럼 생각하십시오. 리듬, 톤 및 타이밍의 변화. 내 애니메이션에서는 다양한 간격으로 반짝 반짝 반짝 반짝 반짝 빛나고 연기가 위로 웅크 리고 깃털이 흔들리고 눈이 가득합니다. 아무것도 지배하지 않으며 각 모션은 장면에서 작은 역할을합니다.
방해를 피하십시오
주변 애니메이션의 요점은 그것이 지배적이지 않다는 것입니다. 그것은 a입니다 배경 요소 그리고 행동 전화가 아닙니다. 누군가의 눈이 눈썹을 올리면 아마 너무 많을 것입니다. 아마도 너무 많이 보이면 애니메이션을 다시보고있을 때만 느낄 때까지 애니메이션을 되돌리십시오.
접근성과 성능을 고려하십시오
확인하다 prefers-reduced-motion그리고 모든 사람의 장치가 복잡한 애니메이션을 처리 할 수 있다고 가정하지 마십시오. SVG와 CSS는 가볍지 만 필터 흐림 및 그림자를 떨어 뜨리는 것과 같은 것들이 있으며 복잡한 CSS 애니메이션은 여전히 저전력 장치에 세금을 부과 할 수 있습니다. 애니메이션이 순전히 장식적인 경우 추가를 고려하십시오 aria-hidden="true" 접근성 트리를 어지럽히는 것을 막기 위해.
무승부에 빠릅니다
주변 애니메이션은 훌륭한 요리의 양념과 같습니다. 간신히 눈에 띄지 않는 소금의 꼬집음이지만 사라 졌을 때 놓칠 것입니다. 소리 지르지 않고 속삭입니다. 이끌리지 않고 남아 있습니다. 그것은 떠 다니는 연기, 깃털을 흔들며, 당신이 당신의 눈 구석에서 잡는 반짝임입니다. 그리고 잘 끝나면 주변 애니메이션 박수를 요구하지 않고 디자인에 개성을 더합니다.
이제 나는 모든 사람이 만화 캐릭터를 애니메이션 할 필요는 없다는 것을 알고 있습니다. 따라서 2 부에서는 최근 몇몇 클라이언트 프로젝트를 위해 애니메이션을 만든 방법을 공유하겠습니다. 다음 시간까지 삽화를 제작하거나 SVG와 함께 일하는 경우 다음과 같은 경우에 문의하십시오. 이것이 진짜라면 어떻게 움직일까요? 그런 다음 그냥 애니메이션하십시오. 느리고 부드럽게 만드십시오. 주변을 유지하십시오.
Codepen에서 전체 주변 애니메이션 코드를 볼 수 있습니다.
(GG, YK)
Post Comment