Velocity를 사용하여 애니메이션을 쉽게 추가하는 방법

모션은 우리의 관심을 끌고 있습니다. 수천 년 동안 우리 조상들에게 도움이 된 타고난 생존 메커니즘입니다. 이를 통해 몰래 다가오는 포식자를 감지 할 수있었습니다. 오늘날 우리 웹 디자이너가 우리 사이트에서 사용자의 관심과 관심을 끌기 위해 사용하는 것은 대부분 남은 본능입니다.

불투명 페이드, 색상 변경, 스케일링 및 3D 모션과 같은 애니메이션 및 전환을 추가하면 단어와 이미지의 평평하고 정적 인 콜라주가 역동적이고 흥미로운 사이트로 바뀝니다. 웹 사이트 디자인에 애니메이션을 추가해야합니다. 가끔씩 용도에 맞게 적용하면 애니메이션이 더 좋아집니다.

하지만 정확히 어떻게 할 수 있습니까? CSS와 JavaScript를 사용하여 사이트에 애니메이션을 추가하는 방법에는 두 가지가 있습니다.



CSS는 많은 사용자 지정 코딩이 필요하지 않은 소규모 사이트와 요소의 호버 상태에 대한 작은 스타일 변경과 같은 간단한 사용자 상호 작용에 적합합니다. (또는 단순히 프로그래밍을하고 싶지 않다면!)

포토샵에서 조각을 만드는 방법

이러한 단순한 상호 작용을 넘어선 어떤 것이 든 사이트에 애니메이션을 추가하는 가장 좋은 방법은 JavaScript를 사용하는 것이며이를위한 가장 최신 애니메이션 라이브러리는 Velocity.js .

이 기사는 웹 애니메이션 학습에 대한 기초적인 접근 방식을 취할 것이라는 점에서 독특합니다. 자바 스크립트를 많이 사용하지는 않았지만 항상 고급 애니메이션의 힘을 원했던 웹 디자이너라면 계속 읽으십시오.

Velocity.js는 무엇입니까?

Velocity.js 데모를 보려면 이미지를 클릭하십시오.

Velocity.js 데모를 보려면 이미지를 클릭하십시오.

Velocity는 가장 간단한 애니메이션부터 가장 복잡한 애니메이션에 이르기까지 사이트에 애니메이션을 쉽게 추가 할 수있는 무료 경량 라이브러리입니다. Velocity는 다른 모든 애니메이션 라이브러리보다 성능이 뛰어나고 사용이 간편하며 가장 널리 사용되는 JavaScript 라이브러리 인 jQuery의 구문을 모방합니다. 또한 모든 브라우저와 장치에서 잘 지원되며 Uber 및 Whatsapp .

Velocity는 jQuery와 함께 사용하는 것이 가장 좋지만 반드시 그럴 필요는 없습니다. jQuery 란 무엇입니까? jQuery는 HTML 요소 선택 및 조작을 단순화하도록 설계된 JavaScript 라이브러리입니다. 거의 대부분의 웹 프로젝트에서 jQuery가 사용된다고 가정하고 있습니다.

jQuery에는 'animate'기능을 통해 노출되는 자체 애니메이션 도구가 있지만, 모 놀리 식 jQuery가 얼마나 고르지 않은 애니메이션을 생성합니다. 또한 Velocity만큼 풍부한 기능도 아닙니다. Velocity를 사용하면 jQuery의 요소 선택 기능을 활용하고 jQuery의 애니메이션 단점을 건너 뛸 수 있습니다. 특히 쉬운 애니메이션 워크 플로우를 설정하는 데있어 차이점은 밤낮입니다.

Velocity는 CSS 및 jQuery 기반 애니메이션에 비해 몇 가지 큰 이점을 제공합니다.이 애니메이션을 사용하는 기본 사항을 살펴본 후에 다룰 것입니다. 앞으로 나올 기능을 미리 볼 수 있도록 이러한 이점에는 스크롤링 애니메이션, 애니메이션 반전, 물리 기반 모션 및 애니메이션 체인이 포함됩니다. 꽤 멋진 것들.

지금은 사용 방법을 시작하겠습니다.

Velocity는 어떻게 사용합니까?

첫 번째 단계는 다음에서 코드를 다운로드하는 것입니다. Velocity 웹 사이트 (코드를 텍스트 편집기에 복사하여 붙여넣고 'velocity.min.js'로 저장합니다). 또는 아래 코드 예제와 같이 HTML로 직접 가져올 수 있습니다.

