I den här artikeln går vi igenom hur du lägger till animationer till valfri del av din design.
Animationer är ett effektivt sätt att visa kampanjer, meddelanden och budskap. De drar till sig det mänskliga ögat med rörelse, vilket får människor att naturligt titta mot dess källa. Med Designer är det enkelt att lägga till animationer till dina designer, vilket ger dem mer uppmärksamhet från besökare.
För en introduktion till att använda Designer, se vår artikel om Komma igång med Designer.
Så lägger du till animationer till designelement
Genom att välja knappen Animera kan du lägga till animationer till dina designelement.
Denna knapp är också tillgänglig per element.
När du klickar på den öppnas området Animera i sidomenyn:
För att lägga till en animation måste du välja ett element att animera. Bestäm sedan om du vill använda en Sidanimation eller en Objektanimation.
För att visa skillnaderna mellan de två och hur man bäst använder dem (tillsammans eller separat), använder vi en enkel malldesign, som nedan:
Sidanimationer
Sidanimationer animeras i den ordning de placeras i listan. Dessa animeras också bara en gång, när sidan laddas.
Låt oss till exempel säga att vi vill att vattnet i vår exempelmall ska flyga in från höger - för att ge intrycket av att det stänker på vattenflaskorna.
Välj först elementet. Tryck sedan på Animera → Lägg till under avsnittet Sidanimationer. Detta visar en mängd alternativ:
Animationstyper:
- Tona in
- Tona ut
- Flyg in från vänster
- Flyg in från höger
- Flyg in från botten
- Flyg in från toppen
- Flyg ut till vänster
- Flyg ut till höger
- Flyg ut till botten
- Flyg ut till toppen
- Zooma in - Zoomar kort in elementet
- Zooma ut - Zoomar kort ut elementet
- Studsa X - Studsar elementet horisontellt
- Studsa Y - Studsar elementet vertikalt
- Blinka
- Zooma - Växlar mellan att zooma in och ut elementet
- Snurra vänster
- Snurra höger
Även om vi kunde ge detaljerade beskrivningar av var och en av dessa, är det roligare att leka runt med dem och se hur de passar din vision själv!
Animationstiming:
- Efter föregående - Ställer in animationen att utlösas efter den föregående animationen i listan.
- Med föregående - Ställer in animationen att utlösas samtidigt som den föregående animationen.
- Från början - Ställer in animationen att utlösas så fort tillgången laddas.
Fördröjning (sek) - Hur lång fördröjning mellan att tillgången laddas/föregående animation och att animationen startar.
Animationshastighet - Ändrar hur snabbt animationen rör sig.
| OBS |
|
För att korrekt utnyttja Animationstiming måste du koordinera ditt val med alternativet Fördröjning. Låt oss till exempel säga att vi har tre sidanimationer, A, B och C.
|
När en animation har lagts till kan fler skapas. Listan med animationer kan ordnas om via dra och släpp:
| OBS |
| Ordningen som animationerna dras i åsidosätter inte deras timing för visning. Om du till exempel har tre animationer och en är inställd på att visas "Från början" och du drar den till botten av ordningen, kommer den fortfarande att visas från början trots att den är sist i ordningen. Att ändra ordningen i dra-och-släpp kommer inte att ändra inställningen för Animationstiming. |
För att skapa den animation vi vill ha väljer vi helt enkelt de olika vattenelementen och låter dem Flyga in från höger, inställda på Från början så att allt vatten kommer in samtidigt. Vi kan testa detta genom att trycka på Spela upp:
Objektanimationer
Objektanimationer animeras samtidigt, oavsett vilken ordning de placeras i. Dessa kan också ställas in för att animeras oändligt (eller så länge tillgången visas på skärmen).
Låt oss till exempel säga att vi vill att vår skärm ska vara uppe ganska länge (över en minut, säg). För det vill vi inkludera lite ytterligare animation för att säkerställa att den inte blir stillastående och för att fortsätta dra folks uppmärksamhet.
För att göra detta drar vi uppmärksamhet till Hydration-textelementet genom att skapa en objektanimation.
Fliken Objektanimationer liknar fliken Sidanimationer, med några viktiga skillnader:
Animationstiming
- Fördröjning - avser fördröjningen mellan varje animation. Detta inkluderar i början och vid varje efterföljande animation
- Slutfördröjning - Avser fördröjningen inne i varje animation.
Loop
- Oändligt - Loopa kontinuerligt animationen tills tillgången ändras.
- En gång - Spela animationen vid laddning en gång.
- Iterationer - Låter dig ange hur många gånger du vill att animationen ska upprepas.
| OBS för användare av Legacy Designer 1.0 |
| Med den senaste Designer 2.0-uppdateringen har vi avvecklat flera objektanimationer på ett enda element. Om du har 2-3 objektanimationer i en 1.0-design kan den fortfarande redigeras i 2.0. Om den raderas måste den dock läggas till igen i 1.0. När Designer 1.0 är avvecklad kommer du bara att kunna redigera eller ta bort dessa animationer. |
Låt oss säga att vi vill att Hydration-texten ska studsa från sida till sida, men inte för snabbt så att det blir distraherande eller irriterande.
Vi ställer in Fördröjning till 3 sekunder och sedan ställer vi in Slutfördröjning till 3 sekunder också. Detta gör att studsen hänger kvar under den tiden. Slutligen ställer vi in Loop till Oändligt:
Nu, när vi sätter ihop alla våra animationer, får vi en fin snabb uppsättning animationer i början tack vare våra Sidanimationer, följt av en fin loop efteråt tack vare vår Objektanimation. Detta kan testas med Spela upp alla eller Förhandsgranska:
| OBS |
|
Formeln för varje objektanimationsiteration är följande: Fördröjning + Animationstid + Slutfördröjning = 1 iteration. |
Vanliga problem med animationer
Låt oss nu gå igenom några vanliga problem du kan stöta på när du försöker visa dina animationer på en skärm.
Förladda tillgångar i spellista
Denna funktion möjliggör ett mer sömlöst utseende genom att ladda tillgångar innan de visas på skärmen. Detta minskar sannolikheten för att din skyltning hänger sig i en sekund eller två medan tillgångarna laddas.
OptiSigns förladdar dina tillgångar 6-8 sekunder innan tillgången visas på skärmen. Detta har den olyckliga effekten att potentiellt hoppa över din animation, som visas omedelbart vid laddning. För att åtgärda detta kan du antingen:
- (Rekommenderas) Lägga till en fördröjning på 1-3 sekunder på dina animationer för att säkerställa att de visas på skärmen när denna förladdning är vald:
- Inaktivera Förladda tillgångar i spellista. Detta kommer dock att visa en tom skärm mellan övergångar.
Enhetsprestanda
Att köra för många animationer samtidigt påverkar din enhets prestanda och skapar en mindre än idealisk digital skyltningsupplevelse.
I allmänhet beror graden av detta på din enhets prestandaförmåga. En Roku-enhet, typisk smart-TV, Amazon FireStick eller annan enhet som inte är specialbyggd för digital skyltning kommer sannolikt att drabbas av värre problem. Om du använder en av dessa enheter rekommenderar vi högst 1 eller 2 animationer per skapad tillgång.
Däremot kan Windows- och Linux-enheter eller OptiSigns-spelare hantera betydligt högre belastningar. Men om du ser hackig uppspelning när du använder en av dessa enheter rekommenderar vi att begränsa animationer till 3-4 animationer per skapad tillgång.
Det var allt!
OptiSigns är ledande inom programvara för digital skyltning. Om du har ytterligare frågor, funderingar eller feedback om OptiSigns, tveka inte att kontakta vårt supportteam på support@optisigns.com.