본문 바로가기
카테고리 없음

[번역]UI 웹 디자인을 위한 최고의 9가지 애니메이션 라이브러리

Bino 2018. 9. 4. 23:45

link : https://www.sitepoint.com/our-top-9-animation-libraries/


이 가이드는 각 작업에 적합한 애니메이션 라이브러리를 선택할 수 있도록 도와주는 가이드의 최신 업데이트입니다.


프론트 엔드 웹 디자인은 지난 10 년 동안 혁명을 통해 이루어졌습니다. 2000년대 후반까지, 우리 중 대부분은 여전히 ​​정적으로 레이아웃을 디자인하고있었습니다. 오늘날 우리는 수천 개의 크기 조정되고 조정된 뒤 움직이는 부품으로 "디지털 기계"를 수천 개의 크기 조정, 조정, 이동 부품과 함께 구성했습니다.

간단히 말해 훌륭한 UI 디자이너 는 웹 애니메이션 기술에 대한 확실한 이해 로 훌륭한 애니메이터가 될 필요가 있습니다 .

우리는 "코드 전문가"개발자가 아닌 코드에 정통한 UI 디자이너의 관점에서 각 라이브러리를보고 있습니다. 이러한 라이브러리 중 일부는 순수한 CSS입니다. 대부분은 Javascript를 사용하지만 CSS는 HTML / CSS에 대한 기본적인 이해 이외에 아무것도 필요하지 않습니다. 라이브러리를 주시하고 이에 따라 CSS 클래스를 추가해보세요.

상위 9 개 애니메이션 라이브러리 목록

  1. Animate.css
  2. Bounce.js
  3. AnimeJS
  4. Magic Animations
  5. DynCSS
  6. CSShake
  7. Hover.CSS
  8. Velocity.js
  9. AniJS

Animate.css

Animate.css 는 사용 가능한 가장 작고 사용하기 쉬운 CSS 애니메이션 라이브러리 중 하나입니다. Animate 라이브러리를 프로젝트에 적용하는 것은 CSS를 링크하고 필요한 CSS 클래스를 HTML 요소에 추가하는 것처럼 간단합니다. 원하는 경우 jQuery를 사용하여 특정 이벤트의 애니메이션을 트리거 할 수도 있습니다.

Animate.css

  • 크리에이터 : Daniel Eden
  • 출시 : 2013
  • 현재 버전 :
  • 인기도 :
  • 설명 : "CSS 애니메이션의 크로스 브라우저 라이브러리. 쉬운 일처럼 사용하기 쉽습니다. "
  • 도서관 규모 : 47 kB
  • GitHub : https://github.com/daneden/animate.css
  • 라이센스 :

글을 쓰는 당시에는 여전히 가장 널리 사용되고 널리 사용되는 CSS 애니메이션 라이브러리 중 하나이며 축소 된 파일은 모바일 웹 사이트에 포함하기에 충분히 작습니다. 그것은 GitHub에 별을 가지고 있으며 종종 더 큰 프로젝트에서 구성 요소로 패키지됩니다.

Animate.css는 아직 개발 중입니다. 이것은 가장 간단하고 강력한 애니메이션 라이브러리 중 하나이며 모든 프로젝트에서이 라이브러리를 사용하는 것을 주저하지 않을 것입니다.

Bounce.js

Bounce.js는 재미 있고 탄력있는 "Warner brothers-esque"애니메이션을 웹 사이트에 제공하는 데 집중하는 JavaScript 애니메이션 라이브러리입니다.

Bounce.js

  • 제작자 : Tictail
  • 출시 : 2014
  • 현재 버전 :
  • 인기도 :
  • 설명 : "아름다운 CSS3 기반 애니메이션을 빠르게 만들 수 있습니다."
  • 도서관 크기 : 16 kB
  • GitHub : https://github.com/tictail/bounce.js
  • 라이센스 :

Bounce.js는 약 10 개의 애니메이션 "프리셋"과 함께 제공되는 깔끔한 애니메이션 라이브러리입니다. 따라서 라이브러리의 크기가 작습니다. 와 마찬가지로 animate.css , 애니메이션은 부드럽고 흠이다. "팝 및 거품"스타일의 애니메이션 유형을 중심으로하고 파일 크기 오버 헤드를 낮출 수 있다면이 라이브러리를 사용하는 것이 좋습니다.

AnimeJS

AnimeJS 는 이번에 새로 추가 된 것이기는 하지만, 창작 이래로 많은 신도(?)들을 얻었습니다. (다른 라이브러리에서 이 라이브러리로 갈아탔다는 뜻) 엄청나게 강력하지만 이 라이브러리는 HTML 게임 애니메이션을 위한 힘을 불어 넣어주지는 않습니다. 이 라이브러리에 할 수 있는 유일한 진짜 질문은 " 단순한 웹 앱에 과도한 부담이되는 것입니까? " 일 것입니다.

