na de release van iOS 7 (en iOS 8 ook), animatie en beweging effecten werden centraal in het ontwerp van apps van zowel Apple en 3rd party ontwikkelaars. iOS 7 introduceerde een platte, minimale ontwerp om apps die onvermijdelijk resulteerde in sommige apps met een soortgelijke UI. Om hun apps van andere apps te onderscheiden, gebruikten ontwikkelaars functies zoals animaties en bewegingseffecten om hun apps te laten opvallen.

niet alleen worden animaties gebruikt om uw app apart te zetten, ze kunnen de algehele gebruikerservaring van uw applicatie verbeteren. Voor goede voorbeelden van hoe animaties worden gebruikt om UX te verbeteren, moet u kijken naar hoe Apple animaties gebruikt in hun apps. Wanneer u bijvoorbeeld in de app Foto ‘ s een foto uit een verzameling selecteert, wordt de foto uit de geselecteerde foto geëxploreerd en bij het sluiten krimpt de foto terug naar de geselecteerde foto. Dit draagt bij aan de navigatie van de app in dat het laat je precies weten waar je was, als bladeren veel foto ‘ s.

Facebook ‘ s Paper maakt ook gebruik van animaties prachtig toe te voegen aan de algemene gebruikerservaring van de app. U selecteert een artikel om te lezen door het te spiegelen. Deze actie, het feit dat het artikel zich uitbreidt van zijn miniatuurversie, suggereert dat door het tegenovergestelde te doen, dat wil zeggen het artikel naar beneden te spiegelen, het terug zou krimpen tot zijn miniatuurweergave. Hier, animatie wordt gebruikt om over te brengen hoe de app werkt en zelfs een eerste keer gebruiker van de app zou binnenkort in staat zijn om veronderstellingen over het gebruik ervan te maken en erachter te komen de navigatie zonder dat een tutorial.

animaties dragen niet alleen bij aan de gebruikerservaring van de app, maar ze kunnen ook uw gebruikers plezieren en imponeren, waardoor ze een herhaald gebruik garanderen in plaats van de app te verwijderen voor een betere app uit de App Store.

er zijn tal van manieren om animaties in uw apps op te nemen, sommige zijn door gebruik te maken van UIKit Dynamics, layer animaties, view controller overgangen of door gebruik te maken van een bibliotheek van derden zoals de Facebook Pop library of JNWSpringAnimation framework.

in deze tutorial gaan we kijken naar eenvoudige weergave animaties. U kunt het starter project dat is een enkele weergave applicatie met een tabelweergave die een lijst van de voorbeelden gepresenteerd in de tutorial tutorial. Ik zal dit gebruiken als we bij het gedeelte voorbeelden van de tutorial komen, in plaats van vanaf nul te beginnen.

de handleiding begint met een samenvatting van API ’s die worden gebruikt om weergaven te animeren, en eindigt met enkele voorbeelden die het gebruik van sommige API’ s in een app laten zien.

basisweergave animaties

animaties maken op uw weergaven is een kwestie van het veranderen van eigenschappen op hen en UIKit ze automatisch laten animeren. De eigenschappen die we veranderen zijn die gemarkeerd Animeerbaar.

de volgende lijst toont de animeerbare eigenschappen.

  • center
  • alpha
  • frame
  • grenzen
  • transform
  • backgroundColor
  • contentStretch

u zult zien dat alle animaties een wijziging van een of meer van de bovenstaande eigenschappen inhouden.

voor eenvoudige weergave-animaties biedt UIKit de volgende API ‘ s die kunnen worden gebruikt om weergaven op het scherm te animeren.

de eerste heeft twee parameters – een waarde voor de duur in seconden van de animatie en een sluiting waarin u de eigenschappen opgeeft die u wilt wijzigen. UIKit zal de oorspronkelijke toestand van de weergave nemen en een soepele overgang van die toestand naar de eindtoestand maken volgens wat je hebt opgegeven in de animatieafsluiting.

