AnimeJs v4 출시

 (animejs.com)
9P by GN⁺ | ★ favorite | 댓글 2개
  • 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를 사용하여 미디어 쿼리에 쉽게 반응하는 애니메이션을 만들 수 있음.
    • 미디어 쿼리, 사용자 지정 루트 요소, 스코프 메서드를 포함함.

함께 보면 좋은 글 β

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