blink의 새로운 웹 애니메이션 엔진으로 CSS 애니메이션 및 전환 지원

Alex Danilo

사용자는 최신 멀티스크린 UI에서 부드러운 60fps 애니메이션을 기대합니다. 웹의 현재 애니메이션 프리미티브로는 이러한 수준의 성능을 달성하기가 어려울 수 있습니다. 다행히 Chrome Canary에 방금 출시된 새로운 Blink 애니메이션 구현을 위해 노력하고 있습니다.

이 기능의 장점은 Blink의 내부 구조를 단순화하고 Web Animations 1.0 사양의 새로운 API 기능을 포함하기 위한 기반을 마련한다는 점입니다.

지금까지 CSS 애니메이션과 CSS 전환은 별도의 구현으로 작성되었으며, 반드시 함께 작동하지는 않았습니다. 지난 몇 년간 브라우저 구현자는 동기화, 애니메이션을 체이닝하여 순차적으로 실행, 애니메이션 시간의 임의 지점으로 이동, 애니메이션 속도 변경, 되감기 등을 지원하는 차세대 애니메이션 모델을 공동으로 연구해 왔습니다.] 이 작업의 결과 W3C 사양 Web Animations 1.0이 만들어졌습니다.

Blink팀이 웹 애니메이션을 세상에 선보이기 위한 첫 번째 단계는 기존 Blink CSS 애니메이션/전환 C++ 구현을 웹 애니메이션 엔진으로 대체하는 것입니다. 이제 이 중요한 기록을 달성했으므로 최대한 많은 개발자가 중단된 사항이 없는지 확인하고, 더 중요한 것은 구현 작업을 주시하며 좋거나 나쁘거나 변경이 필요한 사항에 관한 의견을 보내주시기 바랍니다.

다음으로 JavaScript에서 애니메이션을 만들고 수정하고 쿼리할 수 있는 API를 구현할 예정입니다. 이 API는 JavaScript가 애니메이션 만들기를 관리하지만 제어를 브라우저에 전달하는 선언적 시맨틱스를 사용하여 애니메이션을 효율적으로 실행하면서도 JavaScript 개발자에게 전체 애니메이션 제어를 노출하도록 설계되었습니다.

강력한 애니메이션 제어에 필요한 기능을 놓치지 않았는지 확인할 수 있도록 제안된 API에 대한 의견을 적극적으로 모집하고 있습니다. 다른 모든 신규 기능과 마찬가지로 사양은 계속 변경되므로 지금이 의견을 제출할 때입니다. 메일링 리스트 public-fx@w3.org를 구독하고 참여하면 좋습니다 (제목에 [Web Animations] 를 포함하여 눈에 띄게 하세요).

이미 CSS 애니메이션 및 전환에 사용 중인 새로운 엔진을 지금 사용해 보고 이상한 점이 있으면 Chromium 버그 추적기에 게시하여 알려주세요.

Blink에 차세대 애니메이션 기능을 도입하게 되어 기쁘게 생각하며, 새로운 모델 구현에 참여한 WebKitMozilla와 같은 다른 브라우저 개발자와 협력할 수 있기를 기대합니다.