어느 쪽이든, 다음을 사용하여 Velocity 파일을 포함합니다. 문서의 닫는 본문 태그 앞과 코딩 할 JavaScript 파일 ( 'script.js') 앞의 태그 :

… …

노트 : jQuery를 사용하는 경우 Velocity 앞에 jQuery를 포함해야합니다. Velocity는 jQuery가있는 경우 자체적으로 조정됩니다.

코드가 스크립트 태그에 포함되면 속도() 'script.js'파일 전체에서 작동합니다.

이 기능을 어떻게 실행합니까?

jQuery 요소에서 Velocity 함수를 사용합니다 (jQuery를 사용한다고 가정). 예를 들어 애니메이션을 적용하려는 다음 단락이 있다고 가정합니다.

This is an example element you can select and animate.

단락의 ID ( 'example')로 jQuery를 사용하여 선택하고 변수에 저장할 수 있습니다.

var $element = $('#example');

그러면이 단락을 나타내는 $ element라는 jQuery 요소 객체가 생성됩니다. 이제 $ element 변수를 사용하여이 요소에서 속도 함수 호출을 실행할 수 있습니다.

$element.velocity( … some command here … );

좋아요, 그래서 그것이 받아들이는 주장은 무엇입니까?

인수

Velocity는 하나 이상의 인수를 허용합니다. 첫 번째 인수는 필수입니다. 다음 중 하나의 이름 일 수 있습니다. 미리 정의 된 명령 (다음 예제) 또는 애니메이션화해야하는 다른 CSS 속성의 개체입니다.

// Object defining the animation's final values of width (50%), and left (500px) $element.velocity({ width: '500px', left: '500px' });

참고 : 데이터 개체의 속성 순서는 관련이 없습니다. 애니메이션의 모든 것이 동시에 발생합니다.

선택 사항 인 두 번째 인수도 객체입니다. 기간, 여유, 지연 및 완료 (애니메이션이 완료된 후 실행되는 함수)와 같은 애니메이션 옵션이 포함되어 있습니다.

// Animates an element to a width of 300px over 500ms after a 1000ms delay. $element.velocity({ width: '300px' }, { duration 500, delay: 1000 });

여백 ()과 같은 CSS 속성에 여러 숫자 값을 전달할 수있는 CSS와 달리 여백 : '10px 5px 8px 12px' ), Velocity에서는 CSS 속성 당 단일 값을 사용해야합니다. 따라서 각 구성 요소를 별도로 설정해야합니다. {marginRight : '10px', marginTop : '5px'…} .

이것은 핸디캡처럼 보일 수 있지만 실제로는 이점입니다. 이는 더 읽기 쉽고 명시적일뿐만 아니라 모든 하위 속성에 대해 하나의 여유 유형을 가지지 않고 각 하위 속성에 대해 개별 여유 유형을 설정할 수 있도록합니다. 이를 통해 더 많은 애니메이션을 직접 제어 할 수 있습니다!

참고 : 여러 단어를 포함하는 CSS 속성 ( 여백-왼쪽배경색 )는 하이픈으로 연결할 수 없지만 카멜 케이스 ( marginLeft배경색 ).

당신은 어떤 유형의 디자이너입니까?

속성 값

단위 유형을 제공하지 않으면 Velocity는 사용자를 대신하여 하나를 가정합니다 (일반적으로 ms, px 및 deg). 그럼에도 불구하고 본인이나 동료가 코드를 살펴볼 때마다 단위 유형을 한 눈에 식별 할 수 있도록 명시 적으로 작성하는 것이 좋습니다. 값에 숫자 값 (% 또는 문자) 이외의 것이 포함되어 있으면 따옴표를 사용해야합니다.

// Okay, only numerical value $element.velocity('scroll', { duration: 500 }) // Okay, uses quotes $element.velocity('scroll', { duration: '500ms' }) // Not okay, contains 'ms' without quotes $element.velocity('scroll', { duration: 500ms })

이 '완화'사업은 무엇입니까?

지금까지 easing이라는 단어를 몇 번 사용했는데 그 의미로 혼란 스러울 것입니다. 이징은 지속 시간 동안 여러 단계에서 애니메이션의 속도를 결정합니다. 예를 들어, '이지 인'이징은 애니메이션 시작 부분에서 점차적으로 가속 된 다음 끝날 때까지 일정하게 유지됩니다. '이즈 아웃'이징은 선형 속도로 시작하여 애니메이션이 끝날 무렵 점차 감속됩니다. '선형'이징은 지속 시간 동안 일정한 속도를 가지며 매우 부끄럽고 로봇처럼 보입니다.

편리하게는 'easing'옵션을 사용하여 여유를 지정합니다.

