현대 웹 사이트는 애니메이션에 가득합니다. 종종 너무 많습니다 . 그들은 콘텐츠를 혼란스럽게하고 사용자를 좌절시킬 수 있습니다. 그러나 애니메이션은 부인할 수없는 매력을 가지고 있습니다. 그들은 웹 사이트에 생명을 불어 넣고, 창조하는 것이 재미 있으며, 엄청나게 인상적 일 수 있습니다. 이 문제는 반드시 수량이 아니라 웹 사이트 콘텐츠와 애니메이션의 관련성입니다 . 제대로 통합 된 애니메이션은 강제로 느껴지고 가치를 더합니다.
이 기사는 사용자를 소외시키지 않고 정교한 애니메이션을 통합하는 것을 목표로하는 웹 개발자를 대상으로합니다. 사용자 좌절을 최소화하면서 매력적인 애니메이션을 만드는 데 사용한 기술을 공유하겠습니다. "성가신 사용자가 아님"은 낮은 막대라고 생각할 수도 있습니다.
내 접근 방식은 다소 독창적입니다. 인디 게임 게시자 인 Devolver Digital (Vieko와 협력)의 웹 개발자로서 개발과 디자인에 참여하고 있습니다. 처음에는 디자인으로 어려움을 겪었습니다. 스케치는 Photoshop 구현으로 거의 번역되지 않아 수많은 재시작으로 이어집니다. 디자인을 우회하고 코드로 바로 이동하려는 시도는 보상하기 위해 애니메이션에 의존하여 똑같이 실패한 것으로 판명되었습니다. 나의 디자인 기술은 부족했다.
그런 다음 바로 가기를 발견했습니다.
웹 사이트 개념을 발표 할 때 동료와 고객은 내 디자인 기술에 대해 열망합니다 (그리고 쿠키를 보내십시오 - 내가 먹었습니다. 죄송합니다!). 내 비밀?
나는 비디오 게임에서 많이 빌린다.
게임 색상, 버튼, 모달 박스, 핵심 개념 및 게임 플레이 메커니즘을 모방합니다. 나는 게임을한다 (그들은 재미있다!), 스크린 샷과 장면을 캡처 한 다음… 요소를 적응시킨다. 가장 중요한 것은 애니메이션을 조정하는 것입니다.
비디오 게임은 풍부한 영감의 원천을 제공하지만이 접근법은 산업에 적용될 수 있습니다. 저에게 게임 애니메이션을 적응하면 각 웹 사이트의 잠재력이 최대한 다릅니다.
Devolver Digital은 다양한 게임 라이브러리를 자랑합니다. 액션으로 가득 찬 타이틀과 함께 차분한 이야기 경험; 숨겨진 깊이와 Shadow Warrior 3과 같은 게임이있는 시각적으로 간단한 게임. 각 게임은 플레이어를 독창적으로 참여시켜 기억에 남는 경험을 만듭니다. 우리는 웹 사이트 에서이 참여를 복제하여 웹 기술을 활용하여 사용자가 컨트롤러를 터치하기 전에 연결을 만들어냅니다. 우리는 본질적으로 자산, 애니메이션 및 메커니즘을 "차용"하여 사용자에게 게임 플레이의 맛을 제공합니다.
작살을 휘두르는 영웅에 관한 게임 인 Olija부터 시작합시다. 게임의 시각적 유동성과 이야기 깊이는 강조하는 주요 측면이었습니다. 웹 사이트는 사용자를 유혹하고 이야기에 몰입하고 통제력을 제공해야했습니다.
웹 사이트는 상호 작용 이점을 제공합니다. 마우스 움직임, 호버, 스크롤 바 및 키보드 입력을 통해 이것을 활용합니다. 나는 직관적 인 성격에 대한 스크롤 바를 선호합니다.
Olija의 디자인에는 3 개의 Viewport Heights에 걸친 느린 영화 신용 스타일 페이드 애니메이션이 포함됩니다. 이것은 속도와 톤을 설정합니다. 다이나믹 스크린 샷과 같은 요소 (숲을 통과하는 영웅과 같은)를 포함한 후속 섹션은 스토리를 강화하고 게임 스타일을 보여줍니다. 스프라이트 시트를 기반으로 한 픽셀 아트에 애니메이션 픽셀 아트는 변환 특성과 함께 스프라이트 시트 위치를 애니메이션해야했습니다.
Ape Out은 액션 영화 느낌으로 완성 된 장면을 보여주는 웹 사이트에 영감을 주어 사용자가 이전의 행동을 상상할 수있게했습니다. 스크롤 바는 카메라의 탐색을 제어합니다. 3D WebGL 캔버스 인 것처럼 보이지만 실제로는 3D 변환이있는 영리하게 배치됩니다.
Gungeon의 웹 사이트를 입력하면 향수를 사용하여 관련 게임을 홍보하기 위해 플레이어 경험을 축하합니다.
단순하면서도 매력적인 게임 플레이 루프를 갖춘 Loop Hero는 무한한 스크롤 웹 사이트에 영감을주었습니다. 스크롤 바는 전투 중에 일시적으로 비활성화되어 게임의 진행을 보여줍니다. 전투 결과는 역동적이며 재생 가능성이 추가됩니다.
Boomerang X와 Shadow Warrior 웹 사이트는 게임 플레이 영상을 직접 통합하여 대화식 요소를 만듭니다. Shadow Warrior의 콘텐츠는 게임 내 영향으로 흔들린다. 부메랑 X의 로고는 게임 내 부메랑의 움직임을 반영합니다.
Devolver Tumble Time의 Tumbler Mechanic은 중대한 도전을 제시했습니다. MatterJ를 사용한 초기 시도는 실패했습니다. 궁극적으로, 3JS는 원하는 유동성을 달성하기 위해 사용되었다.
무게가 4MB에 불과한 Phantom Abyss 웹 사이트는 이러한 많은 기술을 보여줍니다. 미묘한 애니메이션 (블록, 페이딩 팬텀, 애니메이션 폭포, 먼지 입자 등)은 깊이를 더하고 미묘하게 게임의 숨겨진 복잡성을 제안합니다. svgator는 SVG (토치, 머리, 눈) 애니메이션에 사용되었습니다.
이 예는 애니메이션에 대한 우리의 접근 방식을 강조합니다. Devolver Digital의 다양한 게임 카탈로그는 끝없는 영감을 제공합니다 (Ragnorium, Heave Ho 및 Gato Roboto를 확인하십시오). Vieko의 Minit 및 Sludge Life에 대한 연구는 또한이 접근법을 보여줍니다.
우리는 주로 Vercel, Nextjs, Framer Motion 및 React-Three Fiber를 사용합니다. 다른 많은 도구가 존재하지만 이들은 워크 플로를 단순화했습니다.
도구와 기술의 풍부함은 압도적 일 수 있으며 혁신보다는 모방으로 이어질 수 있습니다. 우리는 다른 사람의 작업을 복제하는 데 중점을 두는 대신 컨텐츠 자체에 깊이 연결된 애니메이션 생성을 우선 순위로 삼아 독특하고 기억에 남는 사용자 경험을 단축해야합니다.
위 내용은 사용자를 참여시키는 게임 애니메이션 기술을 훔치기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