de andere twee API ‘ s zijn vergelijkbaar met de eerste, maar ze nemen extra parameters die meer configuratie toevoegen aan de animatie. De tweede neemt een voltooiing sluiting die u kunt gebruiken om een andere animatie die u wilt gedaan na de eerste opgeven of u kunt doen wat opruimen van de UI, bijvoorbeeld, het verwijderen van een weergave uit de view hiërarchie zodra een andere weergave is geanimeerd op de scène.

de derde API neemt twee extra parameters – de vertraging, dat is de tijd om te wachten voordat de animatie start en opties, een UIViewAnimationOptions constante, die aangeeft hoe u de animaties wilt uitvoeren. Het volgende toont de beschikbare opties.

Lente-animaties

Lente-animaties proberen het gedrag van een echte veer te modelleren, in die zin dat wanneer een beeld van het ene punt naar het andere wordt verplaatst, het naar het einde zal stuiteren/oscilleren voordat het zich op zijn plaats vestigt.

hieronder staat het methodeblok dat we gebruiken voor spring animaties.

  • UIView.animatewith duration (_:, delay:, usingSpringWithDamping:, initialSpringVelocity:, options:, animations:, completion:)

het bovenstaande is vergelijkbaar met de methoden die we eerder bekeken behalve voor twee nieuwe parameters – usingSpringWithDamping en initialSpringVelocity. Demping is een waarde van 0 tot 1 die bepaalt hoeveel de weergave stuitert naar het einde van de animatie. Hoe dichter bij 1 de waarde is, hoe minder veerkracht het zal zijn. initialSpringVelocity zoals de naam al zegt, bepaalt de beginsnelheid van de animatie. Dit bepaalt hoe sterk de animatie begint. Als je wilt dat het krachtig begint, stel dan een grotere waarde in, als je een vloeiende animatie wilt, dan kun je de waarde instellen op 0.

Keyframe-animaties

Keyframe-animaties stellen u in staat om verschillende stadia van een animatie in te stellen. U kunt verschillende animaties groeperen die een aantal gemeenschappelijke eigenschappen delen, maar nog steeds in staat zijn om ze afzonderlijk te beheren.

in plaats van een animatie die gewoon langs een pad beweegt, zal UIKit de verschillende stadia van de animatie uitvoeren.

de Keyframe animatie API ‘ s zijn als volgt.

de bovenstaande twee methoden worden samen gebruikt, de tweede wordt genest in de animatieafsluiting van de eerste.

de eerste methode stelt de algemene configuratie van de animatie in, zoals hoe lang het duurt, vertraging en de opties. U definieert dan een of meer van de tweede methode(de frames) binnen de animatie sluiting om de verschillende stadia van de animatie in te stellen.

de relatieve starttijd en relatieve duur van elk frame is een waarde tussen 0 en 1 die het percentage tijd binnen de totale duur van de animatie uitdrukt.

Weergaveovergangen

Weergaveovergangen worden gebruikt wanneer u een nieuwe weergave aan uw weergavehiërarchie wilt toevoegen of een weergave uit de weergavehiërarchie wilt verwijderen.

de API ‘ s die worden gebruikt om weergaveovergangen aan te maken zijn

u gebruikt de eerste om een weergave in de weergavehiërarchie te introduceren. De methode neemt soortgelijke parameters als we hebben gezien in de andere animatie methoden.

de tweede wordt gebruikt om één beeld vanuit de beeldhiërarchie te nemen en een nieuwe weergave op zijn plaats te plaatsen.

voorbeelden

we zullen nu een paar voorbeelden bekijken die enkele van de bovenstaande API-aanroepen gebruiken om weergaven in het gegeven starterproject te animeren.

voorbeeld I

