jQuery 애니메이션을 쉽게 향상시킵니다

코어 포인트

jQuery의 CSS 애니메이션은 주로 GPU 가속도 덕분에 jQuery의 애니메이션보다 일반적으로 더 빠르고 효율적입니다. 그러나 이전 버전의 Internet Explorer와의 호환성 문제와 애니메이션 지속 시간을 결정하기위한 시간보다는 종속성 비율을 포함하여 튜닝을 복잡하게 할 수있는 몇 가지 제한 사항도 있습니다.

를 로 대체함으로써 개발자는 더 높은 프레임 속도를 얻고 jQuery의 체인 호출 특성을 유지할 수 있습니다.
• animate() 우리는 모두 jQuery의 기능을 사용하여 웹 페이지에 우수한 영향을 미쳤습니다. 그런 다음 CSS3의 소개와 상승으로 코드가 끔찍하다고 들었습니다. 그들은 우리가 모든 jQuery 기반 애니메이션 (일반적으로 JavaScript 기반 애니메이션)을 포기하고 대신 CSS 기반 애니메이션을 사용하는 것을 제안합니다. 이 변화는 우리가 많은 브라우저 (IN) 호환성 문제와 기능 부족을 처리해야합니다. CSS 애니메이션이 JavaScript 애니메이션보다 빠르기 때문에이 고통은 합리적입니다. 적어도 그게 그들이 우리에게 말한 것입니다. 이것이 사실입니까? jQuery의 기능이 실제로 그렇게 느립니다. 코드를 변경하지 않고 쉽게 향상시키는 방법이 있습니까? 대답은 예입니다. 이 기사에서는 애니메이션을 만드는 두 가지 방법의 일부 제한 사항을 이해 한 다음 jQuery 코드로 더 나은 성능을 얻는 방법을 이해할 것입니다.
jQuery의 문제는 무엇입니까?
• 우리 모두는 jquery를 알고 사랑합니다 (어떤 사람들은 실제로 그것을 좋아하지 않습니다). HTML 클라이언트 스크립트를 단순화하도록 설계된이 라이브러리는 전 세계 수십만 명의 개발자 (실제 데이터가 아님)를 도왔습니다. HTML 문서는 트래버스 및 조작, 이벤트 처리, Ajax 및 더 많은 산들 바람을 만들어 모든 브라우저에서 비 호환성 및 오류를 처리하는 부담을 완화시킵니다. 그 기능 중 JQuery는 애니메이션과 효과를 만들어 낼 수 있습니다. 그것으로, 우리는 CSS 속성을 애니메이션하고, 요소를 숨기고, 요소를 희미 해지고 다른 유사한 효과를 만들 수 있습니다. 그러나 JQuery의 디자인 목표는 고성능 애니메이션 엔진이 아니 었으며 진정으로 복잡한 CPU/GPU 소비 애니메이션을 지원하려는 의도는 없었습니다. 이 사실의 증거로서, JQuery의 메모리 소비는 종종 쓰레기 수집을 유발하여 애니메이션을 실행할 때 문제를 일으 킵니다. 또한 jQuery는

  (setInterval()에 대한 자세한 내용) 대신 requestAnimationFrame()를 사용하여 애니메이션을 실행하여 높은 프레임 속도를 생성하는 데 도움이되지 않습니다. 이러한 요소로 인해“최고를 알고있는 사람”은 CSS를 사용하여 애니메이션과 효과를 만듭니다. requestAnimationFrame() CSS 애니메이션 및 전환

  명확하게하자 : CSS 애니메이션은 jQuery 애니메이션보다 낫습니다. 애니메이션과 관련하여 jQuery는 CS보다 여러 배나 느릴 수 있습니다. CSS 애니메이션 및 전환은 GPU 하드웨어에 의해 가속화 될 때의 이점을 가지고 있으며, 이는 픽셀을 움직일 때 우수합니다. 이 요소는 특히 모바일 장치와 같은 성능이 중요한 상황에서 큰 개선으로 보입니다. 이거 대단해? 진실은이 모든 것이 한계와 문제가 있다는 것입니다. 첫 번째 한계는 GPU를 통해 모든 CSS 속성을 개선 할 수있는 것은 아닙니다. 따라서 CSS 애니메이션을 사용하면 항상 이길 것이라고 생각하는 것은 잘못입니다. 또 다른 문제는 CSS 애니메이션이 휴대 가능하지 않으며 적어도 타겟팅 할 수있는 모든 브라우저에서는 그렇지 않다는 것입니다. 예를 들어, 인터넷 익스플로러 9 이하에서는 전환이 작동하지 않습니다. 더 나쁜 것은 CSS의 애니메이션은 현재 시간이 아닌 비율 (초 또는 밀리 초)을 기준으로합니다. 즉, Sass 이하의 전처리기를 사용하지 않는 한 애니메이션을 완료 한 후 애니메이션 지속 시간을 변경하면 매우 고통 스러울 수 있습니다. 마지막으로 CSS 애니메이션은 많은 공급 업체 접두사를 입력해야합니다. 그렇습니다. 우리는이를 처리 할 수있는 도구를 위임 할 수 있지만 걱정할 또 다른 것입니다.

  이전 고려 사항 외에도 jQuery 애니메이션을 무시해서는 안되는 다른 이유가 있습니다. 그들은 기술 자체의 약점보다 기술 부족과 더 관련이 있지만 여전히 언급 할 가치가 있습니다. 개발자가 jQuery로 애니메이션을 만드는 데 사용되는 경우 개발자가 CSS를 사용하여 동일한 작업을 수행 할 수없는 확률이 높습니다. 어쩌면 개발자가 CSS에서 동일한 효과를 만들어내는 데 시간이 오래 걸리므로 노력이 혜택을받을 가치가 없습니다. 또는 개발자는 고도로 사용자 정의 할 수있는 애니메이션을 만들기 위해 다른 기술을 배우고 싶지 않을 수도 있습니다. 부끄러워 할 것이 없습니다. 모든 사람은 특정 필드에서 자신의 한계가 있습니다. 여기서 요점은 jQuery로 만든 애니메이션이 더 나은 성능을 갖기를 원하므로 CSS 애니메이션으로 변환 할 필요가 없습니다. 다행히도 해결책이 있습니다.

  jQuery 의 함수를 향상시킵니다 jQuery 애니메이션 문제 해결에 대한 답을 Velocity.js라고합니다. velocity.js는 이전 버전의 IE를 사용하는 jQuery 1.x와 달리 입니다. 속도는 IE8과 호환됩니다. 이것은 대부분의 프로젝트에서 큰 문제가되어서는 안됩니다. 이 시점에서 velocity.js를 사용하는 것이 코드 기반에 어떤 영향을 미치는지 궁금 할 것입니다. 대답은 "매우 우스운 방식으로"입니다. Velocity.js를 통합하려면 다운로드하고 사용하려는 웹 페이지에 포함시키는 것입니다. 마지막 단계는 매개 변수를 변경하지 않고

  로 나타나는

  , 로 나타나는 것입니다! 이 변경은 텍스트 편집기 또는 우리가 선택한 ID에서 검색 및 교체를 수행하는 것만 큼 간단합니다. 완료되면 애니메이션 공연이 즉시 향상됩니다. 코드 기반에 너무 많은 영향을 미치지 않고 지식을 재사용 할 수 있기 때문에 이것은 훌륭합니다. 또한 체인 호출을 유지하는 jQuery 플러그인이므로 jQuery의 일반적인 "메소드 통화 체인"을 계속 만들 수 있습니다. animate() 결론

  이 기사에서는 jQuery 애니메이션에 영향을 미치는 몇 가지 문제를 설명합니다. 우리는 지난 몇 년 동안 jQuery를 대체하기 위해 CSS 애니메이션이 크게 홍보 된 이유에 대해 논의합니다. 그런 다음 CSS의 몇 가지 한계와 성능의 단점을 강조했습니다. 마지막으로, 소스 코드를 변경하지 않고 JavaScript 애니메이션 및 효과의 성능을 향상시킬 수있는 jQuery 플러그인 인 Velocity.js를 간단히 소개합니다. 이 기사는 JQuery, CSS 및 JavaScript 애니메이션의 비교에 대한 소개 일뿐입니다. 이 주제를 파헤치려면 GSAP 저자 및 Velocity.js 저자가 작성한 다음 기사를 읽는 것이 좋습니다 .- 신화를 논의 : CSS 애니메이션 vs. JavaScript- CSS vs. JS 애니메이션 : 어느 것이 빠릅니까?

  jQuery 애니메이션 개선에 대한 FAQ jQuery 애니메이션 속도를 늦추는 방법?

  애니메이션 지속 시간을 늘려서 jQuery 애니메이션을 늦출 수 있습니다. 지속 시간은

  방법의 밀리 초로 지정됩니다. 예를 들어, 애니메이션을 5 초 동안 지속하도록 속도를 늦추려면

  를 작성해야합니다. 숫자가 클수록 애니메이션이 느려집니다. .animate() jQuery 애니메이션에서 완화의 역할은 무엇입니까? $(selector).animate({params}, 5000); jQuery 애니메이션의 완화는 기간 동안 다른 지점에서 애니메이션 진행 속도를 나타냅니다. JQuery는 "스윙"과 "선형"의 두 가지 내장 완화 방법을 제공합니다. "스윙"은 기본 완화 방법으로 애니메이션 진행이 시작과 끝에서 속도가 느리고 중간에서 더 빠릅니다. 반면에 "선형"은 프로세스 전반에 걸쳐 애니메이션이 일정하도록합니다.

  jQuery 애니메이션의 성능을 향상시키는 방법은 무엇입니까?

  jQuery 애니메이션의 성능을 향상시키는 방법에는 여러 가지가 있습니다. 한 가지 방법은 일반적으로 jQuery 애니메이션보다 성능이 우수하므로 가능한 경우 CSS 전환을 사용하는 것입니다. 또 다른 방법은 동시에 실행되는 애니메이션 수를 제한하는 것입니다. 브라우저에서 더 부드러운 애니메이션을위한 애니메이션을 최적화 할 수있는 메소드를 사용할 수도 있습니다.

  jQuery 애니메이션 실행을 중지하는 방법은 무엇입니까?

  당신은

  메소드를 사용하여 jQuery 애니메이션 실행을 중지 할 수 있습니다. 이 메소드는 선택한 요소에서 현재 실행중인 애니메이션을 중지합니다. 예를 들어,

  는 선택한 요소의 애니메이션을 중지합니다.

  jQuery에서 여러 애니메이션을 연결하는 방법은 무엇입니까?

  동일한 요소에서 여러 애니메이션 메소드를 호출하여 여러 jQuery 애니메이션을 연결할 수 있습니다. 예를 들어, requestAnimationFrame는 먼저 선택한 요소로 사라지고 위쪽으로 밀어냅니다. JQuery는 애니메이션이 통화 순서대로 실행되도록합니다.

  jQuery에서 동시에 여러 속성을 애니메이션하는 방법은 무엇입니까?

  당신은

  방법에 애니메이션을 포함하려는 속성을 포함하는 객체를 전달하여 jQuery에서 여러 속성을 한 번에 애니메이션 할 수 있습니다. 예를 들어,

  는 선택한 요소의 높이와 너비를 동시에 애니메이션합니다. .stop() jQuery 애니메이션에서 콜백 함수를 사용하는 방법은 무엇입니까? $(selector).stop(); jQuery 애니메이션의 콜백 함수는 애니메이션이 완료된 후 실행 된 기능입니다. 콜백 함수를

  메소드로 두 번째 매개 변수로 전달할 수 있습니다. 예를 들어,

  .

  jQuery에서 사용자 정의 애니메이션을 만드는 방법은 무엇입니까?

  $(selector).fadeIn().slideUp(); 메소드를 사용하여 jQuery에서 사용자 정의 애니메이션을 만들 수 있습니다. 이 방법을 사용하면 CSS 속성을 애니메이션 할 수 있습니다. 예를 들어,

  는 선택한 요소를 오른쪽으로 50 픽셀로 이동합니다.

  jQuery 애니메이션에서 대기열 및 퀴즈 메소드를 사용하는 방법은 무엇입니까?

  jQuery의 대기열 및 큐 메소드는 애니메이션의 실행을 제어하는 ​​데 사용됩니다. 큐 메소드를 사용하면 선택한 요소에서 실행될 애니메이션 큐에 새 애니메이션을 추가 할 수 있습니다. Dequeue 메소드를 사용하면 큐에서 다음 함수를 삭제하고 실행할 수 있습니다.

  jQuery 애니메이션에서

  메소드를 사용하는 방법은 무엇입니까?

  jQuery의

  메소드는 대기열에서 후속 프로젝트의 실행을 지연시키는 데 사용됩니다. 일반적으로 지연된 애니메이션에 사용됩니다. 예를 들어, .delay()는 Fadein 애니메이션을 500 밀리 초 씩 지연시킵니다.

위 내용은 jQuery 애니메이션을 쉽게 향상시킵니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!