Animation av övergångar mellan två fragment. Övergångar och animering

Twitter

En av hörnstenarna i Materialdesignär meningsfulla rörelser mellan skärmar. Lollipop ger stöd för dessa animationer i form av ett övergångsramverk mellan Activity och Fragment. Eftersom det inte finns många artiklar om detta ämne, bestämde jag mig för att skriva mina egna!

Vår slutprodukt kommer att vara ganska enkel. Vi kommer att göra en galleriansökan med katter. Genom att klicka på bilden öppnas en skärm med detaljer. Tack vare ramverket kommer övergången från rutnätet av bilder till fönstret med detaljer att åtföljas av animering.

Om du vill se vad som hände - färdig ansökan finns på GitHub.

Stöd tidigare versioner Android?

Jag har två nyheter till dig: bra och dåliga. De dåliga nyheterna är att förut Lollipop given ramverket fungerar inte. Trots detta löses problemet med metoderna i supportbiblioteket med vilka du kan implementera animerade övergångar tillgängliga i API 21+.

Den här artikeln kommer att använda funktioner från supportbiblioteket för att möjliggöra innehållsförflyttning.

Övergångsnamn

För att associera vyn på den första skärmen med dess motsvarighet på den andra, behövs en anslutning. Lollipop föreslår att du använder " övergångsnamn” för kommunikation mellan vyer.

Det finns två sätt att lägga till ett övergångsnamn ( övergångsnamn) för din vy:

Du kan använda ViewCompat.setTransitionName() i din kod. Naturligtvis kan du också bara anropa setTransitionName() om stödet startar med Lollipop.
För att lägga till det i XML, använd attributet android:transitionName.

Det är viktigt att notera att inom en layout ( layout), måste övergångsnamn vara unika. Tänk på detta när du organiserar övergångar. Pekande övergångsnamn för ListView eller RecyclerView kommer att ställa in samma namn för alla andra element.

Konfigurera FragmentTransaction

Att ställa in FragmentTransactions bör vara välbekant för dig:

GetSupportFragmentManager() .beginTransaction() .addSharedElement(sharedElement, transitionName) .replace(R.id.container, newFragment) .addToBackStack(null) .commit();
För att specificera vilken vy vi ska överföra mellan fragment använder vi metoden addSharedElement().

Vyn som skickas till addSharedElement() är vyn från det första fragmentet som du vill dela ( dela med sig) med det andra fragmentet. Övergångsnamnet här är namnet på övergången i den separerade ( delad) Se i det andra fragmentet.

Konfigurera övergångsanimation

Äntligen har ögonblicket kommit då vi ska ställa in övergångsanimationen mellan fragment.

För delade element:

För att gå över från det första fragmentet till det andra använder vi metoden setSharedElementEnterTransition().
För att gå tillbaka använder vi metoden setSharedElementReturnTransition() . Animeringen sker när du trycker på bakåtknappen.

Observera att du måste anropa dessa metoder i det andra fragmentet, för om du gör det i det första kommer ingenting att hända.

Du kan också animera övergångar för alla ej delad Se. För dessa vyer, använd setEnterTransition() , setExitTransition() , setReturnTransition() och setReenterTransition() i lämpliga fragment.

Var och en av dessa metoder accepterar en övergångsparameter avsedd för att utföra animering.

Vi kommer att skapa animation väldigt enkelt. Vi använder vår anpassade övergång för att flytta bilden (mer om det senare) och Tona när vi avslutar.

Övergångsanimationsklasser

Android tillhandahåller några förgjorda övergångsanimationer som är lämpliga för de flesta fall. Fade utför en fade-animering. Slide animerar övergången utseende/försvinnande genom att glida från hörnet på skärmen. Explodera En animation som liknar en explosion, bilden rör sig från skärmens kanter. Slutligen kommer AutoTransition att få bilden att blekna, flytta och ändra storlek. Det här är bara några exempel från flyttpaketet, det finns faktiskt många fler!

