Hvordan lage animasjoner og overganger med Motion UI

Animasjoner og overganger tillater designere å visualisere endring og skille mellom innhold. Animasjoner og overganger er bevegelige effekter som hjelper brukere å gjenkjenne når noe endres på nettstedet, for eksempel de klikker på en knapp og et nytt stykke informasjon vises på skjermen. Å legge til bevegelse til apper og nettsteder forbedrer brukeropplevelsen, da det gir brukerne mulighet til å gi mening på en mer intuitiv måte .

Vi kan lage animasjoner og overganger enten fra grunnen av eller ved hjelp av biblioteker eller rammer. Gode ​​nyheter for oss, frontend folk, er at Zurb, skaperen av Stiftelsen, i oktober i oktober åpnet Motion UI, animasjons- og overgangsbiblioteket basert på Sass.

Den ble opprinnelig bunket med Foundation for Apps, og nå, for den frittstående utgivelsen, fikk den en revolusjon, inkludert et animasjonskøysystem og fleksible CSS-mønstre . Motion UI styrer også enkelte komponenter i Foundation-rammeverket, for eksempel Orbit-skyveknappen, Toggler-bryteren og Reveal Modal, så det er et ganske robust verktøy.

Starter

Selv om Motion UI er et Sass-bibliotek, trenger du ikke nødvendigvis å bruke det med Sass, da Zurb gir utviklere et praktisk startpakke som bare inneholder kompilert CSS. Du kan laste den ned fra Motion UIs hjemmeside, og raskt begynne å prototype ved å bruke forhåndsdefinerte CSS animasjon og overgangsklasser.

Startpakken inneholder ikke bare Motion UI, men også Foundation Framework, som betyr at du kan bruke Foundation grid og alle de andre funksjonene til Foundation for Sites hvis du vil.

Startpakken leveres også med en index.html fil som lar deg raskt teste rammen.

Hvis du trenger mer sofistikerte justeringer og ønsker å utnytte Motion UIs kraftige Sass mixins, kan du installere den fullstendige versjonen som inneholder kilde. .scss filer med npm eller Bower.

Motion UIs dokumentasjon er foreløpig halvfabrikert. Du kan finne den her på Github, eller bidra til det hvis du vil.

Rask prototyping

For å starte prototyping, kan du redigere index.html filen til startpakken, eller lage din egen HTML-fil. Du kan bygge oppsettet ved hjelp av Foundation grid, men Motion UI kan også brukes som et frittstående bibliotek uten Foundation Framework.

Det er 3 hovedtyper av forhåndsdefinerte CSS-klasser i Motion UI:

1. Overgangsklasser - gjør det mulig å legge til overganger, for eksempel glidende, fading og hengselvirkninger til et HTML-element.
2. Animasjonsklasser - gjør det mulig å bruke forskjellige rystelser, wiggling og spinning effekter
3. Modifierings klasser - samarbeide med både overgangs- og animasjonsklasser, og de lar deg justere hastigheten, timingen og forsinkelsen av en bevegelse.

Bygg HTML-koden

Det gode med forhåndsdefinerte CSS-klasser er at de ikke bare kan brukes som klasser, men også som andre HTML-attributter. For eksempel kan du legge dem til value attributtet til tag, eller du kan bruke dem i ditt eget tilpassede data-* attributt også.

I kodebiten nedenfor valgte jeg dette sistnevnte alternativet for å skille adferd og modifikator klasser . Jeg brukte egenskapene til slow og ease modifikatorer som klasser, og opprettet et tilpasset data-animation for scale-in-up overgangen. Click me knappen er ment å utløse effekten.

 Klikk på meg 




        

          
          

		  
Slik lager du CSS Gradient Border Colours
            
Denne artikkelen er en del av vår "HTML5 / CSS3 Tutorials Series" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her for å se flere artikler fra samme serie. Med alle de nye funksjonene i CSS3, er vi nå i stand til å bygge bildeløse nettsteder. Tidligere var bruken av bildet uunngåelig når det gjelder å vise gradientfarger. I dag bl
			
(Tekniske og design tips)
          
        
      

        

          
          

		  
360cam - Verdens første Full HD 360 ° kamera
            
Fotografier og videoer er gode måter å fange øyeblikk og opplevelser på, men begge har alltid vært begrenset av et viktig aspekt: ​​hvor kameraet peker. Det er litt i strid med hvordan vi som mennesker opplever verden; det skjer ofte så mye rundt oss som videoer og bilder bare ikke kan fange .Selv om d
			
(Tekniske og design tips)
          
        
      

  
  
  



Interessante Artikler






			
	
				

					Googles oppdaterte Reisetjenester lar brukerne bestille billige flyreiser og hotellrom
					

			
	
				

					15 Email Logo Designs for din inspirasjon
					
						







			
	
				

					Møt Gooligan, skadelig programvare som øker Google Play-apprangeringen
					

			
	
				

					UI-bevegelse - Awesome Interface Animasjoner for deg Inspirasjon