Velocity (JavaScript 라이브러리)

Velocity (JavaScript library)
속도
원저작자줄리안 샤피로
안정된 릴리스
1.5[1].2 / 2018년[2] 7월 31일
저장소
기입처자바스크립트
운영 체제크로스 플랫폼
플랫폼브라우저 지원 참조
유형JavaScript 라이브러리, 애니메이션
면허증.MIT[3]
웹 사이트velocityjs.org

Velocity는 웹 사이트 [4]애니메이션의 클라이언트 측 스크립팅을 단순화하도록 설계된 크로스 플랫폼 JavaScript 라이브러리입니다.Velocity는 MIT [3]라이센스에 따라 라이센스가 부여된 무료 오픈 소스 소프트웨어입니다.가장 인기 있는 오픈 소스 웹 애니메이션 [5]엔진입니다.

Velocity의 구문은 HTML [6]및 SVG 요소를 위한 복잡한 애니메이션을 쉽게 만들 수 있도록 설계되었습니다.Velocity는 워크플로우의 이점 외에도 CSS 기반 [7]애니메이션과 경쟁할 수 있는 애니메이션 성능을 제공합니다.Velocity는 애니메이션 상태의 내부 캐시를 유지하고 빠른 [7]속도로 시각적으로 업데이트할 때 웹 브라우저가 겪게 되는 바람직하지 않은 동작인 "레이아웃 스래싱"을 최소화함으로써 성능을 달성합니다.Velocity는 워크플로우와 성능상의 이점을 통해 웹 [8]및 모바일 애플리케이션 모두에 통합할 수 있는 정교한 애니메이션 프로그래밍에 사용할 수 있습니다.폭넓은 브라우저와 디바이스 지원을 통해 저전력 디바이스를 [9]지원해야 하는 대규모 엔터프라이즈 디스트리뷰션에 이상적입니다.

Velocity는 Uber, Samsung, WhatsApp, Tumblr, HTC, Mazda 및 Microsoft Windows를 [10]포함한 많은 유명한 웹사이트의 사용자 인터페이스에 전원을 공급하기 위해 사용됩니다.코드 호스팅 서비스인 GitHub에서 [11]가장 선호되는 프로젝트 중 하나입니다.2015년, Velocity는 The Net [12]Awards가 선정한 올해의 오픈 소스 프로젝트 후보에 올랐습니다.

특징들

Velocity의 특징은 다음과 같습니다.[4]

  • 브라우저 창 및 요소 스크롤
  • jQuery[13] 프레임워크로부터의 독립성
  • 애니메이션 반전(이전 애니메이션 실행 취소 기능) 및 애니메이션 루프
  • SVG 요소[14] 애니메이션
  • RGB 및 16진수 컬러 애니메이션
  • CSS의 트랜스폼 속성 애니메이션
  • Velocity의 UI[15] 팩을 통해 미리 만든 애니메이션 효과
  • 스프링 완화 타입을 통한 물리 기반 운동
  • 통합 약속

브라우저 지원

Velocity는 모든 주요 데스크톱 브라우저(Firefox, Google Chrome 및 Safari)와 iOS 및 Android 모바일 운영 체제를 지원합니다.그 지원은 Internet Explorer 8과 Android 2.[16]3까지 거슬러 올라간다.

사용.

라이브러리 포함

Velocity 라이브러리는 모든 핵심 기능을 포함하는 단일 JavaScript 파일입니다.로컬 복사본 또는 MaxCDN의 jsDelivr 또는 Cloudflare의 cdnjs를 포함하여 공용 서버에서 사용할 수 있는 많은 복사본 중 하나에 링크하여 웹 페이지에 포함할 수 있습니다. 

< >대본 src="194.min.displays"</>대본>

콘텐츠 전송 네트워크에서 직접 Velocity를 포함할 수도 있습니다.(integrity 속성은 Subresource Integrity에 사용됩니다.)리소스에는 항상 HTTPS를 사용하는 것이 좋습니다만, 이것은 다음과 같이 대체할 수 있습니다.//프로토콜 상대 URL을 사용합니다.