// Animate an element to a width of 500px with an easing of 'ease-in-out' $element.velocity({ width: 500 }, { easing: 'ease-in-out' });

Easings는 훨씬 더 복잡해 지지만 간결함을 위해 여기서 중지하겠습니다. Velocity의 읽기 선적 서류 비치 자세한 내용은.

체인

CSS에서 일련의 순차 애니메이션을 만들려면 각 개별 애니메이션에 대한 타이밍 지연 및 지속 시간을 수동으로 계산해야합니다. 그리고 이러한 단계 중 하나를 변경해야하는 경우이 단계를 진행하는 모든 애니메이션도 다시 계산하고 변경해야합니다.

Velocity를 사용하면 velocity 함수를 차례로 호출하는 것만으로 애니메이션을 차례로 간단하게 연결할 수 있습니다.

$element // Animates the element to a height of 300px over 1000ms .velocity({ height: 300 }, { duration: 1000 }) // Animates the element to a left position of 200px over 600ms after the width is finished animating .velocity({ top: 200 }, { duration: 600 }) // Fades the element over 200ms out after it is done moving .velocity({ opacity: 0 }, { duration: 200 });

다음은 연결의 Codepen 예제입니다.

참고 : 마지막 속도 호출에만 ';'가 있음을 알 수 있습니다. 줄 끝에. 이것은 매우 중요합니다. 애니메이션을 함께 연결하려면 모든 '속도'호출이 동일한 요소에서 함께 수행되어야하며 세미콜론을 사용하여 명령 줄을 종료 할 수 없습니다. JavaScript는 공백을 무시하므로 이러한 호출은 다음과 같습니다. $ element.velocity (...). velocity (...). velocity (...) .

기능으로 돌아 가기

Velocity와 사용 방법을 엿볼 수 있습니다. 당황하지 않을 것이므로 CSS 및 jQuery에 비해 제공되는 멋진 이점에 대해 설명하겠습니다.

페이지 스크롤

단일 페이지 사이트는 이제 사이트가 별도의 페이지가 아닌 섹션으로 나뉘는 웹 디자인에서 유행하고 있습니다. 결과적으로 탐색 링크를 클릭하면 페이지가 해당 페이지 섹션으로 스크롤됩니다. 애니메이션이 없으면 즉각적이고 삐걱 거리는 점프로 사용자에게 페이지의 나머지 부분과 관련하여이 콘텐츠의 위치에 대한 컨텍스트를 제공하지 않습니다.

CSS는 스크롤링을 수행 할 수 없으므로 JS 애니메이션에서 가장 많이 사용되는 용도 중 하나입니다.

Velocity로 스크롤을 수행하려면 스크롤하려는 요소에서 'scroll'명령을 사용하여 'velocity'기능을 실행하면됩니다.

$element.velocity('scroll', { duration: 1200 });

이 호출로 인해 브라우저가 1200ms 동안 선택한 요소의 위쪽 가장자리로 스크롤됩니다. jQuery만으로는 훨씬 더 복잡한 여러 줄 함수가 될 것입니다. 여기에 포함하지 않음으로써 혼란으로 인한 두통을 피할 수 있습니다.

다음은 스크롤링의 Codepen 예제입니다.

애니메이션 반전

jQuery에서 애니메이션이 시작되기 전 요소의 원래 상태로 되돌리려면 속성을 원래 값으로 수동으로 애니메이션해야합니다. 예를 들면 :

jQuery 사용 :

// Animate a 100px tall element to a height of 200px over 500ms $element.animate({ height: '200px' }, { duration: 500 }); // Animate the element back to its original height value of 100px over 500ms $element.animate({ height: '100px' }, { duration: 500 });

그러나 Velocity에서는 reverse 명령을 실행하기 만하면됩니다.

// Animate a 100px tall element to a height of 200px over 500ms $element.velocity({ height: '200px' }, { duration: 500 }); // Reverse previous animation – animate back to the original height of 100px over 500ms $element.velocity('reverse');

이 이전 호출은 애니메이션을 애니메이션 이전에 선택한 요소의 원래 상태로 되돌립니다. 값을 수동으로 지정할 필요가 없습니다.

다음은 애니메이션 반전의 Codepen 예제입니다.

물리학 기반 모션

현실 세계는 완벽하지도, 매끄럽지도 않습니다. 현실 세계도 마찬가지입니다. 빠른 부품, 느린 부품, 무게, 운동량 및 마찰이 있습니다. CSS와 달리 JS 기반 애니메이션에서 실제 물리학을 모방하여 상황을 더 자연스럽게 만들 수 있습니다. 직선 운동은 로봇처럼 보이며 (생생하지 못함) 흔들립니다.

