Een inleiding tot UIKit Dynamics

De nieuwe look en feel van de iOS 7-gebruikersinterface is sterk afhankelijk van subtiele animaties om gebruikers een sterker gevoel van directe manipulatie te geven. In deze zelfstudie geef ik u een overzicht van de UIKit Dynamics-klassen en hoe deze samenwerken.

1. Inleiding

Als u op het vergrendelingsscherm op het camerapictogram tikt, ziet u dat het scherm iets omhoog schuift om de camera-interface te onthullen voordat u terugvalt op zijn plaats met een zachte bult. Deze interactie is een subtiele hint dat u het vergrendelscherm omhoog kunt schuiven om toegang te krijgen tot de camera. Tegelijkertijd verzekert het je dat als het per ongeluk een korte afstand schuift, bijvoorbeeld, terwijl je telefoon in je zak of tas zit, je niet eindigt met een camerarol vol nutteloze foto's.

Door op het camera-pictogram te tikken, schuift het vergrendelscherm omhoog en wordt zichtbaar dat de camera erachter verborgen is.

Met behulp van UIKit Dynamics kunt u animaties aan uw eigen apps toevoegen zonder alles vanuit het niets te hoeven coderen. Er zijn honderden versies van het Hamburger Menu op GitHub. Met elk daarvan kunt u het scherm opzij schuiven om een ​​verborgen menu te onthullen en veel hebben een bounce-animatie bij openen en sluiten.

Het bounce-effect is echter door elke ontwikkelaar anders geïmplementeerd. Apple heeft het voor ontwikkelaars gemakkelijker gemaakt om deze laatste hand te leggen door een kader te bieden voor de fysieke interacties van elementen op het scherm. Met UIKit Dynamics hoeft u alleen maar op te geven hoe de elementen werken, niet de fysica van elke interactie te coderen.

Er zijn verschillende nieuwe klassen die je moet kennen. Ik zal je in dit artikel door ze laten leiden. In de volgende tutorial zal ik je laten zien hoe je ze kunt gebruiken in je eigen projecten.

2. Dynamische items

Elke klas die je wilt animeren, moet zich conformeren aan de UIDynamicItem protocol, wat in feite betekent dat het zijn grenzen, centrum en transformatieeigenschappen moet blootleggen. UIView en UICollectionViewLayoutAttributes, en hun subklassen voldoen standaard al aan het protocol. Als u alleen animaties aan uw bestaande interface wilt toevoegen, hoeft u zich waarschijnlijk helemaal niet te bemoeien met de componentenklassen. Als u iets meer exotisch gebruikt en veel aangepaste klassen hebt, moet u wat extra werk doen voordat u kunt beginnen met het gebruik van UIKit Dynamics..

3. Dynamisch gedrag

De manier om uw toepassing te laten weten hoe u uw dynamische items wilt laten samenwerken, is door een dynamisch gedrag te maken en dit te laten weten over de dynamische items. De UIDynamicBehavior klasse is direct beschikbaar, maar biedt zelf weinig functionaliteit. U kunt subclass UIDynamicBehavior om de toepassing te vertellen hoe de dynamische items moeten samenwerken, maar u wilt waarschijnlijk een van de vooraf gedefinieerde subklassen gebruiken die ervoor zorgen dat de dynamische items op verschillende manieren interacteren.

UIAttachmentBehavior

Bij een koppelingsgedrag worden dynamische items aan elkaar of aan een ankerpunt gerelateerd alsof ze met veren zijn verbonden. Wanneer een dynamisch item of het ankerpunt wordt verplaatst, wordt ook het bijgevoegde dynamische item verplaatst. Het koppelingsgedrag heeft verschillende eigenschappen, die kunnen worden geconfigureerd om het gedrag van de virtuele veer te regelen die de dynamische items verbindt.