< >대본 src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js" 완전성="sha384-fcLDUAwcSMMfmpKMJ0dO2//SL2WJ5/kyz/yvgtmLXBEP3GdQRQF9ahRerHDLXn+" 크로스 오리진="실패"</>대본>

사용 스타일

Velocity에는 두 가지 사용 스타일이 있습니다.

  • 그$.Velocityfunction - jQuery 루트 개체에서 확장된 공장 메서드입니다.이 메서드는 jQuery로 래핑된 요소 대신 원시 DOM 요소를 애니메이션화합니다.페이지에 jQuery가 없는 Velocity를 사용할 때 사용하는 스타일입니다.
  • 그$element.velocity()기능.페이지에 jQuery가 있을 때 jQuery 요소 개체를 애니메이션화하는 데 사용되는 스타일입니다.

Velocity에서 애니메이션 호출은 애니메이션화할 원하는 요소, 애니메이션화할 CSS 속성을 지정하는 애니메이션 속성 맵 및 애니메이션 설정(예: 기간)을 지정하는 옵션 개체로 구성됩니다.

논쟁들

Velocity는 하나 이상의 인수를 받아들입니다.첫 번째 인수는 사전 정의된 Velocity 명령어 이름(스크롤 또는 리버스 등) 또는 애니메이션화하는 CSS 속성으로 구성된 객체 중 하나입니다.

// 요소의 폭을 100px로, 왼쪽 속성을 200px로 애니메이션합니다. $140.속도({ 폭: "100px", 왼쪽: "200px" });

두 번째 인수(옵션)는 객체입니다.지속 시간, 완화, 완료(애니메이션이 완료되면 실행할 임의 기능)와 같은 애니메이션 옵션을 지정하는 데 사용됩니다. 

// 100초 지연을 일시 중지한 후 1000ms 동안 요소의 폭을 100px로 애니메이션화합니다. $140.속도({ 폭: "100px" }, { 지속: 1000, 지연시키다: 100 });

체인

Velocity에서 연속적인 애니메이션 콜을 작성하려면 타깃 jQuery 요소 객체에 연속적으로 velocity() 콜을 발신합니다.

$140     .속도({ 높이: 300 }, { 지속: 1000 })     // 이전 애니메이션이 완료되면 이 애니메이션으로 계속 진행     .속도({ 정상: 200 }, { 지속: 600 })    // 다시 한 번...     .속도({ 불투명도: 0 }, { 지속: 200 });

스크롤 및 반전

Velocity에서의 스크롤은 Velocity의 첫 번째 인수로 일반적인 CSS 속성 맵 대신 "scroll"을 전달하는 것으로 구성됩니다.

// 750밀리초 동안 스크롤 $140.속도("실패", { 지속: 750 });

이후 브라우저는 Velocity가 호출된 요소의 위쪽 가장자리까지 아래로 스크롤합니다.

Velocity의 애니메이션 반전은 Velocity의 첫 번째 인수로 "역전" 통과로 구성됩니다.

// 요소의 높이를 애니메이션화합니다. $140.속도({ 높이: "500px" }, { 지속: 500 }); // 이전 애니메이션을 반전시키고 이전 기간을 사용하여 요소의 원래 높이로 다시 애니메이션합니다. $140.속도("실패");

Velocity의 reverse 명령은 기본적으로 이전 통화에서 사용된 애니메이션 옵션이 사용됩니다.새 옵션 개체를 전달하면 이전 옵션이 확장됩니다.

$140.속도({ 높이: "500px" }, { 지속: 500 }); // 이전 리버스 콜의 옵션 개체를 새 기간 값으로 확장합니다. $140.속도("실패", { 지속: 1000 });

역사

Velocity는 성능 및 디자이너 지향 JavaScript 애니메이션 [17][18]라이브러리의 부족을 해결하기 위해 Julian Shapiro에 의해 개발되었습니다.유명한 웹 개발자 중심의 인터넷 기술 회사인 Stripe는 [19]Velocity에서 풀타임 개발을 지속하는 데 필요한 재정 자원을 제공하는 데 도움이 되는 조성금으로 Shapiro를 후원했습니다.