물론 아마도요. 하지만 그것은 빠르고, 작고, 상대적으로 배우기 쉽기 때문에, 사용중 실수를 발견하기가 어렵습니다.

AnimeJS 는 " CSS 속성, 개별 CSS 변환, SVG 또는 DOM 속성 및 JavaScript 객체와 함께 작동 하는 경량 JavaScript 애니메이션 라이브러리 "라고 설명 합니다. 꽤 멋지네요. 사실, 제가 찍은 GIF 캡처가 모션이 얼마나 매끄 럽고 버터 같은지에 대한 정의를 내릴 수는 없습니다.

애니메이션

이 프로젝트는 GitHub에서 사용할 수 있습니다 .

가장 인상적인 것은 Anime.JS는 아름다운 앱 환경에서 HTML, JavaScript 코드 및 작업 예제를 보여주는 놀랄만 한 "문서"를 가지고 있습니다.

즉, JavaScript 애니메이션 솔루션에 익숙하다면 Anime.JS를 무시하는 이유를 찾기가 어렵습니다.

매직 애니메이션

Magic Animations는 인상적인 애니메이션 라이브러리를 제공합니다. 이 라이브러리에는 여러 가지 다양한 애니메이션이 있으며 대부분이이 라이브러리에서만 고유합니다. Animate.css와 마찬가지로 CSS 파일을 가져 와서 Magic을 구현할 수 있습니다. jQuery에서 애니메이션을 사용할 수도 있습니다. 이 프로젝트는 특히 시원한 데모 응용 프로그램을 제공합니다.

매직 애니메이션

  • 현재 버전 :
  • 인기도 :
  • 설명 : "특수 효과가있는 CSS3 애니메이션"
  • 도서관 크기 : 36.5 kB
  • GitHub : https://github.com/miniMAC/magic
  • 라이센스 :

Magic Animation의 파일 크기는 animate.css에 비해 보통이며 마술 효과, 어리석은 효과 및 폭탄 효과와 같은 서명 애니메이션으로 알려져 있습니다.

평범한 것을 조금이라도 찾고 있다면, 나는이 애니메이션 라이브러리에 다음 프로젝트에서 기회를주기를 추천한다. 너는 실망하지 않을 것이다.

DynCSS

DynCSS는 시차 효과와 함께 웹 사이트에서 사용하고자하는 애니메이션 라이브러리입니다. 이 라이브러리로 할 수있는 일에 대해 명확하게 이해하려면이 데모를보십시오 .

DynCSS

DynCSS는 GitHub에있는 별의 수에 의해 입증 된 것처럼 거대한 인기가없는 간단한 라이브러리입니다. 그러나 여전히 가치가 있습니다. 이 라이브러리가 제공하는 멋진 기능 중 하나는 Vittorio가 DynCSS 홈 페이지에서 시연하는 스크롤링과 관련된 요소 회전입니다. 이는 시차 관련 페이지를 완벽하게 활용하는 사례입니다.

CSShake

CSShake 는 웹 페이지에서 요소를 흔들기 위해 특별히 고안된 CSS 라이브러리 인 상자에 표시된 내용을 그대로 전달합니다. 예상대로 웹 구성 요소를 흔들어 볼 수있는 다양한 변형이 있습니다.

CSShake

머리를 흔들어 사람을 흉내 낸 - 애플은 적극적으로 사용자가 잘못된 응답을 입력하면 UI 요소 (대화, 모달 또는 텍스트 상자)를 흔들어의 UI의 비유를 대중화. CSShake는 다양한 "재미있는"애니메이션을 제공하며이 라이브러리에는 변형이 없습니다.

현재 DynCSS보다 라이브러리가 대중적이지만, 파일 크기가 추가 된 기능에 의해 정당화되지 않을 수도 있습니다. 애니메이션이 영리한 동안, 나는 흔들림없는 효과를 위해 두 번째 애니메이션 라이브러리를 포함 할 필요가없는 많은 유스 케이스를 생각할 수 없다. 그러나 아마 나는 상상력이 부족한 것일까?

Hover.css

Hover.css 는 웹 사이트의 버튼 및 기타 UI 요소와 함께 사용하도록 설계된 CSS 애니메이션 라이브러리입니다. 다른 잘 만들어진 애니메이션과 함께 멋진 2D 전환 효과가 있습니다.

