Een animatie voor interactie met een huisdier plannen die op een tik reageert

Schrijf één regel voor de interactie voordat je poses schetst: “Wanneer je op het huisdier tikt, merkt het je op en begroet het je kort.” Zorg dat een tik steeds hetzelfde gevolg heeft. Als dezelfde tik het personage soms voert, ermee speelt en het begroet, kan de animatie niet betrouwbaar laten zien wat er is gebeurd.

Splits de invoer op in twee momenten: vinger omlaag en vinger omhoog. Een kleine verandering in de ingedrukte toestand wanneer de vinger omlaag gaat, bevestigt dat de tik is geregistreerd; de hoofdreactie van het huisdier kan volgen zodra de tik bij het loslaten is geaccepteerd. In de richtlijnen van Apple voor responsiviteit worden aanrakingen en het loslaten op touchscreens beschreven als afzonderlijke interacties met elk een eigen visuele reactie. Door dit onderscheid voelt het alsof de tik is opgemerkt, ook als de grotere animatie van het personage langer duurt. De responsiviteit van de gebruikersinterface begrijpen

Kies één hoofdbeweging die de bedoeling duidelijk maakt op het weergegeven formaat van het personage. Een begroeting kan bestaan uit een blik in de richting van de gebruiker, gevolgd door een kleine kanteling van het hoofd; een speelse reactie kan een korte sprong met het lichaam zijn. Dit zijn ontwerpvoorbeelden, geen voorgeschreven patronen. Geef de voorkeur aan een silhouet- of gezichtsverandering die herkenbaar blijft wanneer het personage klein is, en stapel niet meerdere gebaren op elkaar voordat de kijker het eerste heeft kunnen begrijpen.

Bouw de reactie op uit anticipatie, actie en uitloop. Anticipatie kan een korte blik naar de plek van de tik zijn. De actie is het kenmerkende gebaar. De uitloop brengt het personage zonder schok terug naar een ontspannen rusthouding. Deze reeks is een praktische ontwerpconclusie op basis van platformrichtlijnen om feedback realistisch, kort en precies te maken: beweging moet de actie ondersteunen en er niet mee concurreren. Apple Human Interface Guidelines: Beweging

De eerste zichtbare verandering is belangrijker dan de totale duur van de reactie. Laat het personage of het tikdoel als eerste ontwerpkeuze meteen veranderen wanneer de gebruiker drukt, bijvoorbeeld met een subtiele vervorming, markering of oogbeweging. Laat daarna, na het loslaten, de expressieve reactie beginnen. Stem de exacte timing af op de context in plaats van uit te gaan van één universele waarde.

Als de animatie pas begint nadat assets zijn geladen, externe gegevens zijn opgehaald of ander, niet-gerelateerd werk is afgerond, kan het lijken alsof de tik is gemist. Houd de bevestiging zo mogelijk onafhankelijk van tijdrovend werk. Apple beschrijft een merkbare vertraging bij afzonderlijke interacties als een hapering en maakt onderscheid tussen zulke haperingen en schokken, die de vloeiende beweging onderbreken. Controleer in de praktijk zowel of het personage snel begint te reageren als of het daarna soepel beweegt. De responsiviteit van de gebruikersinterface begrijpen

Gebruik de kortste reeks waarin de kijker de reactie kan herkennen en het personage weer tot rust ziet komen. Een snelle oortrekking kan snel klaar zijn; een hoofdbeweging heeft tijd nodig om goed over te komen. Voelt de animatie traag aan, verkort dan de vertraging vóór de kenmerkende beweging voordat je alle poses sneller achter elkaar laat volgen. Voelt ze abrupt, pas dan de overgang naar of uit de actie aan in plaats van een lange pauze toe te voegen.

Geef de beweging een doelbewust snelheidsverloop. Een reactie kan snel beginnen en geleidelijk in de eindhouding overgaan, terwijl een kleine sprong iets kan doorschieten en daarna tot rust kan komen. Dit zijn voorbeelden: de juiste curve hangt af van de stijl van het personage en de grootte van de beweging. Apple raadt korte, precieze feedback aan en waarschuwt ervoor om mensen te laten wachten tot een beweging klaar is voordat ze verder kunnen. Apple Human Interface Guidelines: Beweging

