JS 애니메이션 라이브러리 Velocity.js의 사용에 대해 이야기해 보겠습니다.

이 글은 JS 애니메이션 라이브러리 Velocity.js의 활용을 주로 소개하고 참고용으로 올려드립니다.

머리말

또 더운 7월이 되었는데, 지난달 말에 인턴이 끝나고 회사를 그만뒀기 때문에 오랫동안 기술자료 업데이트를 하지 못했습니다. 그러다가 최근에는 개인 프로젝트도 하고 운전면허 시험도 치뤘고, 다음 회사 지원을 준비하기 위해 여자친구와 작별 인사를 하고 다른 곳으로 갔는데 반달 동안은 여전히 ​​마음이 안정되어 있었습니다. 새로운 기술을 배우고 기술 기사를 쓰려면 계속해서 인내하시기 바랍니다.

JS animation

인터넷이 점점 다양해지면서 웹상의 미화와 신기술이 속속 등장하고 있는 것은 웹사이트 뷰어로서 웹사이트의 부드러움을 보장하는 것 외에도 더욱 눈길을 끄는 점입니다. 모든 종류의 시원함 상호작용 효과.

웹페이지의 인터랙티브 효과는 크게 CSS 애니메이션과 JS 애니메이션으로 나누어집니다.

JS 애니메이션의 장점

이제 두 가지 유형의 애니메이션에 대해 전반적으로 이해했으므로 서로 다른 장점을 분석해 보겠습니다.

1. CSS 애니메이션 CSS3에서는 CSS 속성을 기반으로 애니메이션을 사용자 정의할 수 있으므로 이 유형의 장점 애니메이션 DOM을 계산하고 변경하지 않고도 매우 원활하게 수행됩니다.

2. JS 애니메이션 js 애니메이션은 CSS 애니메이션보다 강력한 성능을 가지고 있기 때문에 CSS의 한계가 없으며 더 많은 기능과 역동적인 효과를 얻을 수 있다고 말할 수도 있습니다. 실제로 js 애니메이션은 본질적으로 빠르지만 jquery는 속도를 느리게 합니다. 가끔 jquery와 함께 사용되기 때문에 jquery 자체의 일부 기능으로 인해 구현시 속도가 매우 느려집니다.

velocity.js 사용 방법

JS 애니메이션 라이브러리에는 각각 jquery의 자체 애니메이션 및 webGL, 캔버스, SVG 등을 사용하여 다른 효과를 얻는 등 고유한 장점이 있습니다. time 우리가 이야기하고 있는 것은 많은 라이브러리 중 하나인 Velocity.js 애니메이션 라이브러리입니다.

velocity.js는 JavaScript 단독으로 또는 jquery와 함께 사용할 수 있습니다. 사용 방법(먼저 Velocity.js를 다운로드하여 body 태그 아래에 도입한 후 새 스크립트 태그에 다음 코드를 작성하세요):

//jquery方法 
var $p = $('p')
$p.velocity({属性:值,属性:值})
//javascript 方法
var op = document.getElementById('p')
op.velocity({属性:值,属性:值})

여기서 주의할 점은 다음과 같습니다.

1. 내부 속성은 따옴표로 쓸 수 없으며, 다음 값이 문자열인 경우에는 따옴표로 묶어야 합니다. 예를 들어 width: 100 및 width: "100px "
2. 여러 속성 값을 한 번에 전달할 수 없습니다. 예를 들어 CSS padding: 5px 5px 6px 5px; 그러나 속도에서는 여러 값을 전달하려는 경우 {paddingLeft: 5, paddingRirght :5 생략됨}
3입니다. 속성 값에 여러 전환이 포함된 경우 두 번째 첫 문자는 위와 같이 대문자로 사용해야 합니다

속도.js 자세한 소개

위에서 언급했듯이 변경해야 하는 값은 객체로 속도에 전달됩니다. 첫 번째 매개변수, 두 번째 매개변수는 다음을 포함하는 지정된 애니메이션 옵션입니다.

+ 지속 시간
+ 완화 완화 모드
+ 지연 실행 지연
+ 루프 루프 수
+ 콜백 함수 시작 및 완료
+ 표시 (값은 CSS와 동일하며 자동으로 설정할 수 있음)

속도의 지정된 애니메이션 옵션에 대해 이야기하기 전에 먼저 속도가 지원하는 값에 대해 이야기합니다: px em rem % vm vh 또는 *=2 연산자를 사용하여 현재 값의 2배를 나타내거나 / =2 및 기타 계산 방법

다음은 애니메이션을 지정하기 위해 하나씩 분석합니다. 옵션:

duration Duration

이것은 애니메이션의 지속 시간을 나타냅니다. 기본값은 밀리초(ms)입니다.

// 表示一秒内将透明度从1到0
$p.velocity({opacity:0},{duration:1000})

다음과 같이 사용할 수도 있습니다.

// 效果相同
$p.velocity({opacity:0},1000)

velocity는 또한 실제 필요에 따라 사용할 수 있는 세 가지 연속 모드인 느림(600ms), 보통(400ms), 빠름(200ms)을 사용자 정의했습니다.

easing Method

이것은 방법을 나타냅니다. 애니메이션이 변형되는 방식:easy-in-out(점진적으로 증가 및 감소), easy-in(먼저 가속한 다음 일정한 속도로), dase-out(먼저 일정한 속도로 누른 다음 감속)

또한 가능합니다. "easeInOutSine", CSS 베지어 곡선 [0.17, 0.67, 0.83, 0.67] 또는 스프링 물리학 [장력, 마찰] 및 기타 값을 완화하는 삼각 함수를 기반으로 구현됩니다. ​​

delay 지연 실행

은 이 지연을 나타냅니다. animation 기본 단위를 실행하는 데 걸리는 시간(ms)

// 五秒后执行此动画
delay：5000

loop number of loops

은 이 애니메이션에 필요한 루프 수를 나타냅니다.

// 循环五次
loop:5
// 无限循环
loop:true

시작 및 완료 콜백 함수

애니메이션 시작 전과 애니메이션 종료 후에 실행되는 함수를 나타냅니다.

begin:function(){ somgthing... },complete:function(){ somgthing... }

기타 함수:

velocity에는 다음과 같은 다른 함수가 있습니다. 이에 대해서는 나중에 설명하겠습니다. ), 스크롤링( 스크롤링 ), 색상(색상), 변환(변환에는 크기 확대/축소 회전 회전 번역 번역 등이 포함됩니다.)

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

JS는 링크에서 QR 코드를 생성하고 이를 그림으로 변환하는 방법을 구현합니다

vue1 및 vue2를 기반으로 DOM 요소를 가져오는 방법

nodejs+mongodb 집계 계단식 쿼리 작업 예제

위 내용은 JS 애니메이션 라이브러리 Velocity.js의 사용에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!