Hover.css

  • 현재 버전 :
  • 인기도 :
  • 설명 : "자신의 요소에 쉽게 적용하거나 변경하거나 영감을 얻기 위해 사용하십시오."
  • 도서관 규모 : 104.2 kB
  • GitHub : https://github.com/IanLunn/Hover
  • 라이센스 :

Hover.css는 버튼, 로고, SVG 구성 요소 또는 주요 이미지와 같은 개별 페이지 요소에 더 크고 복잡한 페이지 애니메이션보다 애니메이션을 적용하는 데 가장 적합합니다. 그것은 루틴의 포괄적 인 목록을 가지고 있으며, 이것은 상대적으로 큰 크기를 설명합니다 (그러나 나는 여전히 크기가 훨씬 더 최적화 될 수 있다고 느낍니다). 거의 틀림없이 가장 유명한 애니메이션 효과는 독특한 연설 거품과 컬입니다.

Velocity.js

Velocity.js는 Fade & Slide, Scroll, Stop, Finish, Reverse 등의 기능을 포함하는 정교한 기능의 또 다른 자바 스크립트 애니메이션 모음입니다.

Tumblr, WhatsApp, MailChimp, Scribd, Gap 및 HTC를 포함하여 유명한 사용자들의 인상적인 목록을 자랑하므로 대규모 사용자 및 이상한 사례에 대해 전투 테스트를 거쳤 음을 알 수 있습니다.

속도 JS

Velocity는 JavaScript 애니메이션 엔진이고 사실 jQuery와 동일한 API를 사용하는 애니메이션 엔진이기 때문에 일부에게는 적합하지 않을 수 있습니다 $.animate(). 이것은 jQuery의 유무에 관계없이 작동합니다. 즉, 믿을 수 없을 정도로 빠르며 그 기능에는 컬러 애니메이션, 변형, 루프 및 여유가 포함됩니다. 본질적으로 jQuery와 CSS 전환을 결합하는 것이 가장 좋습니다.

애니 즈

우리의 최종 라이브러리는 독특한 접근 방식으로 흥미 롭습니다. AniJS 는 간단한 '문장 형'구조로 요소에 애니메이션을 추가 할 수있는 애니메이션 라이브러리입니다. 다음 형식을 취하십시오.

경우 클릭, 에 광장, 수행 동요 애니메이션 하려면 .container 박스를

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>

Javascript에 대해 오랫동안 잘 알고 있지 않다면, 이것은 JS-choreographed 동작을 수행하는 좋은 방법 일 것입니다.


애니 즈

  • 제작자 : anijs
  • 출시 : 2014
  • 현재 버전 :
  • 인기도 :
  • 설명 : "코딩하지 않고도 웹 디자인을 높일 수있는 라이브러리"
  • 도서관 규모 : 10.5 kB
  • GitHub : https://github.com/anijs/anijs
  • 라이센스 :

AniJS는 기능면에서 매우 합리적인 크기의 라이브러리입니다. 구현을 위해 사용하는 형식은 다른 애니메이션 라이브러리 (많은 다른 사람이 비 통상적이라고 생각할 수있는)와 비교할 때 상당히 독창적이며 다른 형식입니다.

그럼에도 불구하고이 라이브러리는 프로젝트에 적어도 한 번 시도해 볼 가치가 있습니다. 그것은 경쟁의 일부의 전반적인 힘과 닦기를 결핍 할지도 모른다. 그러나 그것은 장래 성장할 잠재력을 가지고있다.

어떤 라이브러리를 선택해야합니까?

이미 많은 애니메이션 라이브러리가 준비되어 있으며 프로젝트에서 구현되기를 기다리고 있습니다. 위에 나열된 것들은 정교함과 안정성을 가장 잘 조합 한 몇 가지 예입니다.

사용하기 쉽고 견고한 CSS 솔루션을 찾고 계시다면 Animate.CSS 는 아마도 가장 다용도로 사용할 수있는 "bang-for-buck"옵션 일 것입니다.

좀 더 완벽하고 강력한 JavaScript 옵션을 찾고 있다면 VelocityJS 와 Anime.JS 는 분리하기가 어렵습니다. Velocity는 현재 트랙 레코드와 더 큰 설치 기반을 가지고 있지만 Anime.JS는 놀라 울 정도로 세련되고 흥미 롭습니다. 지금, 애니메이션 .JS의 아름다운 문서가 우리를 이기기에 충분할 수도 있습니다.

웹 응용 프로그램에서 애니메이션 라이브러리를 사용하면 상호 작용이 확실히 향상 될 수 있지만 과도하게 사용하면 목표를 달성하지 못하고 사용자를 혼란스럽게합니다. 조심스럽게 사용하고 신중하게 사용하십시오.

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바