CSS에서 음수 animation-delay 값을 사용하여 JavaScript로 애니메이션 진행을 제어할 수 있음. 예를 들어 animation-delay: -1500ms로 설정하면 즉시 시작하되 1.5초 지점으로 건너뜀. JavaScript로 이 값을 조작하여 CSS 애니메이션을 스크러빙하고, 모든 애니메이션을 게임 엔진 스타일의 계산-업데이트-렌더링 틱 루프와 호환되게 만들 수 있음.
간단한 easing 함수나 한두 개 채널의 기본 키프레임 이상으로 발전하면 이 접근 방식의 한계에 빠르게 직면하게 됨. Theatre.js 라이브러리를 사용하면 키프레임과 베지어 곡선을 편집하기 위한 타임라인이 있는 스튜디오 UI와 이러한 키프레임을 가져와 타임라인과 관련하여 값을 보간하는 런타임으로 구성되어 있어 조정된 애니메이션이 필요할 때 유용함.
이 글에서는 브라우저 지원률이 88%인 사용자 정의 CSS @property를 활용함. 브라우저마다 초기값 설정 방식이 다른 점은 주의해야 함. 크롬은 정의되지 않았거나 유효하지 않은 값이면 초기값을 사용하지만, 파이어폭스는 정의되지 않은 경우에만 초기값을 사용함. 대부분의 프로젝트에는 문제가 되지 않겠지만, 브라우저 간 구현 불일치를 해결하려면 JavaScript로 파이어폭스의 기본값을 설정해야 할 수도 있음.
CSS에는 mod(), round(), 삼각 함수 등 충분한 수학 함수가 지원됨. CSS는 JavaScript처럼 타이머를 시작할 순 없지만, 요즘은 CSS Houdini API로 사용자 정의 변수를 정의하여 밀리초 단위로 시간을 추적할 수 있음. 그런데 JavaScript가 있는데 왜 이런 것들이 모두 필요할까? 그리기 레이어는 그리기 프리미티브에만 관심을 가져야 하지 않을까? 왜 고차원 레이어를 점점 더 많이 넣으려 하는 걸까?
만든 시계가 매우 세련되어 보임. 잘 작성된 글임. 크롬은 아직 mod()에 대한 CSS 지원을 출시하지 않아서 미리 보기 릴리스를 사용하지 않으면 페이지의 대부분 예제가 애니메이션되지 않음.
틱을 제어할 필요 없이 모든 브라우저에서 부드러운 CSS 애니메이션을 원한다면 FLIP 방법이 유용함.
들숨-멈춤-날숨-멈춤 단계를 모두 사용자 정의하여 자신의 신체에 맞추고 원하는 효과를 낼 수 있는 '박스 호흡' 같은 것을 하고 싶었는데, 이 페이지에 있는 것 같은 방법 없이는 (JS나 엄청난 복잡성 없이는) 할 방법을 찾지 못했음. 이 페이지에는 정말 창의적인 데모가 있음!
흥미롭게도 mod()를 사용하기 전의 데모는 작동하지만 mod()와 sin()은 최신 안드로이드 크롬에서 아무 작업도 하지 않음.
페이지 하단의 애니메이션이 매우 인상적임. <div> 요소가 아닌 <video>처럼 보임.
매우 인상적이지만, 어떻게 보면 수십 년 전 플래시로 할 수 있었던 것에 가까운 지점에 도달한 것 같음. 플래시가 다시 돌아오길 바라지는 않지만 CSS 애니메이션을 만들기 위한 더 사용자 친화적인 도구가 있으면 좋겠음.
Hacker News 의견
CSS에서 음수 animation-delay 값을 사용하여 JavaScript로 애니메이션 진행을 제어할 수 있음. 예를 들어
animation-delay: -1500ms로 설정하면 즉시 시작하되 1.5초 지점으로 건너뜀. JavaScript로 이 값을 조작하여 CSS 애니메이션을 스크러빙하고, 모든 애니메이션을 게임 엔진 스타일의 계산-업데이트-렌더링 틱 루프와 호환되게 만들 수 있음.간단한 easing 함수나 한두 개 채널의 기본 키프레임 이상으로 발전하면 이 접근 방식의 한계에 빠르게 직면하게 됨. Theatre.js 라이브러리를 사용하면 키프레임과 베지어 곡선을 편집하기 위한 타임라인이 있는 스튜디오 UI와 이러한 키프레임을 가져와 타임라인과 관련하여 값을 보간하는 런타임으로 구성되어 있어 조정된 애니메이션이 필요할 때 유용함.
이 글에서는 브라우저 지원률이 88%인 사용자 정의 CSS
@property를 활용함. 브라우저마다 초기값 설정 방식이 다른 점은 주의해야 함. 크롬은 정의되지 않았거나 유효하지 않은 값이면 초기값을 사용하지만, 파이어폭스는 정의되지 않은 경우에만 초기값을 사용함. 대부분의 프로젝트에는 문제가 되지 않겠지만, 브라우저 간 구현 불일치를 해결하려면 JavaScript로 파이어폭스의 기본값을 설정해야 할 수도 있음.CSS에는
mod(),round(), 삼각 함수 등 충분한 수학 함수가 지원됨. CSS는 JavaScript처럼 타이머를 시작할 순 없지만, 요즘은 CSS Houdini API로 사용자 정의 변수를 정의하여 밀리초 단위로 시간을 추적할 수 있음. 그런데 JavaScript가 있는데 왜 이런 것들이 모두 필요할까? 그리기 레이어는 그리기 프리미티브에만 관심을 가져야 하지 않을까? 왜 고차원 레이어를 점점 더 많이 넣으려 하는 걸까?만든 시계가 매우 세련되어 보임. 잘 작성된 글임. 크롬은 아직
mod()에 대한 CSS 지원을 출시하지 않아서 미리 보기 릴리스를 사용하지 않으면 페이지의 대부분 예제가 애니메이션되지 않음.틱을 제어할 필요 없이 모든 브라우저에서 부드러운 CSS 애니메이션을 원한다면 FLIP 방법이 유용함.
들숨-멈춤-날숨-멈춤 단계를 모두 사용자 정의하여 자신의 신체에 맞추고 원하는 효과를 낼 수 있는 '박스 호흡' 같은 것을 하고 싶었는데, 이 페이지에 있는 것 같은 방법 없이는 (JS나 엄청난 복잡성 없이는) 할 방법을 찾지 못했음. 이 페이지에는 정말 창의적인 데모가 있음!
흥미롭게도
mod()를 사용하기 전의 데모는 작동하지만mod()와sin()은 최신 안드로이드 크롬에서 아무 작업도 하지 않음.페이지 하단의 애니메이션이 매우 인상적임. <div> 요소가 아닌 <video>처럼 보임.
매우 인상적이지만, 어떻게 보면 수십 년 전 플래시로 할 수 있었던 것에 가까운 지점에 도달한 것 같음. 플래시가 다시 돌아오길 바라지는 않지만 CSS 애니메이션을 만들기 위한 더 사용자 친화적인 도구가 있으면 좋겠음.