Kwik Page Turn Animation

• Maj 20, 2024

Under de senaste tutorialerna har vi arbetat med sidmallen för vår Kwik-bokapp. Vi har ytterligare en sak att lägga till i mallen, som är den linjära animationen som emulerar en sidvänd.

Vi vill att denna animering ska spelas omedelbart när sidan laddas. Vi har redan grafiken för animeringen på kwkpgTurn-lagret på sidan1. Detta lager har också ställts in som en delad tillgång så att det fungerar genom bokappen.

Linjär animering

Just nu skapar vi en mycket enkel animation och använder de flesta av standardinställningarna. Men vi kommer att lära oss mycket om linjära animationer när vi lägger till många av dem i boken.

En linjär animation flyttar ett objekt från en punkt på skärmen till en annan. Därför är huvudinställningarna för en linjär animation start- och slutpunkter. Kwik ställer automatiskt startpunkten för animeringen som objektets aktuella position på lagret. Vi måste ange slutpunkten för animeringen.

Vi kommer också att ställa in varaktigheten för animationen i sekunder, eftersom detta avgör hur snabbt objektet rör sig. Slutligen kommer vi att ställa in animationen så att den startar när sidan laddas.

Sidomotivanimering

1. Välj sida1 i sidan Sida / komponenter på Kwik-panelen. Du bör se "@ sida1" längst upp i avsnittet.
   
   
2. Klicka på Byt till ikonen Komponentvy för att se din lista över komponenter som redan har lagts till på denna sida.
   
   
3. Välj kvkpgTurn-lager i panelen Lager.
   
   
4. I kategorifältet klickar du på Animationsikon.
   
   
5. Klicka på Linjär animationsikon (första ikonen i första raden med verktyg).
   
   
6. Byt namn på animationen "pgTurn" i dialogrutan Linear Animation.
   
   
7. Layer kwkpgTurn: Detta berättar Kwik att använda grafiken på kwkpgTurn-lagret för animeringen. Håll detta valt
   
   

I avsnittet Egenskaper visar Kwik oss X- och Y-positionerna för objektet på kwkpgTurn-lagret och bredden och höjden på det grafiska objektet. Eftersom vi vill flytta hela grafiken från skärmen måste vi flytta den åtminstone samma antal pixlar som grafikens bredd (732 px). Låt oss flytta 732 pixlar till vänster. Eftersom den nuvarande X-positionen är 0. Detta kommer att resultera i ett negativt tal för slutpositionen. Vi vill inte flytta objektet vertikalt, så vi kommer att hålla Y-positionen inställd på 0. Detta kommer att göra att objektet bara rör sig horisontellt.

8. Slutposition:
   x -732
   y 0
   
   
9. Randomiserad slutposition: Vi kommer inte att använda den här funktionen så låt den vara inställd på standardvärdena.
   
   
10. Varaktighet: Vi vill att grafiken ska röra sig mycket snabbt för att ge flipeffekten. Så låt oss ställa in detta på 1 sekund och 0,25 sekunders fördröjning.
    
    
11. Markera rutan för pausad när du är klar.
    
    
12. Loop: Ställ in detta alternativ på l time.
    
    
13. Startar: Ställ in detta när sidan startar.
    
    
14. Klicka på Skapa.
    
    
15. Du bör se att animationen pgTurn har lagts till i komponentlistan för den här sidan.
    
    

Nu är det bra att testa projektet. Klicka på knappen Publicera i Kwik-panelen. Testa navigeringsknapparna och animera sidan.

Copyright 2018 Adobe Systems Incorporated. Alla rättigheter förbehållna. Adobes produktskärmbild (ar) tryckta med tillstånd från Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst och Flash Paper är / är antingen [a] registrerat varumärke [s] eller ett varumärke [s] från Adobe Systems Incorporated i USA och / eller andra länder.
Kwik-produkten, Kwik-logotypen och Kwiksher är egenskaper hos Kwiksher.com - Copyright 2011. Skärmbilder som används med tillstånd.

Dessa tutorials är för den äldre versionen av Kwik 2 och kanske inte till mycket hjälp när du använder Kwik 3 och högre. Om du har problem, använd Kwik-forumet.

Video Instruktioner: SKETCHBOOK TOUR 2019! (Maj 2024).