Jag nämnde att vi kommer att behöva en anpassad övergång för vår bild. Här är han:

Public class DetailsTransition utökar TransitionSet ( public DetailsTransition() ( setOrdering(ORDERING_TOGETHER); addTransition(new ChangeBounds()). addTransition(new ChangeTransform()). addTransition(new ChangeImageTransform())); ) )
Vår anpassade övergång är inget annat än en uppsättning av tre färdiga övergångar sammansatta:

Tillsammans

Koden som vi slutade med visade sig vara ganska enkel:

DetailsFragment details = DetailsFragment.newInstance(); // Observera att vi behöver kontrollera API-versionen här eftersom de faktiska övergångsklasserna (t.ex. Tona) // är inte i supportbiblioteket och är endast tillgängliga i API 21+. Metoderna vi kallar på fragmentet // ÄR tillgängliga i supportbiblioteket (även om de inte gör någonting på API< 21) if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) ( details.setSharedElementEnterTransition(new DetailsTransition()); details.setEnterTransition(new Fade()); setExitTransition(new Fade()); details.setSharedElementReturnTransition(new DetailsTransition()); ) getActivity() .getSupportFragmentManager() .beginTransaction() .addSharedElement(holder.image, "sharedImage") .replace(R.id.container, details) .addToBackStack(null) .commit();
Det är allt! Ett enkelt sätt att implementera animering av övergångar mellan två fragment är klart!

Paul är en design- och prestationsförespråkare

I en applikation är det ofta nödvändigt för användaren att navigera från en vy till en annan. Detta kan vara att navigera från en lista till en detaljvy eller att visa en sidonavigeringsfält. Att lägga till animationseffekter till övergångarna mellan dessa vyer är bra för att hålla kvar användarens uppmärksamhet och öka den visuella attraktionskraften hos dina mönster

TL;DR

Använd övergångsegenskapen för att flytta mellan vyer; Du bör inte tillämpa left , top , eller någon annan egenskap som gör att layouten beräknas om.
Varje animering bör vara omedelbar.
Tänk på hur animationseffekter och layouter kommer att förändras när skärmstorleken ökar; vad passar till liten skärm kan se obekvämt ut på skärmen stor storlek.

Hur dessa övergångar mellan vyer kommer att se ut och prestera beror till stor del på vilken typ av vyer du har att göra med. Så att till exempel animera en modal överlagring ovanpå en vy kommer att skilja sig från att flytta från en lista till en vy med detaljerad information eller tvärtom.

Notera:Du bör sträva efter att se till att bildfrekvensen för alla animationer är 60 bilder per sekund. Detta kommer att undvika stamning när du spelar animationer, vilket är osannolikt att tillfredsställa dina användare. Alla element som animeras bör ha egenskapen will-change inställd på alla komponenter som kommer att ändras, långt innan själva animeringen implementeras. Det är mycket troligt att egenskapen kommer att förändras: transformera kommer att användas för att övergå mellan vyer

Använda översättningsattribut för att flytta mellan vyer

För att göra saker enkelt, låt oss anta att det finns två vyer: en listvy och en detaljvy. När användaren klickar på ett listobjekt i listvyn visas detaljvyn på skärmen och listvyn försvinner från skärmen.

För att uppnå denna effekt behöver du en behållare för båda vyerna, som kommer att ställas in på flödande: hidden . På så sätt kan båda vyerna vara i behållaren samtidigt utan att visas horisontella ränder rullningsbar, med varje vy glidande från sida till sida i behållaren efter behov.

CSS-kod för behållaren:

Behållare ( bredd: 100 %; höjd: 100 %; bräddavlopp: dold; position: relativ; )

Behållarens position anges som relativ . Detta innebär att varje vy inuti en container kan placeras exakt till vänster övre hörnet, och flytta sedan med hjälp av egenskapen transform. Den här metoden ger en prestandafördel jämfört med att använda den vänstra egenskapen (eftersom den gör att layouten beräknas om och sidan faktiskt ritas om), och den är också generellt sett lättare att rationalisera.

