- Anime.js는 웹에서 모든 것을 애니메이션화할 수 있는 빠르고 다재다능한 JavaScript 라이브러리
- V4는 전체 구조를 새롭게 재작성하여 성능을 크게 향상시키고, API도 더 현대적인 방식으로 개편됨
- 특히 ES Module 지원, 트리 쉐이킹 최적화, 복잡한 애니메이션 조합 개선 등으로 개발자 경험이 개선
Anime.js V4 주요 변경사항 요약
-
ES 모듈화 및 API 변경
- 모든 기능이 이제 ES 모듈로 제공됨 (
anime() → animate())
- 트리 쉐이킹에 유리하여 필요한 기능만 불러와 사용 가능함
-
anime({ targets }) → animate(targets, params) 형태로 변경됨
-
주요 API 변경 사항
-
easeInOutQuad → 'inOutQuad' (접두사 제거)
- 콜백 함수명 변경:
-
begin() → onBegin()
-
update() → onUpdate()
-
complete() → onComplete()
-
change() → onRender()
- 루프 관련 콜백은
onLoop() 하나로 통합됨
-
.finished → .then() 으로 Promise 처리 방식 변경됨
-
{ value: 100 } → { to: 100 } 으로 값 표현 변경됨
-
round: 100 → modifier: utils.round(2) 로 더 유연하게 수치 변경 가능함
-
애니메이션 구성 및 조합 개선
- 기본 easing 값이
outQuad로 변경됨
- 동일 타겟에 동일 속성 애니메이션 중복 시 기본적으로 이전 트윈 취소됨 (
composition: 'replace')
-
composition: 'none' → V3 방식 (중첩 허용)
-
composition: 'add' → 가산적 애니메이션 적용 가능
-
재생 방식 관련 변경
-
direction: 'reverse' 또는 'alternate' → reversed: true, alternate: true 로 분리되어 동시에 사용 가능함
-
loop: 1 → 기본 루프는 0으로 변경됨
-
타임라인(Timeline) 시스템 개선
-
anime.timeline() → createTimeline() 으로 변경됨
- 자식 애니메이션에서
loop, reversed 사용 가능
-
defaults 속성으로 자식들의 공통 옵션 설정 가능
-
set(), label, stagger() 등 더 유연한 타이밍 제어 기능 추가됨
- CSS transform 속성들이 자식 애니메이션 간에 더 자연스럽게 이어짐
-
Stagger 및 SVG 애니메이션
-
anime.stagger() → stagger() 직접 불러와 사용
-
anime.path() → svg.createMotionPath() 사용
-
strokeDashoffset, points 등의 SVG 속성도 svg.drawLine(), svg.morphTo() 등으로 처리
-
유틸리티 함수 분리
-
anime.get() → utils.get()
-
anime.set() → utils.set()
-
anime.remove() → utils.remove()
-
anime.round() → utils.round()
-
엔진 설정 변경
-
anime.suspendWhenDocumentHidden = false → engine.pauseWhenHidden = false
-
anime.speed = 0.5 → engine.playbackRate = 0.5
-
성능 및 구조 개선
- 전체 코드 리팩토링으로 메모리 사용량 감소 및 성능 향상
- Tween 시스템 재작성으로 중복 애니메이션 시 버그 감소
-
composition: 'add' 로 가산 애니메이션 지원
- CSS Transform 구성 시 자연스러운 연결성 개선
새로운 기능
-
CSS 변수 애니메이션 지원: 예)
animate('#target', { '--radius': '20px' })
-
from 애니메이션 지원:
{ from: 50, to: 100 } 형태 사용 가능
-
hex 색상에 alpha 지원: 예)
#FF4433AA 형식 지원
-
createTimer 기능 도입:
-
setTimeout, setInterval 대체
-
onLoop, onUpdate, onComplete 등 사용 가능
-
frameRate 조절로 게임 루프 등에 활용 가능
-
가변 프레임 속도 지원: 애니메이션, 타임라인, 타이머별로 개별 설정 가능
Anime.js 의 특징
-
직관적인 API
- 사용하기 쉬우면서도 강력한 애니메이션 API를 제공함.
- 속성별 매개변수와 유연한 키프레임 시스템을 지원함.
- 내장된 이징 기능과 향상된 변환 기능을 제공함.
-
SVG 도구 세트
- 내장된 SVG 유틸리티를 통해 모양 변형, 모션 경로 추적, 선 그리기를 쉽게 수행할 수 있음.
- 모양 변형, 선 그리기, 모션 경로 기능을 포함함.
-
스크롤 옵저버
- 스크롤에 따라 애니메이션을 동기화하고 트리거할 수 있는 Scroll Observer API를 제공함.
- 다양한 동기화 모드와 고급 임계값을 지원함.
-
고급 스태거링
- 내장된 Stagger 유틸리티 함수로 몇 초 만에 놀라운 효과를 만들 수 있음.
- 시간 스태거링, 값 스태거링, 타임라인 위치 스태거링을 포함함.
-
스프링과 드래그 기능
- Draggable API를 통해 HTML 요소를 드래그, 스냅, 플릭, 던질 수 있음.
- 다양한 설정과 포괄적인 콜백, 유용한 메서드를 제공함.
-
타임라인 API
- 강력한 타임라인 API로 애니메이션 시퀀스를 조정하고 콜백을 동기화할 수 있음.
- 애니메이션 동기화, 고급 시간 위치, 재생 설정을 지원함.
-
반응형 애니메이션
- Scope API를 사용하여 미디어 쿼리에 쉽게 반응하는 애니메이션을 만들 수 있음.
- 미디어 쿼리, 사용자 지정 루트 요소, 스코프 메서드를 포함함.