als u het project uitvoert, zult u een tabelweergave zien met de voorbeelden waar we doorheen zullen werken. Selecteer voorbeeld I in de lijst en je zou een Login scherm van een app moeten zien met de gebruikersnaam en wachtwoord velden en login knop.

we willen dat deze worden geanimeerd op het scherm wanneer de app start.

om te beginnen verbergen we de weergaven uit het zicht wanneer de weergave voor het eerst verschijnt. Voordat Auto lay-out, zou dit een eenvoudige kwestie zijn geweest van het wijzigen van de positie van de specifieke weergave in code, maar omdat we automatische lay-outbeperkingen instellen op de weergaven in het storyboard-bestand, moeten we de beperkingen in code wijzigen, waardoor de positie van de weergave wordt gewijzigd.

eerst moeten we een referentie krijgen van de beperkingen die we zullen veranderen. Open het storyboard-bestand. Zoek de volgende beperkingen in de Scene van voorbeeld I.

Open de assistent Editor, en zorg ervoor dat het de ExampleIViewController.swift die naast het storyboard op het split-scherm verschijnt. Sleep vanuit het centrum x Alignment – View – Username beperking naar de ExampleIViewController klasse. Maak een outlet met de naam centerAlignUsername. Doe hetzelfde voor het Center X Alignment-View-Password en stel de naam in op centerAlignPassword. Maak ook een outlet voor de login knop met de naam loginButton en een actie voor dezelfde knop en de naam login. Zorg ervoor dat u het type actie instelt op UIButton. Je moet het volgende in code hebben.

1
2
3
4
5
6
7

@IBOutlet weak var centerAlignUsername: NSLayoutConstraint!
@iboutlet zwakke var centeralignwachtwoord: NSLayoutConstraint!
@iboutlet zwakke var loginButton: UIButton!
@IBAction func login (afzender: UIButton) {
}

In de ExampleIViewController.swift voeg de volgende methode toe die wordt aangeroepen voordat de weergave op het scherm wordt gepresenteerd.

hiermee worden de velden gebruikersnaam en wachtwoord net buiten beeld gebracht en wordt de alpha-waarde van de knop op 0 gezet, waardoor deze onzichtbaar wordt.

voeg de volgende methode toe die rechts wordt aangeroepen wanneer de weergave verschijnt.

hier gebruiken we de UIView.animateWithDuration () methode die we eerder zagen. Wij omvatten de Uiviewanimationopties.Curveaseout optie die de animatie snel start dan vertragen aan het einde. U kunt hier experimenteren met verschillende opties. Command-klik op UIViewAnimationOptions om alle beschikbare opties te zien.

de animatie duurt 0,5 seconden en start onmiddellijk. Je hebt Vrijheid over de duur, maar je moet niet zo ‘ n groot aantal in te stellen om uw gebruikers te ergeren wanneer animaties op uw app lijken te lang duren. Normaal gesproken is de duur ingesteld tussen 0.5 en 0.7 seconden, maar zoals ik al zei, Dit is niet in steen gezet en je hebt de vrijheid om het in te stellen op wat goed voor je voelt.

de animatie doet precies het tegenovergestelde van wat we deden in viewwillloppear (). layoutIfNeeded () wordt gebruikt om de weergaven op te maken zodra ze worden gewijzigd. Als je het niet opneemt, zie je ze niet op het scherm geanimeerd worden, in plaats daarvan worden ze alleen in hun uiteindelijke positie getoond. Voer de app, en je moet het volgende te zien.

het bovenstaande ziet er interessanter uit dan een statische presentatie, maar de weergaven die tegelijkertijd geanimeerd worden, creëren niet zo ‘ n groot effect. Wijzig de methode zoals hieronder getoond.

Voer de app uit en de resulterende animatie heeft de weergaven die op verschillende tijdstippen op het scherm worden geanimeerd. Kijkend naar de code, kun je zien dat na het eerste animatieblok, we een vertraging instellen op de volgende.