Visa ( bredd: 100%; höjd: 100%; position: absolut; vänster: 0; topp: 0; /* låt webbläsaren veta att vi planerar att animera varje vy in och ut */ kommer att förändras: transform; )

Att lägga till övergång till transformegenskapen ger en attraktiv glidande effekt. För att glidningen ska kännas bra måste du använda en anpassad kubik-bezier-kurva, som diskuteras i dokumentet [Guide to Changing the Speed of Custom Animation] (custom-easing.html).

View ( /* Prefix behövs för Safari och andra WebKit-baserade webbläsare */ transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); transition: transform 0.3s cubic-bezier(0.4183, 0.4185, 0.4185, cubic-bezier(0.465, 0.183, 0.153, 0.946); 0,153, 0,946);

En vy som försvinner från skärmen ska flyttas till höger, så in I detta fall vyn med sådan information måste flyttas:

Detaljvy ( -webkit-transform: translateX(100%); transform: translateX(100%); )

Var container = document.querySelector(.container"); var backButton = document.querySelector(".back-button"); var listItems = document.querySelectorAll(".list-item"); /** * Växlar klassen på behållaren så att * vi väljer rätt vy. */ function onViewChange(evt) ( container.classList.toggle("view-change"); ) // När du klickar på ett listobjekt öppnar du detaljvyn. för (var i = 0; i< listItems.length; i++) { listItems[i].addEventListener("click", onViewChange, false); } // And switch it back again when you click on the back button backButton.addEventListener("click", onViewChange);

Slutligen lägger vi till CSS-deklarationerna för dessa klasser.

View-change .list-view ( -webkit-transform: translateX(-100%); transform: translateX(-100%); ) .view-change .details-view ( -webkit-transform: translateX(0); transform : translateX(0);

Denna kod kan modifieras för att inkludera flera vyer, men grundidén förblir densamma. Varje osynlig vy bör hållas utanför skärmen och visas på den endast när det behövs, och en vy alltså det här ögonblicketär på skärmen bör den försvinna från den.

Notera:Skapa en hierarki som fungerar i olika webbläsare, kan vara en mycket utmanande uppgift. Till exempel i iOS för omstart fling-rullning kräver en extra CSS-egenskap, -webkit-overflow-scrolling: touch , men det finns inget sätt att styra vilken axel som rullningen kommer att fungera på (medan standardegenskapen för overflow tillåter detta). Se till att testa din kod på olika enheter!

Förutom att navigera mellan vyer kan den här tekniken även användas för andra element på skärmen, till exempel sidonavigeringselement. Den enda skillnaden är att andra synpunkter inte behöver flyttas.

Se till att animering fungerar på stora skärmar

På stora skärmar bör listvyn inte tas bort från skärmen alls, och detaljvyn ska visas på höger sida av skärmen. Detta är i huvudsak samma sak som att öppna navigeringsvyn.

En utveckling av CSS3 är förmågan att definiera beteende för övergångar och animationer. Front-end-utvecklare har bett i flera år att implementera dessa interaktioner inom HTML och CSS, utan att använda JavaScript eller Flash. Nu har deras dröm gått i uppfyllelse.

Med CSS3-övergångar har du potential att förändras utseende och elementets beteende närhelst dess tillstånd ändras, till exempel när elementet hålls över, får fokus, blir aktivt eller följs av en länk.

Animation i CSS3 låter dig ändra utseendet och beteendet för ett element med hjälp av några få nyckelrutor. Övergångar ger en övergång från ett tillstånd till ett annat, medan animering kan upprätta flera övergångspunkter över olika nyckelbildrutor.

Övergångar

Animation Keyframes

För att ställa in flera punkter där ett element ska övergå, används @keyframes-regeln. Denna regel inkluderar namnet på animeringen, valfritt antal kontrollpunkter och egenskaperna som ska animeras.

@keyframes slide ( 0 % ( vänster: 0; topp: 0; ) 50 % ( vänster: 244px; topp: 100px; ) 100 % ( vänster: 488px; topp: 0; ) )

Leverantörsprefix i @keyframes-regeln

@keyframes-regeln måste ha leverantörsprefix, precis som alla andra övergångs- och animeringsegenskaper. Prefixen för @keyframes ser ut så här:

@-moz-keyframes
@-o-keyframes
@-webkit-keyframes

Animeringen ovan kallas slide , tillstånden startar omedelbart efter att @keyframes-regeln har öppnats. De olika nyckelbildrutornas brytpunkter ställs in med hjälp av procentsatser, som börjar på 0 % och arbetar upp till 100 %, med en 50 %-punkt emellan. Om så önskas kan nyckelorden från och till användas istället för 0% och 100%. Förutom 50 % kan ytterligare kontrollpunkter anges. Egenskaperna för element för animering listas i varje Kontrollpunkt, vänster och topp i exemplet ovan.

Det är viktigt att notera, precis som med övergångar kan endast enskilda egenskaper animeras. Tänk på hur du till exempel kan flytta ett element uppifrån och ner. Att försöka animera från toppen: 0 till botten: 0 kommer inte att fungera eftersom animering bara kan tillämpa en övergång inom en egenskap, inte från en egenskap till en annan. I det här fallet måste elementet animeras från toppen: 0 till toppen: 100 % .

animationsnamn

När nyckelbildrutorna för animeringen har deklarerats måste de tilldelas elementet. För att göra detta, använd egenskapen animation-name med animationsnamnet från @keyframes-regeln som egenskapsvärde. Animationsnamndeklarationen gäller för det element som animeringen ska specificeras för.

Stage:hover .ball ( animationsnamn: slide; )

Att använda egenskapen animation-name enbart är inte tillräckligt. Dessutom måste du deklarera en animation-duration-egenskap och ett värde så att webbläsaren vet hur länge animeringen ska pågå innan den avslutas.

animation-duration, tidsfunktion och animation-delay

När du har deklarerat egenskapen animation-name på ett element, beter sig animationer som övergångar. Dessa inkluderar varaktighet, tidsfunktion och fördröjning om så önskas. Animationen kräver först en varaktighet, deklarerad med egenskapen animation-duration. Som med övergångar kan varaktigheten anges i sekunder eller millisekunder.

Stage:hover .ball ( animation-name: slide; animation-duration: 2s; )

Tidsfunktionen och fördröjningen kan deklareras med hjälp av egenskaperna animation-timing-funktion respektive animation-delay. Värdena på dessa egenskaper är imiterade och beter sig på samma sätt som övergångar gör.

Stage:hover .ball ( animationsnamn: slide; animation-duration: 2s; animation-timing-function: ease-in-out; animation-delay: .5s; )

Animationen nedan bör få bollen att studsa en gång när den rör sig till höger, men bara när den svävar över scenen.

@keyframes slide ( 0 % ( vänster: 0; topp: 0; ) 50 % ( vänster: 244px; topp: 100px; ) 100 % ( vänster: 488px; topp: 0; ) .stage (höjd: 150px; position: relativ; ) .ball (höjd: 50px; position: absolut; bredd: 50px; ) .stage:hover .ball (animationsnamn: slide; animation-duration: 2s; animation-timing-function: ease-in-out; animationsfördröjning: .5s)

Animationsinställningar

Animation erbjuder också möjligheten att ytterligare anpassa ett elements beteende, inklusive att ställa in hur många gånger animeringen körs samt i vilken riktning animeringen slutar.

animation-iteration-count

Som standard går animationen en gång från början till slut och stoppar sedan. För att få animationen att upprepas många gånger kan egenskapen animation-iteration-count användas. Värden för det inkluderar ett heltal eller det oändliga nyckelordet. Att använda ett heltal kommer att upprepa animeringen så många gånger som specificerats, medan det oändliga nyckelordet kommer att upprepa animeringen i det oändliga och aldrig sluta.

Stage:hover .ball ( animationsnamn: slide; animation-duration: 2s; animation-timing-function: ease-in-out; animation-delay: .5s; animation-iteration-count: oändlig;)

animation-riktning

Förutom att du kan ställa in hur många gånger animeringen ska upprepas, kan du också deklarera i vilken riktning animeringen slutar med hjälp av egenskapen animation-direction. Värden för den här egenskapen inkluderar normal, omvänd, alternativ och alternativ-omvänd.

Normalvärdet spelar upp animationen som avsett, från början till slut. Värdet omvänt spelar upp animeringen exakt på motsatt sätt som definierats i @keyframes-regeln, och börjar alltså på 100 % och arbetar bakåt till 0 %.

Det alternativa värdet kommer att spela animeringen framåt och sedan bakåt. I nyckelbildrutor innebär detta att springa framåt från 0 % till 100 % och sedan bakåt från 100 % till 0 %. Genom att använda egenskapen animation-iteration-count kan du begränsa antalet gånger animeringen körs framåt och bakåt. Räkningen börjar från 1 när animeringen går framåt från 0 % till 100 % och läggs sedan till 1 när animeringen går bakåt från 100 % till 0 %. Kombinera totalt två iterationer. Det alternativa värdet inverterar även alla tidsfunktioner när du spelar baklänges. Om en animation använder ett lättnadsvärde som går från 0 % till 100 %, använder den sedan ett lättnadsvärde som går från 100 % till 0 %.

Slutligen kombinerar det alternativa-omvända värdet både de alternativa och omvända värdena, och kör animeringen bakåt och sedan framåt. Det alternativa omvända värdet börjar på 100 % och går till 0 % och sedan tillbaka till 100 %.

Stage:hover .ball ( animationsnamn: slide; animation-duration: 2s; animation-timing-function: ease-in-out; animation-delay: .5s; animation-iteration-count: oändlig; animation-direction: alternativ ;)

animation-play-state

Egenskapen animation-play-state gör att animationen kan spelas upp eller pausas med hjälp av nyckelord löpning respektive pausad. När en animering återupptas, återupptas den från sitt nuvarande tillstånd istället för att börja från början igen.

Exemplet nedan ställer in egenskapen animation-play-state att pausa när scenen är aktiv när den klickas. Lägg märke till hur animeringen pausas tillfälligt tills du släpper musknappen.

animation-fill-läge

Egenskapen animation-fill-mode bestämmer hur elementet ska utformas - före, efter eller före och efter att animeringen startar. Egenskapen animation-fill-mode accepterar fyra nyckelordsvärden, inklusive ingen , framåt , bakåt och båda .

Ett värde på ingen kommer inte att tillämpa några stilar på elementet före eller efter att animeringen har startat.

Forwards-värdet kommer att bevara de stilar som deklarerades i den senast angivna nyckelbildrutan. Dessa stilar kan dock påverkas av värdena för egenskaperna animation-direction och animation-iteration-count, vilket ändrar var animeringen slutar.

Det bakåtriktade värdet kommer att tillämpa stilarna för den första nyckelbildrutan som anges innan animeringen körs. Gör att dessa stilar kan tillämpas så länge som möjligt, vilket kan ställas in i animationsfördröjning . Värdet på bakåt kan också bero på värdet på egenskapen animation-direction.

Slutligen kommer värdet båda att tillämpa beteendet från både framåt- och bakåtvärden på en gång.

Stage:hover .ball ( animationsnamn: slide; animation-duration: 2s; animation-timing-function: ease-in-out; animation-delay: .5s; animation-fill-mode: forwards; .stage:active .ball ( animation-play-state: pausad; )

animation stenografi egendom

Lyckligtvis kan animationer, som övergångar, spelas in i ett förkortat format. Detta uppnås genom att använda en enda animeringsegenskap istället för flera deklarationer. Värdeordningen i animationsegenskapen bör vara: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode och slutligen animation- spela-tillstånd.

Stage:hover .ball ( animation: glida 2s ease-in-out .5s oändligt alternativ; ) .stage:active .ball ( animation-play-state: pausad; )

Resurser och länkar

Förstå CSS3-övergångar på en lista
CSS Cubic-Bezier Builder av Rob LaPlaca
Guiden till CSS-animering: principer och exempel på Smashing Magazine
Använder CSS-animationer på Mozilla Developer Network

Förra veckan var det en "semester i Velaribo" - jag fick den efterlängtade uppdateringen till version 7.1, som lade till några funktioner och, förmodligen, tog bort några buggar. Men huvud funktion Uppdateringen var en ökning av hastigheten. De säger att på "äpplen" började allt bara flyga. Kära "Velabagio", sluta diska - läs nedan snittet för att ta reda på hur du organiserar samma semester för dig själv!

Varför älskar vi Android? Naturligtvis för dess flexibilitet. Systemet är inte bara öppet för olika typer av "dekorationer" från tredje part, utan det har i sig några funktioner som gör det möjligt för användaren att avsevärt ändra upplevelsen av att använda enheten.

Och nu ska vi berätta om tre enkla inställningar, vilket avsevärt kommer att öka hastigheten med vilken animationer visas när du växlar mellan applikationer, samt när du öppnar och minimerar deras fönster. För att göra detta måste du följa några enkla steg.

Först måste du komma åt menyalternativet "Utvecklaralternativ". För att göra detta, gå till inställningarna för din smartphone och gå till menyalternativet "Om enhet", där hittar du raden med information om byggnumret och klickar på den 7 gånger. Om du inte kan hitta någon av menyalternativen, så Google hur du aktiverar "Utvecklaralternativ" specifikt på din telefonmodell.

Gå sedan till "Utvecklaralternativ" som visas i inställningarna och hitta följande inställningar där:

Fönster animationsskala
Övergångsanimationsskala
Animatörens varaktighetsskala

Förbi minst, så heter de i min Samsung. Namnen bör i alla fall ha nära betydelse, oavsett tillverkare.

Standardvärdena här är "1x" - ändra dem till "0,5x". Voila!

Dessa Android-tweaks kommer att förändra din användarupplevelse genom att påskynda övergångar mellan UI-fönster. Det vill säga att göra samma sak som iOS-uppdatering. Dessutom bör detta inte på något sätt påverka batteriförbrukningen. Fast om du använder gammal modell telefon med en långsam processor, kan du se lite jitter.

Prova och dela dina intryck i kommentarerna!

CSS3 har två renderingstekniker som konkurrerar om din uppmärksamhet: Animationer och Övergångar (observera: den här artikeln kommer att använda de ryska namnen för dessa tekniker). I den här artikeln kommer vi att försöka identifiera likheterna och skillnaderna mellan dessa tekniker så att du förstår när det är bättre att använda en eller annan metod.

För korrekt förståelse För den här artikelns syften är det starkt tillrådligt att du redan har erfarenhet av att arbeta med animering och övergångar.

Likheter

Om man tittar på det med blotta ögat verkar det inte vara någon skillnad mellan animation och övergångar. Båda teknikerna tillåter:

definiera CSS-egenskaperna vi vill ändra;
ställ in typen av matematisk funktion för att styra övergångshastigheten från ett värde till ett annat;
ange varaktigheten av övergången eller animeringen;
fånga upp animationer och övergångshändelser och gör vad du vill med dem;
visualisera ändringar i CSS-egenskapen.

Det är här likheterna slutar och börjar...

Skillnader

Skillnaderna mellan animationer och övergångar visas när du börjar köra dem. Skillnaderna ligger också i hur lätt/svårt det är att programmera övergången/animeringen och hur lätt det är att styra det hela via JavaScript. Låt oss undersöka dessa skillnader mer i detalj.

Lansera

En av de största skillnaderna mellan övergångar och animationer är hur de utlöses.

Övergången utlöses när någon CSS-egenskap ändras. Den vanligaste användningen av pseudoklassen :hover är att ändra värdet på en CSS-egenskap:

Exemplet ovan använder en övergång och resultatet blir att cirkeln expanderar med en viss mängd när du håller muspekaren över den. Ett annat sätt att utlösa övergången är använder JavaScript att programmatiskt lägga till eller ta bort CSS-klasser för att simulera ändrade värden CSS-egenskaper. Och slutligen kan du med använder JavaScript ställ in en inline-stil som ändrar CSS-egenskapen som "lyssnar" på din övergång.

Animation, till skillnad från övergångar, kräver inte explicit triggning. Om animeringen har definierats börjar den fungera automatiskt.

Med en befintlig egenskap kan animeringen ställas in på pausstatus, vilket innebär att den kommer att vara inaktiv tills egenskapen är inställd på körstatus. W3C beslutade att ta bort den här egenskapen, så den finns inte längre.

Slingor

Det är väldigt enkelt. Animationen kan enkelt återskapas genom att ställa in egenskapen animation-iteration-count. Du kan ställa in valfritt fast nummer för att upprepa animeringen som du vill:

animation-iteration-count: 5;

Om du vill att din animation ska upprepas oändligt, ställ in den på följande värde:

animation-iteration-count: oändlig;

Övergångar har å andra sidan ingen egenskap som anger hur många gånger de kommer att upprepas. När den väl har startat upprepas övergången endast en gång. Du kan loopa en övergång med transitionEnd-händelsen, men jämfört med animering är det inte alls lika lätt.

Definiera mellanliggande punkter/nyckelramar (nyckelrutor)

Med animering kan du definiera nyckelrutor som ger dig mer kontroll över CSS-egenskapsvärden än bara start- och slutpunkten:

Du kan ställa in valfritt antal nyckelbildrutor. När animationen spelas upp kommer varje bildruta att ändras på rätt sätt fastighetsvärden. Detta gör att du kan implementera en mängd olika animationer som gör att HTML5 kan konkurrera med och till och med överträffa animationstekniker som Flash.

När du använder övergångar har du inte mycket kontroll över slutresultatet:

Övergången sker från startpunkten till slutpunkten. Du kan inte definiera mellanliggande punkter som du kan med animering, så en övergång kanske inte är ett bra val om du vill ha en komplex animation som den här.

Explicit definiera animerbara egenskaper

Nästa sak jag vill prata om är att uttryckligen definiera animationer och övergångar på CSS-egendomsvärden.

Ur en formell synvinkel, om du har en övergång, måste varje CSS-egendom du vill animera med den vara explicit definierad.

Till exempel har du följande övergång:

#mainContent ( bakgrundsfärg: #CC0000; transition:background-color .5s ease-in; ) #mainContent:hover ( cursor: pointer; background-color: #000000; width:500px; )

I koden ovan, anges olika betydelser egenskaper för bakgrundsfärg och bredd. Det är dock bara egenskapen bakgrundsfärg som har en explicit övergång. Detta innebär att webbläsaren endast kommer att animera ändringen i egenskapen bakgrundsfärg.

Om det är nödvändigt att båda egenskaperna - bakgrundsfärg och bredd - ska animeras, bör detta uttryckligen definieras:

#mainContent ( bakgrundsfärg: #CC0000; transition:background-color .5s ease-in, width .5s ease-in ) #mainContent:hover ( markör: pekare; bakgrundsfärg: #000000; bredd: 500px; )

Hur är det med parametern "alla" när du definierar en övergång?

I verkligheten finns det inget behov av att definiera varje animerad egenskap när man deklarerar en övergång. Du kan göra ditt liv enklare om du använder värdet "alla" istället för att beskriva specifika egenskaper, till exempel: transition: all .5s ease-in . Detta rekommenderas dock inte eftersom detta tillvägagångssätt är skadligt för prestanda.

I det här fallet tittar webbläsaren efter alla egenskaper som kan animeras, istället för att titta efter de som är explicit specificerade. Om du inte behöver använda parametern "alla", rekommenderas det att specificera alla animerade egenskaper separat.

Med hjälp av animering kan du definiera mellanliggande egenskapsvärden med nyckelbildrutor på vilket sätt du vill:

keyframes imageSlide ( 0% (vänster: -150px; ) 20% (vänster: 50px; höjd: 200px; ) 80% (vänster: 200px; höjd:300px; ) 100% (vänster: 600px; bakgrundsfärg: #FFFFFF; ) )

I exemplet ovan kommer egenskaperna för höjd och bakgrundsfärg att ändras smidigt beroende på vissa nyckelramar, även om någon egendom inte har deklarerats tidigare!

Interoperabilitet med JavaScript

I de flesta fall gör övergångar och animationer sitt jobb ganska bra. Du definierar start- och slutpunkterna, samt mellanpunkterna, vars värden CSS-egenskaperna ska ta. Din animering eller övergång kommer att läsa dessa värden och se till att allt följer instruktionerna exakt.

Det här skriptet fungerar bäst när du vet exakt vilket resultat du vill uppnå. Det kan dock hända att du behöver ändra värdena som används för animeringen enligt vissa extern källa- till exempel ett musklick, resultatet av en extern beräkning och liknande.

Fördefinierade värden i CSS är inte lämpliga för denna interaktion. Du kan lita på användningen av JavaScript, men att fullt ut implementera animering i det är en ganska svår uppgift. Mest optimal lösning i denna situation kommer det att finnas användning hybrid tillvägagångssätt. Detta innebär att animeringen eller övergången deklareras använder CSS, men vissa aspekter ändras dynamiskt via JavaScript.

När det kommer till JavaScript-interaktioner och animationer/övergångar, då kommer du nästan alltid att använda övergångar. När man kombinerar animation och JavaScript... är det nästan omöjligt att få animationen att fungera ordentligt.

Animation är mycket specifik för att skapa en koppling med JavaScript. Kommandot @keyframes definierar tydligt en animeringssekvens som startar omedelbart efter att sidan har laddats. Att försöka ändra en given animering via JavaScript skulle kräva en mycket komplex serie av steg, inklusive modifiering av själva @keyframes-stilregeln. Om du någonsin har försökt ändra CSS-egenskaper i en stilregel, så förstår du troligen komplexiteten i denna procedur.

Motsatsen till animation i denna mening är övergång. Övergångarna är inte så tydligt definierade. En övergång utlöses när en viss egenskap ändras. Ändra den här egenskapen kan ställas in helt via CSS:

#myElement ( bakgrundsfärg: #FFF; övergång: bakgrundsfärg .2s ease-in; ) #myElement:hover ( bakgrundsfärg: #000; )

Denna ändring kan göras via JavaScript: du kan ändra CSS-egenskapen som "lyssnar" efter din övergång genom att komma åt den inline-stilen:

var myElement = document.querySelector("#myElement"); myElement.style.backgroundColor = "333";

Övergången uppmärksammar inte hur värdena på de "avlyssnade" fastigheterna ändras. Så länge värdet ändras kommer övergången att fungera. Det betyder att du kan göra många intressanta saker med interaktiva skript som inte är begränsade av stela start- och slutpunkter. Önskad övergångsegenskapsvärden kan ställas in via JavaScript.

För att bättre förstå vad vi pratar om, titta på det här enkla exemplet:

Klicka var som helst på den grå formen och cirkeln flyttas till den punkten.

Det här exemplet fungerar helt enkelt. Cirkelns rörelse hanteras med en CSS-övergång. Koordinaterna för den punkt dit cirkeln ska flyttas överförs dock via JavaScript. Eftersom övergången "lyssnar" på koordinater leder varje förändring i dem till att denna övergång lanseras. Slutresultat fungera precis som det var tänkt.

Det bästa är att du inte behöver skriva någon JavaScript-kod för att implementera själva övergången. Slutligen, eftersom stöd för övergångar är inbyggt i CSS-standarden och därmed webbläsaren, är animeringen mycket smidig.

Denna vänskap mellan övergångar och JavaScript är mycket stark, så du bör dra full nytta av den.