• Demping: Bepaalt hoe snel de veer stopt met kaatsen nadat een van de items beweegt.
• Frequentie: Bepaalt hoe snel de veer terugkaatst wanneer een van de items beweegt.
• Lengte: Bepaalt hoe lang de veer is als deze niet meer stuitert.

Merk je op hoe de berichten uit elkaar vallen en samenbotsen in de Berichten-applicatie in iOS? De opening bij 1 neemt toe en de opening bij 2 wordt gesloten als het bericht over het scherm beweegt.

UICollisionBehavior

Door een botsing kunnen de dynamische items met elkaar botsen of met een selectiekader dat u opgeeft. Een dynamisch item botst niet met een dynamisch item dat geen deel uitmaakt van hetzelfde botsgedrag. Met het botsgedrag kunt u instellen of de dynamiekitems botsen met alleen andere items, alleen het selectiekader of andere items en het selectiekader..

UIGravityBehavior

Een zwaartekrachtgedrag zorgt ervoor dat de dynamische items in de richting vallen waarin de zwaartekracht werkt. Zwaartekracht werkt standaard naar beneden, maar u kunt elke gewenste hoek instellen door de eigenschap angle te wijzigen. U kunt de magnitude-eigenschap van het zwaartegedragsgedrag wijzigen om ervoor te zorgen dat items sneller of langzamer vallen.

UIPushBehavior

Een duwgedrag oefent een kracht uit op de dynamische items waardoor ze in de richting van de kracht bewegen. U hebt meer controle over een duwgedrag dan over een zwaartekrachtgedrag, omdat de toegepaste kracht continu of onmiddellijk kan zijn.

Tik op het pictogram van de camera op het vergrendelscherm UIPushBehavior op 1, eerder UIGravityBehavior neemt het over op 2 en dan UICollisionBehavior veroorzaakt de bounces op 3 en 4.

UISnapBehavior

Een snapgedrag zorgt ervoor dat het dynamische item naar een opgegeven punt beweegt alsof het er door een veer mee is verbonden. Net als het gedrag van de bijlage zorgt een momentgedrag ervoor dat het dynamische item het laatste punt overschrijdt voordat het daarop terugkeert. U kunt de dempingseigenschap van het gedrag instellen om te definiëren hoe snel de oscillaties afnemen.

UIDynamicItemBehavior

Je zou ... moeten gebruiken UIDynamicItemBehavior als je wilt bepalen hoe elk dynamisch item beweegt. U kunt onafhankelijk rotatie of beweging toevoegen en eigenschappen instellen om de beweging te besturen. Het vereist meer ontwikkeling dan het vooraf gedefinieerde gedrag, maar zal je toestaan ​​om veel meer fysieke scenario's te modelleren als je een specifiek gedrag in gedachten hebt.

4. Dynamische animator

Nadat u een aantal dynamische gedragingen hebt gemaakt, hebt u een dynamische animator nodig om de context en berekeningen te bieden voor de dynamische items die u wilt animeren. De dynamische animator werkt de positie en rotatie van uw dynamische items bij volgens het dynamische gedrag. creëren UIDynamicAnimator met initWithReferenceView: als je individuele views gaat animeren, of met initWithCollectionViewLayout: als u van plan bent een verzamelweergave te animeren.

Conclusie

Er zijn nieuwe mechanismen in iOS 7 om je te helpen subtiele animaties te implementeren zonder veel extra werk te vereisen. De weergaven die u wilt animeren, moeten dynamische items zijn, dat wil zeggen dat ze moeten voldoen aan de UIDyamicItem protocol.

U kunt vervolgens een of meer dynamische gedragingen, instanties van UIDynamicBehavior of een van zijn subklassen om de interacties weer te geven die u wilt simuleren. Ten slotte geeft u het gedrag door aan een dynamische animator, die verantwoordelijk is voor het bijwerken van de positie en rotatie van uw dynamische items op basis van het gedrag dat u hebt opgegeven. In de volgende tutorial laat ik je een concreet voorbeeld zien van deze UIKit Dynamics in actie.