사실적인 모션을 허용하기 위해 Velocity는 스프링 물리에 기반한 여유를 허용합니다. 이 여유 유형은 매개 변수로 장력 값 (기본값 : 500)과 마찰 값 (기본값 : 20)의 배열을 사용합니다 (참조 : Velocity 문서 자세한 내용은).

// Animate the selected element to a height of 200px over the default 400ms using a spring physics easing. Spring tension is set to 250, and friction is set to 10. $element.velocity({ height: '200px', { easing: [ 250, 10 ] });

높은 장력 값은 애니메이션의 총 속도와 탄력을 증가시킵니다. 마찰 값이 높으면 애니메이션이 더 빨리 감속되어 애니메이션 끝 부분에서 속도가 감소합니다. 이러한 값을 조정하면 각 애니메이션이 독특하고 사실적이며 흥미로워집니다.

위의 예제 애니메이션은 느리고 뻣뻣하며 (낮은 장력) 지속 시간 동안 천천히 감속합니다 (낮은 마찰).

다음은 스프링 물리학을 사용하는 Codepen 예제입니다.

큰 피날레

좋습니다. 실제 애니메이션과 Velocity 명령의 몇 가지 예가 필요할 수 있습니다. 체인과 애니메이션 반전을 결합하여 상자의 너비와 높이에 애니메이션을 적용하고 다음과 같은 상자 요소를 사용해 보겠습니다.

다음 CSS 스타일을 사용합니다.

#box { width: 100px; // Set box width to 100px height: 100px; // Set box height to 100px border: solid 1px #000; // Give the box a 1px solid black border to make it visible }

너비와 높이를 애니메이션 한 다음 다음 속도 호출을 사용하여 원래 크기로 되돌릴 수 있습니다.

// Select the box element by ID $('#box') // Animate to a width of 200px over 500ms .velocity({ width: 200px }, { duration: 500 }) // Animate to a height of 50px over 300ms directly after width stops animating .velocity({ height: 50px }, { duration: 300 }) // Animate back to original width and height after height stops animating .velocity('reverse');

이제 가장 유용하면서도 추가하기 쉬운 기능 중 하나를 추가해 보겠습니다. 적절한 페이지 섹션으로 스크롤되는 탐색 링크를 만듭니다.

다음과 같은 탐색 모음 및 페이지 섹션이 있다고 가정합니다.

Product ... About … ... ...

모든 탐색 링크 ( 'nav-link'클래스)의 클릭 이벤트에 스크롤 애니메이션을 추가하여 해당 ID가 링크의 href에 포함 된 적절한 페이지 섹션으로 페이지를 스크롤합니다.

사이버 월요일 2019 외장 하드 드라이브
// Attach a click event to the 'nav-link' class $('.nav-link').on('click', function() { // Grab the target page section's ID from the link's (contained within 'this') href attribute var scrollTargetID = $(this).attr('href'); // Select this element by ID using jQuery var $scrollTarget = $(scrollTargetID); // Add the scroll animation to the element $scrollTarget.velocity('scroll', { duration: 1000 }); });

실제 페이지 요소에서 속도를 사용하는 방법에 대한 몇 가지 예가 있습니다. 더 많은 예를 보려면 Velocity의 문서 .

이제 나가서 웹을 동적으로 만드십시오.

애니메이션은 우리의 관심을 끌고 정적 인 페이지에 활기를 불어 넣습니다. JavaScript는이를 프로젝트에 추가하는 가장 좋은 방법입니다. 그리고 Velocity는 최고의 JavaScript 애니메이션 라이브러리입니다. 이것이 제가이 기사를 쓴 이유입니다.

CSS 애니메이션의 개선 및 확장은 CSS 표준의 간헐적 인 업데이트로 인해 제한됩니다. 오픈 소스 커뮤니티는 JavaScript를 사용하여 매일 수십 개의 새로운 라이브러리, 플러그인 및 업데이트를 생성하여 새로운 도구의 발명을 통해 애니메이션의 지평을 넓 힙니다.

Velocity는 여기에 설명 된 것보다 더 많은 기능을 가지고 있습니다. 선적 서류 비치 . 이제 실험 해보세요!

: 닐 오그 레이디

Neal O'Grady는 아일랜드-캐나다 프리랜서 웹 개발자, 디자이너 및 작가입니다. 그는 디자인 주제에 대해 글을 썼습니다. Webflow 블로그 , 그리고 그의 임의의 생각에 개인 블로그 .

이렇게? 읽어보세요!