Paradis For Designere Og Utviklere

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:

Overgangsklasser - gjør det mulig å legge til overganger, for eksempel glidende, fading og hengselvirkninger til et HTML-element.
Animasjonsklasser - gjør det mulig å bruke forskjellige rystelser, wiggling og spinning effekter
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

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.

  




        
          
          
		  10 Vakkert utformede Youtube-kanaler
            YouTube er et av de mest populære nettstedene som sannsynligvis aldri vil dø. Bedrifter, som realiserer dette, har begynt å skape profesjonelle kanaler for sine selskaper, hovedsakelig for markedsføringsarbeid.Hvis du planlegger å starte en YouTube-kanal som en markedsføringskampanje, ta deg tid til å lære av det beste. Unders
			(Tekniske og design tips)
          
        
      

        
          
          
		  iPad Bakgrunnsbilder til Video Gamers
            Hvis du eier en iPad, har du mest sannsynlig eksperimentert med sine mange funksjoner. En av de flotte funksjonene er muligheten til å tilpasse og tilpasse iPad til å gjenspeile din personlighet som kan gjøres ved å velge et bakgrunnsbilde som reflekterer hvem du er.Og hvis du er en gamer, så vil du elske alle spill-tema bakgrunnsbilder tilgjengelig på iPad. Vi h
			(Tekniske og design tips)
          
        
      

  
  
  

Interessante Artikler






				
				

					Slik kjører du blogger som inspiserer
					

				
				

					Realistiske IOS Appikoner for din inspirasjon
											







				
				

					Logg inn Passordfri til alle Microsoft-kontoer ved hjelp av telefonen
					

				
				

					Formater Input Fields automatisk med Cleave.js