Test een tweede tik terwijl de eerste reactie nog wordt afgespeeld. Kies een duidelijke regel: start de reactie opnieuw, zet een volgende reactie in de wachtrij, vloei over naar een nieuwe pose of negeer extra tikken tot een duidelijk moment. Bij een eenvoudige interactie met een huisdier kan een korte reactie opnieuw starten of overvloeien naar de nieuwe pose ervoor zorgen dat het personage beschikbaar blijft aanvoelen. Meerdere volledige reacties in de wachtrij kunnen het huisdier laten lijken alsof het achterloopt op de gebruiker.

Welke regel je ook kiest, voorkom dat de animatie in een onvoltooide toestand blijft hangen. Test tikken tijdens de anticipatie, het hoofdgebaar en de uitloop. Test ook een tik die begint met een druk maar eindigt buiten het doel, als je platform dat onderscheidt van een voltooide tik. Volgens de richtlijnen van Apple voor knoppen activeert een aanraking die binnen de grenzen van de knop wordt beëindigd de bijbehorende actie. Geef bij aangepaste tikverwerking duidelijk aan welk gedrag hiermee overeenkomt. Haperingen in je app begrijpen

Maak de reactie optioneel als het platform bewegingsvoorkeuren ondersteunt en behoud zo nodig de informatie die de tik overbrengt met een verandering in de toestand zonder beweging. Voor een webinterface beschrijft W3C een techniek waarbij de mediaquery prefers-reduced-motion wordt gebruikt om beweging die door een interactie wordt gestart te onderdrukken of te vervangen wanneer een gebruiker verminderde beweging instelt. De W3C-pagina beschrijft een techniek en vereist niet dat precies die implementatie wordt gebruikt. W3C-techniek C39: De CSS-query prefers-reduced-motion gebruiken om beweging te voorkomen

Als je geluid of haptische feedback toevoegt, laat die dan rechtstreeks overeenkomen met de zichtbare reactie en bied deze bewust aan. Volgens de richtlijnen van Apple voor haptische feedback moet die overeenkomen met een visuele verandering of reageren op een gebruikersactie. Ook waarschuwen ze dat overmatig gebruik de betekenis ervan kan verminderen. Extra feedbackkanalen zijn niet nodig als de beweging van de animatie het resultaat al duidelijk maakt. Apple Human Interface Guidelines: Haptische feedback afspelen

Test op het beoogde apparaat en op het werkelijke schermformaat, in plaats van alleen de tijdlijneditor te beoordelen. Stel een paar praktische vragen: is de druk zichtbaar geregistreerd, kun je zien wat het huisdier deed, keert het personage terug naar een interactieve toestand en gedraagt een herhaalde tik zich voorspelbaar? Bekijk de animatie eerst op normale snelheid. Vertraagde weergave kan helpen om overgangen tussen poses te inspecteren, maar laat niet zien of de timing tijdens gebruik responsief aanvoelt.

Test daarna de randgevallen: tik meerdere keren snel achter elkaar, tik vlak bij de rand van het doel en schakel de instelling voor verminderde beweging van het apparaat in. Let op vertraagde starts, bevroren frames, abrupte resets en reacties die elkaar overlappen tot de betekenis onduidelijk wordt. Apple merkt op dat zelfs een vertraging van één schermverversing een schok in de beweging kan veroorzaken. Controleer dus zowel de vloeiendheid als de ervaren starttijd. De responsiviteit van apps verbeteren

Een betrouwbaar plan is eenvoudig: bepaal de betekenis van de tik, bevestig die snel, toon één duidelijke reactie, keer terug naar een beschikbare pose en beslis hoe onderbrekingen worden afgehandeld. Stem de reeks af op het apparaat en herhaal dezelfde controles met verminderde beweging. Het eindresultaat moet duidelijk laten zien hoe de tik samenhangt met de reactie van het huisdier.

• De responsiviteit van de gebruikersinterface begrijpen — Apple Developer Documentation

• Beweging — Apple Human Interface Guidelines

• Haperingen in je app begrijpen — Apple Developer Documentation

• Techniek C39: De CSS-query prefers-reduced-motion gebruiken om beweging te voorkomen — W3C WAI

• Haptische feedback afspelen — Apple Human Interface Guidelines

• De responsiviteit van apps verbeteren — Apple Developer Documentation