Share
De volgende keer dat u enkele CSS3-gebaseerde animaties samenstelt, is het misschien handig om in de Chrome-ontwikkelaarstools te springen en gebruik te maken van de animatie-inspectie en tweaking-functies. In deze snelle tip geven we u een overzicht van welke animatie-ontwikkelingshulpprogramma's beschikbaar zijn in Chrome, hoe u deze kunt openen en wat ze voor u kunnen doen.
Als je verder gaat, als je een paar CSS3-animaties wilt om elk gereedschap te testen, kun je deze pen gebruiken in onze cursus 10 CSS3-projecten: UI en lay-out:
Dit is de volledige paginaversie.
Open eerst de Chrome-ontwikkelaarstools door naar een pagina te gaan waarop een CSS3-animatie wordt uitgevoerd Beeld> Ontwikkelaar> Ontwikkelaarstools. Als alternatief kunt u ook een sneltoets gebruiken F12 of CTRL + SHIFT + I.
Als de dev-gereedschappen open zijn, ga je naar het menu dat wordt gesymboliseerd door drie verticale stippen in de rechterbovenhoek en kies je vervolgens Meer hulpmiddelen> Animaties zoals hieronder getoond:
Wanneer u het animatietabblad voor het eerst opent, ziet u geen inhoud met betrekking tot uw animaties, u ziet alleen een bericht Luisteren naar animaties ... . De reden hiervoor is dat, om te werken, het tabblad al open moet zijn wanneer de pagina voor het eerst wordt geladen.
Om het paneel toe te staan informatie over uw animaties vast te leggen, vernieuwt u de pagina en ziet u dit:
Het kleine gekleurde grafiekpictogram links bovenaan geeft de animaties van je pagina weer. Klik op dat pictogram om de animatie-inspectietools te openen:
Terwijl de animaties worden afgespeeld, ziet u de rode afspeelkop over de tijdlijn bewegen. Deze afspeelkop kan met de muis worden vastgegrepen en handmatig worden geschrobd of op een specifiek punt worden geplaatst.
Elke regel op de interface vertegenwoordigt een afzonderlijke animatie op de pagina. Je zult zien dat elke regel een gedeelte heeft met een donkerdere, meer verzadigde kleur. Dit geeft de lengte van de animatie aan en de lichtere segmenten die daarna komen, vertegenwoordigen de animatie die zichzelf herhaalt.
Je ziet ook verschillende kleine cirkels langs elke animatielijn. Deze komen overeen met de keyframes van de animatie. De donker gekleurde cirkels vertegenwoordigen het begin en het einde van de animatie en de holle cirkels vertegenwoordigen interstitiële keyframes overal tussen.
De interstitial-hoofdframes (hoofdframes tussen het begin en het einde van elke animatiecyclus) op elke regel kunnen naar verschillende posities worden gesleept en terwijl u ze verplaatst, ziet u de animatie in het browservenster de timing ervan wijzigen. Dit kan geweldig zijn om te experimenteren met precies welk percentage van een interstitial keyframe moet vallen.
Het lastige is echter dat je geen enkele update van de code ziet in de stijlen tabblad terwijl u deze experimenten uitvoert. In plaats daarvan kunt u, wanneer u uw interstitial-keyframes op precies het juiste punt plaatst, handmatig berekenen welk percentage een keyframe moet worden ingesteld om te gebruiken.
Plaats de afspeelkop recht boven het betreffende hoofdframe en u ziet linksboven in het deelvenster een tijdstempel die u vertelt hoe ver de animatie zich in seconden bevindt. U kunt vervolgens berekenen welk percentage deze tijd is van de totale duur van de animatie. In het onderstaande voorbeeld is de afspeelkop ongeveer 1 seconde lang, dus we weten dat dit hoofdframe 50% is.
Er zijn nog andere wijzigingen die u kunt aanbrengen in de animaties tab dat zullen update uw code in de stijlen tabblad, zodat u precies kunt zien welke waarden in uw CSS moeten worden overgeplant. De eerste hiervan is de vertraging voordat een animatie begint te spelen en de tweede is de duur ervan.
Als u de vertraging wilt aanpassen voordat een animatie wordt afgespeeld, beweegt u over de lijn totdat u een handvormige cursor ziet en sleept u vervolgens horizontaal. U ziet de vertragingswaarde worden bijgewerkt in de stijlen tab:
Als u de duur van de animatie wilt wijzigen, plaatst u de muisaanwijzer op het laatste hoofdframe totdat u een pijlcursor met dubbele punt ziet en vervolgens horizontaal sleept. Nogmaals, de waarde wordt bijgewerkt in de stijlen tab.
U kunt ook de dev-gereedschappen van Chrome gebruiken om de snelheidscurve aan te passen die de timing van een animatie bepaalt. Begin met het inspecteren van een element waarop een animatie is toegepast. Links van de momenteel ingestelde timingfunctie ziet u een klein vak met een 'kronkeltje' erin. Klik erop om de cubic bezier editor te openen:
Er opent een kader met een bezier-curve die de huidige timingfunctie illustreert. Hier kunt u een bestaande voorinstelling kiezen door op een van de miniaturen aan de linkerkant te klikken, of u kunt de grepen van de afbeelding met de hoofdcurve rondslepen om een kubieke bezier-waarde te maken die u vervolgens naar uw CSS kunt kopiëren:
Terwijl je doorgaat, zie je een kleine paarse bal van links naar rechts aan de bovenkant van de editor, zodat je een voorbeeld krijgt van je timingfunctie in actie.
Meer informatie over bezier-curven en timingfuncties in deze koffiepauze:
Een andere extra nuttige functie is de mogelijkheid om de lagen te visualiseren die in uw animatie worden gebruikt, inclusief de optie om de visualisatie te roteren en deze vanuit verschillende hoeken te bekijken om beter te begrijpen hoe de dingen werken.
Om de te openen Lagen paneel, ga naar het menu van Chrome Dev Tools en kies Meer hulpmiddelen> Lagen.
Zodra de Lagen tabblad is open, kies de Roteer modus gereedschap bovenaan links:
U kunt dit hulpprogramma nu gebruiken om de visualisatie van lagen naar elke gewenste hoek te roteren om het beste te zien hoe de delen van uw animatie werken:
Laten we snel een samenvatting van de tools voor animatie-dev van Chrome bekijken:
Soms kan het maken van een animatie er precies uitzien als een zeer nauwkeurig en kieskeurig proces. Deze tools kunnen het nodige inzicht in uw animaties geven, evenals realtime feedback om u te helpen alles perfect te krijgen.
Accentsconagua