Nieuwe webanimatie-engine stuurt in een oogwenk CSS-animaties en -overgangen aan

Alex Danilo

Gebruikers verwachten vloeiende animaties van 60 fps in moderne gebruikersinterfaces voor meerdere apparaten. Het bereiken van dat prestatieniveau met de huidige animatieprimitieven op internet kan moeilijk zijn. Gelukkig werken we aan een nieuwe Blink-animatie-implementatie die zojuist is verzonden in Chrome Canary!

Het opwindende hieraan is dat het de interne werking van Blink vereenvoudigt en de basis legt voor het opnemen van nieuwe API-functies uit de Web Animations 1.0-specificatie .

Tot nu toe waren CSS-animaties en CSS-overgangen afzonderlijke implementaties geweest, onafhankelijk van elkaar geschreven, die niet noodzakelijkerwijs goed samenwerkten. De afgelopen jaren hebben browserimplementeerders samengewerkt aan een animatiemodel van de volgende generatie met ondersteuning voor zaken als synchronisatie, het aan elkaar koppelen van animaties om in volgorde te worden uitgevoerd, het zoeken naar willekeurige punten in de animatietijd , waardoor animaties van snelheid kunnen veranderen, achteruit kunnen gaan en meer. .] De inspanning leidde tot de vorming van de W3C-specificatie Web Animations 1.0 .

De eerste stap van het Blink-team om webanimaties de wereld in te sturen, is het vervangen van de bestaande Blink CSS Animations/Transitions C++-implementatie door de Web Animations-engine. Nu we die mijlpaal hebben bereikt, willen we graag dat zoveel mogelijk ontwikkelaars kunnen controleren of er niets kapot is en, nog belangrijker, dat ze de implementatie-inspanningen in de gaten houden en ons feedback geven over wat goed/slecht is of misschien moet worden veranderd.

De volgende stap is de implementatie van een API waarmee je animaties vanuit JavaScript kunt maken, wijzigen en ondervragen. De API is ontworpen om animaties efficiënt te laten werken (door gebruik te maken van declaratieve semantiek, zodat JavaScript het maken van animaties beheert, maar de controle aan de browser overdraagt), terwijl de volledige controle over de animaties nog steeds beschikbaar is voor de JavaScript-ontwikkelaar.

We zijn op zoek naar actieve feedback over de voorgestelde API om er zeker van te zijn dat we geen functies hebben gemist die nodig zijn voor krachtige animatiecontrole. Zoals bij elke nieuwe functie zal de specificatie blijven veranderen, dus nu is het tijd om uw stem te laten horen - idealiter door u te abonneren op en bij te dragen aan de mailinglijst public-fx@w3.org (en zet [Web Animations] in de onderwerpregel zodat het opgemerkt wordt).

Probeer nu de nieuwe engine uit die CSS-animaties en -overgangen al aanstuurt en plaats eventuele vreemde zaken in de Chromium-bugtracker , zodat we ervan op de hoogte zijn.

We zijn verheugd om animatiemogelijkheden van de volgende generatie naar Blink te brengen en kijken ernaar uit om samen te werken met andere browserontwikkelaars zoals WebKit en Mozilla die zich ook hebben gecommitteerd aan de implementatie van het nieuwe model.