allt
Företag
datavetenskap
design
utveckling
vår resa
Strategimönster
Tack! Din inlämning har mottagits!
Hoppsan! Något gick fel när du skickade in formuläret.
Tack! Din inlämning har mottagits!
Hoppsan! Något gick fel när du skickade in formuläret.
Natalia Terlecka

februari 25, 2024

Min läsning

Lägg till söta animationer i din app med POP

Det finns många egenskaper som gör en bra applikation. Men personligen, när en app välkomnar mig med en söt animation är jag mycket mer benägen att prova dess funktioner. Ibland krävs det en enkel animering för att engagera användaren mycket mer och få honom att känna sig glad över att använda en app.

Med det sagt känner jag verkligen att projekt snålar på dem förutsatt att de är så tidskrävande att ansträngningen inte kommer att löna sig i slutprodukten. i alla fall, iOS gör det väldigt enkelt att utföra animationer, bara sätta din gränssnittsändringskod inuti standard:

Block kan omedelbart omvandlas från de blå utseendena till smidiga övergångar. Det tar bokstavligen en kodrad så jag tror inte att jag behöver övertala någon att använda den.

Men du kan gå ännu längre med detta.

blå pil till vänster
Imaginary Cloud-logotyp

Lägg till söta animationer i din app med POP

Jag upptäckte nyligen ett ramverk från Facebook som heter POP. Det ger dig hela paketet med verkliga fysikbaserade animationer. Och det bästa är att dess API: er är nästan lika enkla som standard.

Låt mig visa dig.

POP har tre inbyggda typer av animationer: PopBasicAnimation, PopSpringAnimation och PopDecayAnimation.

När du har initierat dem:


Du måste välja en av de egenskaper som stöds för att animera ex:


Ställ sedan in fromValue respektive toValue:


Ställ in starttid:


Slutligen lägger du till animeringen till önskat objekt:


Nyckelegenskapen här används för att identifiera animationen. Som dokumentationen säger: ”'Nyckeln' kan vara vilken sträng som helst så att endast en animering per unik nyckel läggs till per objekt”.

Och det är det, du gav just din app en söt animationspark!

Du kan nog föreställa dig att det finns många egenskaper att redigera. För att ge dig en uppfattning är de jag använder mest:


Och de går så långt som hastighet, friktion eller till och med animering av dina anpassade egenskaper. Du kan använda delegerade återuppringningar till kedjeanimationer. Lägg till stöd för användargester. Möjligheterna är oändliga.

Det finns ytterligare läsmaterial och handledning om allt detta på GitHub-sida, med den här - 5 Steg för att använda Facebook Pop - att vara en bra utgångspunkt.

Och här är hur ovanstående kod, upprepad för tre element fungerar:

Dots Animation

Jag uppmuntrar dig starkt att prova det och använda det om och om igen. Att lägga till söta animationer är mycket lättare än det verkar vara.

Bra resultat och nöjda användare garanteras!

Ready for a UX Audit? Book a free call

Hittade den här artikeln användbar? Du kanske gillar dessa också!

blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
blå pil till vänster
Imaginary Cloud-logotyp
Natalia Terlecka
Natalia Terlecka

En senior iOS-utvecklare som ingår i ett smidigt iOS-team och ger individer möjlighet att uppnå sina drömmar och mål.

Läs fler inlägg av denna författare

Människor som läste det här inlägget tyckte också att dessa var intressanta:

pil vänster
pilen till höger
Dropdown caret icon