- Anime.js는 웹에서 모든 것을 애니메이션화할 수 있는 빠르고 다재다능한 JavaScript 라이브러리
- V4는 전체 구조를 새롭게 재작성하여 성능을 크게 향상시키고, API도 더 현대적인 방식으로 개편됨
- 특히 ES Module 지원, 트리 쉐이킹 최적화, 복잡한 애니메이션 조합 개선 등으로 개발자 경험이 개선
Anime.js V4 주요 변경사항 요약
-
ES 모듈화 및 API 변경
- 모든 기능이 이제 ES 모듈로 제공됨 (
anime()→animate()) - 트리 쉐이킹에 유리하여 필요한 기능만 불러와 사용 가능함
anime({ targets })→animate(targets, params)형태로 변경됨
- 모든 기능이 이제 ES 모듈로 제공됨 (
-
주요 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'→ 가산적 애니메이션 적용 가능
- 기본 easing 값이
-
재생 방식 관련 변경
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 = falseanime.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를 사용하여 미디어 쿼리에 쉽게 반응하는 애니메이션을 만들 수 있음.
- 미디어 쿼리, 사용자 지정 루트 요소, 스코프 메서드를 포함함.