Share
Met deze snelle iOS-tip leer je hoe je voorwerpen eenvoudig kunt animeren met UIKit. Of je nu schuifmenu's of vliegende apen nodig hebt, het is gemakkelijk om het voor elkaar te krijgen, en deze tip zal je laten zien hoe!
Animatie in mobiele applicaties kan een zeer belangrijke functie zijn. Vanuit een praktisch UX-standpunt kan het de gebruiker laten weten dat er iets is gewijzigd of verplaatst. Vanuit een meer vermakelijk standpunt kan het spelsprites verplaatsen of kaarten over het scherm tikken, waardoor de gebruiker een volledig interactieve ervaring krijgt.
Gelukkig is het heel gemakkelijk om UIView-objecten in uw iOS-apps te laten rondlopen en hoeft u zich zelfs geen zorgen te maken over het berekenen van cryptische geometrische vergelijkingen of andere dergelijke voodoo!
Voordat we aan de daadwerkelijke animatie beginnen, moeten we bekend zijn met de basisanimatie-eigenschappen van UIView-objecten. Het volgende is een lijst met alle eigenschappen van iOS 5.1:
We hebben niet genoeg ruimte in deze snelle tip om al deze eigenschappen te bespreken, maar we zullen een paar van de meest voorkomende bekijken: centrum, alpha en transformatie.
[UIView animateWithDuration: (NSTimeInterval) animaties: ^ (ongeldige) animaties]
In de meest eenvoudige vorm is het bovenstaande alles wat je nodig hebt om een UIView te animeren. Het is vrij eenvoudig - geef een duur door (hoe lang de animatie duurt) en vervolgens de eigenschappen die moeten worden geanimeerd (de waarden die u aan het einde van de animatie wilt hebben van de eigenschappen van de UIView).
Voor een snel voorbeeld, als we een UIView hebben die "theView" heet, en we willen het laten vervagen totdat het binnen een 0,5 seconde duur onzichtbaar is, zouden we bellen:
[UIView animateWithDuration: 0.5f animations: ^ [theView setAlpha: 0.0f]; ];
En we zijn klaar! De duur van de animatie wordt bepaald door de animateWithDuration: parameter en een Objective-C-blok van specifieke animatie-acties wordt geleverd aan de animaties: parameter. Het is zo eenvoudig!
Vaak willen we iets doen nadat de animatie is voltooid. We nemen bijvoorbeeld een spel. Laten we zeggen dat we een speler willen laten zien dat ze een actie succesvol hebben voltooid. We doen dit door een ster omhoog te laten vliegen in de linkerhoek van het scherm, waarna een punt wordt toegevoegd aan hun score. Er zijn twee dingen die we willen doen als de ster is afgelopen met vliegen:
Om dit te doen, zullen we onze animatiemethode bellen met een voltooiingsblok, zoals dit:
[UIView animateWithDuration: (NSTimeInterval) animaties: ^ (ongeldig) animaties voltooien: ^ (BOOL voltooid) voltooien];
Als we bijvoorbeeld een UIImageView (dat wil zeggen een subklasse van UIView) genaamd "starImageView" hebben, met een afbeelding van een ster en een numerieke variabele genaamd "punten", zouden we bellen:
[UIView animateWithDuration: 0.7f animations: ^ [starView setCenter: CGPointMake (0, 0)]; voltooiing: ^ (BOOL voltooid) [starView removeFromSuperView]; points ++; ];
Het is vermeldenswaard dat we onze "starView" opnieuw moeten toevoegen als een subweergave van onze UIView als we deze animatie opnieuw willen uitvoeren. Je kunt dit zien in de voorbeeldcode die als bijlage bij deze Mobiletuts + tutorial is meegeleverd.
Ten slotte is er een methode waarmee we nog meer details over ons animatieproces kunnen definiëren, waaronder een vertraging voordat de animatie wordt uitgevoerd en het type "easing" instellen voor onze animatie. Deze "easing" -typen kunnen worden gevonden (en beschreven) in het UIView.h header-bestand als enums:
typedef enum UIViewAnimationCurveEaseInOut, // slow aan het begin en einde UIViewAnimationCurveEaseIn, // slow aan het begin UIViewAnimationCurveEaseOut, // slow at end UIViewAnimationCurveLinear UIViewAnimationCurve;
Ik zou je willen aanmoedigen om ermee te spelen, door ze in de parameter "options" van de volgende animatiemethode te plaatsen:
[UIView animateWithDuration: (NSTimeInterval) delay: (NSTimeInterval) options: (UIViewAnimationOptions) animaties: ^ (ongeldig) animaties completeren: ^ (BOOL finished) completion];
En nogmaals, als we onze vorige voorbeelden gecombineerd gebruiken, zullen we onze animatie met 0,1 seconde vertragen, beginnen met bewegen (eerst langzaam, dan versnellen, en dan weer langzaam aan het einde). Ook, terwijl we ons imago verplaatsen, vervagen we tot 0% dekking. Eindelijk, nadat onze animatie is afgelopen, voegen we een punt toe aan onze score en verwijderen we de afbeelding uit onze UIView.
[UIView animateWithDuration: 0.6f delay: 0.1f options: UIViewAnimationCurveEaseInOut animations: ^ [starView setCenter: CGPointMake (0, 0)]; [starView setAlpha: 0.0f]; completion: ^ (BOOL finished) [starView removeFromSuperview]; points ++; ];
Zoals je kunt zien, is het supereenvoudig om je UIViews geanimeerd te laten worden, dus neem wat tijd om te spelen met de verschillende animeerbare UIView-objecten en ontdek welke nieuwe dingen je kunt ontdekken!
Gebruik voor extra oefening de volgende opdracht om uw afbeelding te roteren:
[starView setTransform: CGAffineTransformRotate (starView.transform, 90.0f)];
Bekijk nu wat andere dingen mogelijk zijn met animaties voor UIViews! En onthoud, er zijn verschillende subklassen van UIView die kunnen worden geanimeerd met dezelfde methoden en eigenschappen, zoals (maar niet beperkt tot):
De sterafbeelding die in deze zelfstudie wordt gebruikt, is uitgegeven met een GNU / GPL-licentie van FindIcons
Accentsconagua