In login schermen, wanneer het Inloggen mislukt, is er meestal een animatie die de gebruiker aangeeft dat het inloggen is mislukt. Dit wordt soms gedaan als een schudden van de tekstvelden of de login knop, en een bericht dat de gebruiker laat weten dat het inloggen is mislukt. We zullen een dergelijk effect toevoegen aan de login knop met behulp van veren. Wijzig de login () functie zoals getoond.

het bovenstaande verandert de grootte van de aanmeldknop wanneer deze wordt ingedrukt en animeert de actie met een lente-animatie die ervoor zorgt dat de breedte van de knop aan het einde een beetje uitzet en weerkaatst voordat de knop bezinkt.

speel rond met de dempingswaarde. Als je het instelt op 1, zal de knop uitzetten, zonder stuiteren aan het einde. U kunt dezelfde methode ook gebruiken in de velden gebruikersnaam en wachtwoord. In plaats van dat ze op het scherm komen en gewoon stoppen op hun plaats aan het einde, hebben ze lente-achtige en stuiteren een beetje voor de afwikkeling.

voorbeeld II

in uw app moet u mogelijk de achtergrondafbeelding van een weergave automatisch vervangen wanneer er een actie plaatsvindt. Je zou het kunnen doen op een manier waarbij een afbeelding onmiddellijk een andere op de weergave vervangt, of je zou het langzaam kunnen vervagen om een mooie overgang te creëren. We zullen dit effect hier creëren. Open ExampleIIViewController.swift en voeg het volgende toe.

hier maken we een afbeeldingsweergave en voegen deze toe aan de hoofdweergave. We noemen dan imageFadeIn () wat een tweede weergave creëert met een ander beeld. We voegen deze weergave toe boven de eerste beeldweergave en zetten de alpha op 0. In het animatieblok animeren we de alfa-waarde, waardoor het zichtbaar wordt. Vervolgens gebruiken we een voltooiingssluiting om de afbeelding van de afbeeldingsweergave in te stellen op de tweede afbeelding en verwijderen we de tweede afbeeldingsweergave uit de weergavehiërarchie omdat deze niet langer nodig is. Ik heb een lange vertraging toegevoegd, zodat de animatie niet meteen gebeurt op het moment dat we voorbeeld II uit de tabelweergave selecteren. De duur is ook wat lang zodat we kunnen zien wat er aan de hand is in de demo.

het volgende is het effect.

voorbeeld III

hierna zullen we kijken naar keyframe animaties. Open Exampleiiiiviewcontroller.swift en voeg de volgende variabele en functies aan het bestand. Ik heb commentaar gegeven op de code om elke stap uit te leggen.

in viewDidLoad() roep de functie createView() aan. Voeg het volgende toe aan de onderkant van viewDidLoad ().

1
createView()

bij het uitvoeren van de app en het selecteren van voorbeeld III uit de tabel weergave, moet u een rode weergave met een beeldweergave aan de bovenkant en een knop in het midden te zien.

We willen de view (die ik vanaf nu de alertView zal noemen) laten krimpen in grootte en naar beneden uit het zicht vallen.

toen we de knop maakten, hebben we er een luisteraar aan toegevoegd. Wanneer op de knop wordt getikt, wordt disposalert() aangeroepen. Wijzig de functie zoals getoond.

in de bovenstaande code maken we frames die vertegenwoordigen wat we willen voor de twee fasen van het animeren van de weergave. smallFrame krimpt tot de helft van de grootte van alertView, behoud van het middenpunt en finalFrame heeft een positie aan de onderkant van het scherm, uit het zicht.

we gebruiken een Keyframe animatie met twee keyframes. De eerste zet alertview ‘ s frame op smallFrame en de tweede op finalFrame. Het resultaat zal zijn dat de alertView zal krimpen tot de helft van zijn grootte en dan uit het zicht vallen. Merk op dat ik zo ‘ n groot aantal heb gezet voor de duur – 4 seconden. Je kunt dit veranderen, Ik wilde alleen de animatie draaien in slow-motion voor de demo. Voer de app uit en selecteer voorbeeld III.

