Velocity.js로 웹 사이트를 대화식하고 재미있게 만드십시오 (jQuery 없음)

이 기사는 Julian Shapiro의 고성능 JavaScript 애니메이션 라이브러리 인 Velocity.js를 소개하여 jQuery에 의존하지 않고 그 기능을 보여줍니다. 이것은 CSS를 넘어 동적 DOM 애니메이션 라이브러리를 탐색하는 시리즈의 세 번째입니다. 이전 기사는 Anime.js 및 Kute.js.

특별한 감사의 말을 전합니다. 제임스 히바드 (James Hibbard)와 속도 개발자들과 함께 커뮤니티 기고자들과 함께 그들의 지원에 감사드립니다. velocity.js의 주요 특징 : 와 유사한 유연한 API는 루핑, 지연, 완화 옵션 (스프링 물리학 포함) 및 지속 시간 제어와 같은 기능을 제공합니다. ForceFeeding은 애니메이션 시작 및 최종 값의 정확한 정의를 허용합니다. 또한 애니메이션 시퀀스 (중지, 일시 중지, 반전, 재개)를 제어합니다. Velocity UI 팩은 사전 구축 된 효과 및 사용자 정의 애니메이션 생성으로 기능을 확장합니다. 애니메이션 요소 :

<..> velocity.js 애니메이션 : 숫자 CSS 속성 (색상 포함) 변환 svg 속성 이벤트 스크롤 (페이지 또는 컨테이너) 페이드 및 슬라이드 애니메이션

참고 : 일반적으로 한 번에 하나의 숫자 속성을 애니메이션합니다. 다축 변환 (예 : 및

)의 경우 별도의 속성을 사용하십시오. ForceFeeding은 예외를 제공하여 동시 값 사양을 허용합니다 옵션 : Velocity의 옵션 객체는 유연성을 제공합니다

(milliseconds) (jQuery UI, CSS3 완화, Bezier 곡선, 스프링 물리학)

(반복 수 또는 무한의 경우 $.animate())

(milliseconds)

전체 옵션 목록에 대한 속도 문서를 참조하십시오. 구문 : velocity.js는 jQuery의 API를 공유하지만 jQuery 사용자가 쉽게 전환 할 수 있도록하기 쉽지만 ( 로 대체) jQuery없이 완벽하게 작동합니다. 기본 구문은 다음과 같습니다

체인 애니메이션 :

여러 요소 애니메이션 :

단위 (

,
• ,
, , )가 뒷받침됩니다. 속도는 생략되면 단위를 지분합니다 (보통 ). 상대적 수학 (,
• ,
, )도 뒷받침됩니다 힘 피는 :
• velocity.js에 의존하는 대신 초기 값을 검색하려면 ForceFeeding을 사용하십시오.

  <code class="language-javascript">Velocity(element, {property: value}, {option: optionValue});</code>

  배열에는 다음 값, 선택적 완화 및 시작 값이 포함됩니다.

  애니메이션 컨트롤 :

  를 사용하여 애니메이션을 제어합니다
  • Velocity(elem, 'stop');
  그런 다음이 기사는 이러한 개념을 보여주는 몇 가지 데모 (낙하 볼, 버튼 제어 튀는 볼, 스크롤 애니메이션, SVG 애니메이션 및 Velocity UI 팩 사용)를 제공합니다. 각 데모 코드는 기사 내 코드 펜 링크를 통해 사용할 수 있습니다. 마지막으로,이 기사는 jQuery가없는 사용을 포함하여 일반적인 속도를 다루는 FAQ 섹션으로 마무리됩니다. 이 기사에는 또한 추가 학습을위한 추가 리소스에 대한 섹션도 포함되어 있습니다.

위 내용은 Velocity.js로 웹 사이트를 대화식하고 재미있게 만드십시오 (jQuery 없음)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!