Velocity의 내부 애니메이션 엔진의 고성능은 이전에는 [20]애니메이션에 초점을 맞추지 못한 구형 JavaScript 라이브러리보다 속도상의 이점 때문에 CSS 기반 애니메이션에서 인기가 없었던 JavaScript 기반 웹 애니메이션을 다시 구성하는데 도움을 주었다.

Shapiro는 2014년 9월 이후에 [21]IDE 내에서 사용할 수 있도록 생성된 애니메이션 코드를 실시간으로 내보낼 수 있는 라이브 프로덕션 웹 사이트에 애니메이션을 설계하는 도구인 Velocity Motion Designer를 출시했습니다.2015년 3월,[citation needed] Peachpit는 Velocity를 이용한 웹 애니메이션 개발의 초기 원리와 고급 원리를 모두 가르치는 JavaScript book을 이용한 Shapiro의 웹 애니메이션을 출판했습니다.2015년 중반 현재 Velocity는 Shapiro에 [22]의해 독점적으로 개발 및 유지되고 있습니다.

Velocity는 전문 기업 환경에서 사용될 뿐만 아니라 웹 개발 실험 및 초보자 실습에도 널리 사용됩니다.Velocity를 기반으로 구축된 개념 증명 웹 개발 프로젝트는 일반적으로 선도적인 커뮤니티 코드 공유 서비스인 CodePen(예)에 게시됩니다.

「 」를 참조해 주세요.

추가 정보

외부 링크

레퍼런스

  1. ^ julianshapiro. "velocity/README.md at master · julianshapiro/velocity · GitHub". Github.com. Retrieved 2021-02-13.
  2. ^ "History for package.json - julianshapiro/velocity · GitHub". Github.com. Retrieved 2021-02-13.
  3. ^ a b julianshapiro (2014-10-09). "velocity/LICENSE.md at master · julianshapiro/velocity · GitHub". Github.com. Retrieved 2016-01-20.
  4. ^ a b "JavaScript Animation". 15 June 2015.
  5. ^ "Major Contributor To Open Source Technologies, Julian Shapiro, Pulls Back the Curtains on SAAS Usage". Forbes.com. Retrieved 2016-01-20.
  6. ^ "Velocity.js for designers". Studio Wolf. Retrieved 2016-01-20.
  7. ^ a b "CSS vs. JS Animation: Which is Faster?". 28 April 2014.
  8. ^ "Velocity, the Powerhouse of JavaScript Libraries". 11 October 2017.
  9. ^ Julian Shapiro (2014-06-16). "Incredibly Fast UI Animation Using Velocity.js". Sitepoint.com. Retrieved 2016-01-20.
  10. ^ "Best sport bet sites in India 2021 Bet on sport ONLINE".
  11. ^ "Search · stars:>1 · GitHub". Github.com. Retrieved 2016-01-20.
  12. ^ "Shortlist The Net Awards 2015 Celebrating the best in web design and development". Thenetawards.com. Retrieved 2016-01-20.
  13. ^ "Animating Without jQuery – Smashing Magazine". Smashingmagazine.com. 2014-09-04. Retrieved 2016-01-20.
  14. ^ "The Simple Intro to SVG Animation". 31 July 2014.
  15. ^ "Use Velocity.js to apply slick app-like motion effects JavaScript Web Designer". Webdesignermag.co.uk. 2015-01-21. Retrieved 2016-01-20.
  16. ^ "Velocity.js". Julian.com. Retrieved 2016-01-20.
  17. ^ Team, Awwwards. "Interview with Julian Shapiro". Awwwards.com. Retrieved 2016-01-20.
  18. ^ Shapiro, Julian (2014-05-21). "Treat Open Source Like a Startup ★ Mozilla Hacks – the Web developer blog". Hacks.mozilla.org. Retrieved 2016-01-20.
  19. ^ Greg Brockman (2014-06-06). "Open-Source Retreat grantees". Stripe.com. Retrieved 2016-01-20.
  20. ^ Aurelio De Rosa (2014-06-23). "Easily Improving jQuery Animations". Sitepoint.com. Retrieved 2016-01-20.
  21. ^ Remix this video (2014-09-06). "Velocity Motion Designer: Overview". YouTube. Retrieved 2016-01-20.
  22. ^ "Contributors to julianshapiro/Velocity".