In dit artikel bespreken we hoe u animaties kunt toevoegen aan elk onderdeel van uw ontwerp.
Animaties zijn een effectieve manier om promoties, aankondigingen en berichten weer te geven. Ze trekken het menselijk oog met beweging, waardoor mensen van nature naar de bron kijken. Met Designer is het eenvoudig om animaties aan uw ontwerpen toe te voegen, waardoor ze meer aandacht krijgen van bezoekers.
Voor een introductie tot het gebruik van Designer, zie ons artikel over Aan de slag met Designer.
Hoe voegt u animaties toe aan ontwerpelementen
Door de knop Animeren te selecteren kunt u animaties toevoegen aan uw ontwerpelementen.
Deze knop is ook beschikbaar per element.
Door erop te klikken opent u het gebied Animeren in het zijmenu:
Om een animatie toe te voegen, moet u een element selecteren om te animeren. Bepaal vervolgens of u een Pagina-animatie of een Objectanimatie wilt gebruiken.
Om de verschillen tussen de twee te demonstreren en hoe u ze het beste kunt gebruiken (samen of afzonderlijk), gebruiken we een eenvoudig sjabloonontwerp, zoals hieronder:
Pagina-animaties
Pagina-animaties worden geanimeerd in de volgorde waarin ze in de lijst staan. Deze worden ook slechts één keer geanimeerd, wanneer de pagina wordt geladen.
Laten we bijvoorbeeld zeggen dat we willen dat het water in ons voorbeeldsjabloon van rechts invliegt - om de indruk te wekken dat het de waterflessen besproeit.
Selecteer eerst het element. Klik vervolgens op Animeren → Toevoegen onder de sectie Pagina-animaties. Dit geeft een hele reeks opties weer:
Animatietypes:
- Infaden
- Uitfaden
- Invliegen van links
- Invliegen van rechts
- Invliegen van onder
- Invliegen van boven
- Uitvliegen naar links
- Uitvliegen naar rechts
- Uitvliegen naar onder
- Uitvliegen naar boven
- Inzoomen - Zoomt het element kort in
- Uitzoomen - Zoomt het element kort uit
- Stuiteren X - Laat het element horizontaal stuiteren
- Stuiteren Y - Laat het element verticaal stuiteren
- Flitsen
- Zoomen - Wisselt tussen in- en uitzoomen van het element
- Draaien naar links
- Draaien naar rechts
Hoewel we gedetailleerde beschrijvingen van elk van deze animaties zouden kunnen geven, is het leuker om ermee te spelen en zelf te zien hoe ze bij uw visie passen!
Animatietiming:
- Na vorige - Stelt de animatie in om te starten na de vorige animatie in de lijst.
- Met vorige - Stelt de animatie in om tegelijkertijd te starten met de vorige animatie.
- Vanaf begin - Stelt de animatie in om te starten zodra de asset wordt geladen.
Vertraging (sec) - Hoe lang de vertraging is tussen het laden van de asset/vorige animatie en het starten van de animatie.
Animatiesnelheid - Verandert hoe snel de animatie beweegt.
| OPMERKING |
|
Om Animatietiming goed te gebruiken, moet u uw keuze coördineren met de optie Vertraging. Stel bijvoorbeeld dat we drie pagina-animaties hebben, A, B en C.
|
Zodra een animatie is toegevoegd, kunnen er meer worden gemaakt. De lijst met animaties kan worden herschikt via slepen en neerzetten:
| OPMERKING |
| De volgorde waarin de animaties worden gesleept, overschrijft hun timing niet. Als u bijvoorbeeld drie animaties heeft en één is ingesteld om "Vanaf begin" weer te geven en u sleept deze naar de onderkant van de volgorde, wordt deze nog steeds vanaf het begin weergegeven, ondanks dat deze als laatste in de volgorde staat. Het wijzigen van de volgorde door slepen en neerzetten verandert de instelling Animatietiming niet. |
Om de gewenste animatie te maken, selecteren we eenvoudig de verschillende waterelementen en laten ze Invliegen van rechts, ingesteld op Vanaf begin zodat al het water tegelijk binnenkomt. We kunnen dit testen door op Afspelen te klikken:
Objectanimaties
Objectanimaties worden gelijktijdig geanimeerd, ongeacht de volgorde waarin ze zijn geplaatst. Deze kunnen ook worden ingesteld om oneindig te animeren (of zolang de asset op het scherm wordt getoond).
Laten we bijvoorbeeld zeggen dat we willen dat ons scherm vrij lang blijft staan (meer dan een minuut bijvoorbeeld). Daarvoor willen we wat extra animatie toevoegen om ervoor te zorgen dat het niet stagnant wordt en om de aandacht van mensen te blijven trekken.
Om dit te doen, vestigen we de aandacht op het Hydratatie-tekstelement door een objectanimatie te maken.
Het tabblad Objectanimaties is vergelijkbaar met het tabblad Pagina-animaties, met een paar belangrijke verschillen:
Animatietiming
- Vertraging - verwijst naar de vertraging tussen elke animatie. Dit geldt voor het begin en voor elke volgende animatie
- Eindvertraging - Verwijst naar de vertraging binnen elke animatie.
Lus
- Oneindig - Blijf de animatie herhalen totdat de asset wordt gewijzigd.
- Eenmalig - Speel de animatie eenmalig af bij het laden.
- Iteraties - Hiermee kunt u opgeven hoe vaak u de animatie wilt herhalen.
| OPMERKING voor Legacy Designer 1.0 gebruikers |
| Met de recente Designer 2.0 update hebben we meerdere objectanimaties op één element afgeschaft. Als u 2-3 objectanimaties in een 1.0-ontwerp heeft, kan dit nog steeds worden bewerkt in 2.0. Als deze worden verwijderd, moeten ze echter weer worden toegevoegd in 1.0. Zodra Designer 1.0 is afgeschaft, kunt u deze animaties alleen nog bewerken of verwijderen. |
Laten we zeggen dat we willen dat de Hydratatie-tekst van links naar rechts stuitert, maar niet te snel om afleidend of vervelend te zijn.
We stellen de Vertraging in op 3 seconden en stellen vervolgens de Eindvertraging ook in op 3 seconden. Dit zorgt ervoor dat het stuiteren die tijd blijft hangen. Als laatste stellen we de Lus in op Oneindig:
Nu, wanneer we al onze animaties samenvoegen, krijgen we een mooie snelle set animaties aan het begin dankzij onze Pagina-animaties, gevolgd door een mooie lus daarna dankzij onze Objectanimatie. Dit kan worden getest met Alles afspelen of Voorvertoning:
| OPMERKING |
|
De formule voor elke objectanimatie-iteratie is als volgt: Vertraging + Animatieduur + Eindvertraging = 1 iteratie. |
Veelvoorkomende problemen met animaties
Laten we nu een paar veelvoorkomende problemen bespreken die u kunt tegenkomen bij het weergeven van uw animaties op een scherm.
Vooraf laden van assets in afspeellijst
Deze functie zorgt voor een naadlozer uiterlijk door assets te laden voordat ze op het scherm worden weergegeven. Dit vermindert de kans dat uw signage een seconde of twee blijft hangen terwijl de assets worden geladen.
OptiSigns laadt uw assets 6-8 seconden vooraf voordat de asset op het scherm wordt weergegeven. Dit heeft het ongelukkige effect dat uw animatie mogelijk wordt overgeslagen, die onmiddellijk bij het laden wordt weergegeven. Om dit op te lossen, kunt u:
- (Aanbevolen) Voeg een vertraging van 1-3 seconden toe aan uw animaties om ervoor te zorgen dat ze op het scherm verschijnen wanneer dit vooraf laden is geselecteerd:
- Schakel Vooraf laden van assets in afspeellijst uit. Dit zal echter een leeg scherm tonen tussen overgangen.
Apparaatprestaties
Het uitvoeren van te veel animaties tegelijk beïnvloedt de prestaties van uw apparaat en creëert een minder dan ideale digital signage-ervaring.
Over het algemeen hangt de mate waarin dit wordt gevoeld af van de prestatiemogelijkheden van uw apparaat. Een Roku-apparaat, typische smart-tv, Amazon FireStick of ander apparaat dat niet speciaal is gebouwd voor digital signage, zal waarschijnlijk last hebben van ergere problemen. Bij het gebruik van een van deze apparaten raden we niet meer dan 1 of 2 animaties per gemaakte asset aan.
Daarentegen kunnen Windows- en Linux-apparaten of OptiSigns-spelers aanzienlijk hogere belastingen aan. Als u echter stotteren ziet bij het gebruik van een van deze apparaten, raden we aan om animaties te beperken tot 3-4 animaties per gemaakte asset.
Dat is alles!
OptiSigns is de leider in digital signage software. Als u aanvullende vragen, zorgen of feedback heeft over OptiSigns, neem dan gerust contact op met ons supportteam via support@optisigns.com.