tutorial
Anime.js 마스터 강좌: JavaScript 애니메이션 라이브러리 완벽 가이드
Anime.js를 활용한 웹 애니메이션 구현 방법을 단계별로 학습합니다. 타임라인, SVG 애니메이션, Stagger 효과, Easing 함수 등 핵심 기능을 실습과 함께 익힙니다.
럿지 AI 팀2025-01-1515min read
FPS
부드러운 애니메이션
KB
경량 라이브러리
+
이징 함수
의존성
순수 JavaScript
Anime.js 핵심 기능
🎨
CSS 속성
transform, opacity, color 등 모든 CSS 속성 애니메이션
✏️
SVG 애니메이션
path 모핑, stroke 그리기, 복잡한 SVG 애니메이션
⏱️
타임라인
여러 애니메이션을 시퀀스로 조합
🎯
Stagger
요소들을 순차적으로 애니메이션
기본 사용법
기본 사용법
1
설치npm install animejs
2
임포트import anime from 'animejs'
3
타겟 설정targets: '.element'
4
속성 정의translateX: 250, opacity: 1
5
옵션 설정duration: 800, easing: "easeOutQuad"
Easing 함수 종류
linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInElastic
easeOutElastic
easeInBounce
+ 100가지 이상의 이징 함수 지원
고급 기능
Timeline
- • .add() 메서드로 연결
- • 오프셋으로 타이밍 조절
- • play, pause, restart 제어
Stagger
- • anime.stagger(100)
- • 그리드 기반 스태거
- • 방향 및 시작점 설정
인터랙티브 웹 애니메이션 마스터하기
Anime.js 공식 문서#Anime.js
#JavaScript
#Animation
#Web Development
#Frontend