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

Alex Danilo

사용자는 최신 다중 기기 UI에서 매끄러운 60fps 애니메이션을 기대합니다. 웹의 현재 애니메이션 프리미티브로는 이러한 수준의 성능을 달성하기 어려울 수 있습니다. 현재 Google은 Chrome Canary에 새로운 깜박임 애니메이션 구현을 제공하기 위해 노력하고 있습니다.

이 기능의 흥미로운 점은 Blink의 내부 기능이 간소화되고 웹 애니메이션 1.0 사양의 새로운 API 기능을 포함하기 위한 토대를 마련했다는 것입니다.

지금까지 CSS 애니메이션과 CSS 전환은 독립적으로 구현되어 함께 잘 작동하지는 않았습니다. 지난 몇 년 동안 브라우저 구현자는 동기화, 애니메이션을 순서대로 실행하도록 체이닝, 애니메이션 시간의 임의 지점 탐색, 애니메이션 속도 변경, 후진 등 다양한 기능을 지원하는 차세대 애니메이션 모델을 개발해 왔습니다.] 이러한 노력의 결과로 W3C 사양인 Web Animations 1.0이 만들어졌습니다.

Blink 팀이 웹 애니메이션을 출시하기 위한 첫 번째 단계는 기존의 Blink CSS 애니메이션/전환 C++ 구현을 웹 애니메이션 엔진으로 대체하는 것입니다. 이제 이 시점에 이르렀으므로 가능한 한 많은 개발자가 어떤 문제도 없는지 확인하고, 무엇보다도 구현 작업을 주시하면서 좋고 나쁜 점 또는 변경이 필요할 수 있는 부분에 관한 의견을 제공해 주시기를 바랍니다.

다음은 JavaScript에서 애니메이션을 만들고 수정하고 취합할 수 있는 API를 구현합니다. 이 API는 전체 애니메이션 컨트롤을 JavaScript 개발자에게 계속 노출하면서도 (자바스크립트가 애니메이션 생성을 관리하지만 브라우저에 제어권을 넘길 수 있도록 선언적 의미 체계를 사용하여) 애니메이션이 효율적으로 실행되도록 설계되었습니다.

강력한 애니메이션 제어에 필요한 기능을 놓치지 않도록, 제안된 API에 대한 적극적인 의견을 기다리고 있습니다. 모든 새로운 기능과 마찬가지로 사양은 계속 변경될 것이므로 지금이야말로 의견을 전달해 주시기 바랍니다. 메일링 리스트 public-fx@w3.org 를 구독하고 후원하고 제목에 [웹 애니메이션] 을 넣어 주목을 받는 것이 좋습니다.

현재 CSS 애니메이션 및 전환을 지원하는 새 엔진을 사용해 보고 Chromium 버그 추적기에 이상한 점이 있으면 Google에 알려주세요.

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