de animatie is niet helemaal wat we verwacht hadden. U kunt de red alertView animeren zoals verwacht, maar de schaal van de kinderen verandert niet. Het veranderen van het frame van de ouder verandert niet automatisch de frames van de kinderen.

we zullen een functie gebruiken die geïntroduceerd is in iOS 7 genaamd UIView snapshots om de animatie te repareren. Hiermee kunt u een snapshot maken van een UIView samen met zijn hiërarchie en deze weergeven in een nieuwe UIView.

in disposalert() voeg het volgende toe vlak voor de Keyframe animatiecode.

1
2
3
4

laat snapshot = alertView.snapshotViewAfterScreenUpdates (false)
snapshot.frame = alertView.frame
beeld.addSubview (snapshot)
alertView.verwijderenromsuperview()

hier maken we een Snapshotweergave en voegen deze toe aan de hoofdweergave. We verwijderen vervolgens de alertView uit de weergave, omdat de snapshot Deze zal vervangen.

Vervang de Keyframe animatie door de volgende.

Voer de toepassing uit en als u op ‘verwerpen’ tikt, moet de weergave(snapshot, echt) animeren zoals verwacht.

voorbeeld IV

we hebben gekeken hoe u eenvoudige weergaven kunt animeren. In dit voorbeeld bekijken we hoe je een tabelweergave kunt animeren.

als u Voorbeeld IV selecteert in de tabelweergave, vindt u een andere tabelweergave met een lijst met items erin. Wanneer de tabelweergave wordt weergegeven, worden de lijstitems al op de tabel geplaatst. We willen ze animeren op het uitzicht om een interessanter effect te creëren.

Open ExampleIVViewController.swift en voeg de volgende methoden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

overschrijven func viewWillAppear(animated: Bool) {
animateTable()
}
func animateTable () {
tableView.reloadData()
laat cellen = tableView.visibleCells()
let tableHeight: CGFloat = tableView.ondergrenzen.grootte.hoogte
voor i in cellen {
laat cel: UITableViewCell = i als UITableViewCell
cel.transform = Cgaffinetransformmaktransformatie (0, tafelhoogte)
}
var-index = 0
voor A in cellen {
laat cel: UITableViewCell = a as UITableViewCell
UIView.animatie met duur (1.5, vertraging: 0.05 * dubbel (index), gebruiksspring metdamping: 0.8, beginspringvelocity: 0, opties: nihil, animaties: {
cel.transform = Cgaffinetransformmaketransformatie(0, 0);
}, voltooiing: nihil)
zaakregister += 1
}
}

hier, wanneer de weergave verschijnt, wordt de functie animateTable() aangeroepen. We herladen de tabelweergave gegevens en loop door de cellen die momenteel zichtbaar zijn op het scherm en verplaatsen elk van hen naar de onderkant van het scherm. We herhalen dan alle cellen die we naar de onderkant van het scherm verplaatsten en animeren ze terug naar positie met een lente-animatie.

Voer de app uit en u ziet het volgende.

conclusie

we hebben verschillende API ‘ s bekeken die u kunt gebruiken om animaties toe te voegen aan de weergaven van uw app. Dit is niet een uitputtende gids over Animatie in iOS, maar met behulp van de eenvoudige API ‘ s die we hebben gekeken naar, kunt u verschillende animaties in uw apps. Om verder in iOS-animaties te duiken, kun je kijken naar UIKit-dynamiek, laaganimaties, weergavecontrollerovergangen en zelfs bewegingseffecten. Je zou ook kunnen kijken naar bibliotheken van derden zoals Facebook Pop en JNWSpringAnimation framework die u kunnen helpen ingewikkelde animaties gemakkelijker te bouwen.

u kunt het voltooide project hier downloaden.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.