# AnimeJs v4 출시

> Clean Markdown view of GeekNews topic #20135. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20135](https://news.hada.io/topic?id=20135)
- GeekNews Markdown: [https://news.hada.io/topic/20135.md](https://news.hada.io/topic/20135.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-04-04T09:43:54+09:00
- Updated: 2025-04-04T09:43:54+09:00
- Original source: [animejs.com](https://animejs.com/)
- Points: 9
- Comments: 2

## Summary

Anime.js v4는 전체 구조를 새롭게 재작성하여 성능을 크게 향상시키고, API를 현대적으로 개편하여 개발자 경험을 개선했습니다. 주요 변경 사항으로는 ES 모듈 지원, 트리 쉐이킹 최적화, 복잡한 애니메이션 조합 개선 등이 있으며, API 변경 사항으로는 함수명 및 콜백 함수명 변경, Promise 처리 방식 변경 등이 포함됩니다. 또한, CSS 변수 애니메이션 지원, 가변 프레임 속도 지원 등 새로운 기능이 추가되어 더욱 강력하고 유연한 애니메이션 제작이 가능해졌습니다.

## Topic Body

- 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를 사용하여 미디어 쿼리에 쉽게 반응하는 애니메이션을 만들 수 있음.  
  - 미디어 쿼리, 사용자 지정 루트 요소, 스코프 메서드를 포함함.

## Comments



### Comment 36776

- Author: kaydash
- Created: 2025-04-06T00:12:02+09:00
- Points: 1

와 엄청나다

### Comment 36715

- Author: neo
- Created: 2025-04-04T09:43:54+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=43570533) 
- 그 랜딩 페이지를 스크롤할 때 예상보다 훨씬 부드럽고 빠르게 느껴졌음
- 이게 실제로 존재한다는 것이 믿기지 않을 정도로 잘 만들어졌음. 2000년대 초반 인터넷의 창의성이 오늘날의 세련된 디자인 기준과 만난 느낌이었음
- 그 홈페이지는 모바일 브라우저에서 매우 부드럽게 실행되는 가장 복잡하고 레이어가 많은 인터랙티브 애니메이션 중 하나였음. FPS가 마치 강력한 PC에서 실행되는 Doom 2016 같은 느낌이었음
- 스크롤 하이재킹을 싫어하지 않은 것은 이번이 처음이었음. 실제로 매우 부드러웠음
- 메인 사이트가 놀랍다고 생각했는데, 문서를 보고 나니 정말 놀라웠음. 잘했음. WAAPI를 시도해보는 것이 매우 기대됨
- 이 페이지를 좋아하지만, Firefox(136.0.3)에서 ublock origin을 활성화한 상태로 <a href="https://animejs.com/documentation/scope/" rel="nofollow">https://animejs.com/documentation/scope/</a>에 접속하면 탭이 즉시 충돌함. 매우 인상적인 인트로 애니메이션을 스크롤한 직후에 재미있는 경험이었음
- 브라우저의 스크롤 표시기를 잡고 드래그할 수 있고 애니메이션이 매끄럽게 업데이트되는 점이 마음에 듦 (safari mobile)
- 내 CPU가 너무 오래되었거나 비전통적인 브라우저(Microsoft Edge)를 사용하고 있을 수 있지만, 웹사이트가 <i>매우</i> 느리고 (초당 1회 미만 업데이트) 탭이 즉시 CPU의 80%를 사용하기 시작하며 팬이 크게 작동함. 8세대 Intel i7을 사용 중임
- 내가 사용하는 비전통적인 안드로이드 브라우저에서 정말 잘 작동함. 라이브러리에 대해 좋은 평가를 할 수 있음
- 랜딩 페이지가 놀라웠음
  - 유일한 문제는 반응형 레이아웃 예제를 확인할 때 브라우저 창 크기를 조정하면 스크롤이 맨 위로 리셋된다는 점이었음