In questo articolo, vedremo come aggiungere Animazioni a qualsiasi parte del tuo design.
Le animazioni sono un modo efficace per visualizzare promozioni, annunci e messaggi. Attirano l'occhio umano con il movimento, facendo sì che le persone guardino naturalmente verso la loro fonte. Con Designer, è facile aggiungere animazioni ai tuoi design, attirando maggiore attenzione dai visitatori.
Per un'introduzione all'uso di Designer, consulta il nostro articolo su Iniziare con Designer.
Come Aggiungere Animazioni agli Elementi del Design
Selezionando il pulsante Anima potrai aggiungere animazioni ai tuoi elementi di design.
Questo pulsante è disponibile anche per singolo elemento.
Cliccandolo si aprirà l'area Anima nel Menu Laterale:
Per aggiungere un'animazione, dovrai selezionare un elemento da animare. Quindi, decidi se utilizzare un'Animazione di Pagina o un'Animazione di Oggetto.
Per dimostrare le differenze tra le due e come utilizzarle al meglio (insieme o separatamente), useremo un design di template semplice, come quello qui sotto:
Animazioni di Pagina
Le Animazioni di Pagina si animeranno nell'ordine in cui sono posizionate nell'elenco. Inoltre, si animeranno solo una volta, quando la pagina viene caricata.
Ad esempio, diciamo che vogliamo che l'acqua nel nostro template di esempio entri volando da destra - per dare l'impressione di spruzzare le bottiglie d'acqua.
Per prima cosa, seleziona l'elemento. Quindi, premi Anima → Aggiungi sotto la sezione Animazioni di Pagina. Questo farà apparire una vasta gamma di opzioni:
Tipi di Animazione:
- Dissolvenza in entrata
- Dissolvenza in uscita
- Entra volando da sinistra
- Entra volando da destra
- Entra volando dal basso
- Entra volando dall'alto
- Esci volando a sinistra
- Esci volando a destra
- Esci volando in basso
- Esci volando in alto
- Zoom in avanti - Ingrandisce brevemente l'elemento
- Zoom indietro - Riduce brevemente l'elemento
- Rimbalzo X - Fa rimbalzare l'elemento orizzontalmente
- Rimbalzo Y - Fa rimbalzare l'elemento verticalmente
- Lampeggio
- Zoom - Alterna tra ingrandimento e riduzione dell'elemento
- Rotazione a sinistra
- Rotazione a destra
Sebbene potremmo fornire descrizioni dettagliate di ciascuna di queste, è più divertente sperimentare e vedere come si adattano alla tua visione!
Tempistica dell'Animazione:
- Dopo la precedente - Imposta l'animazione per attivarsi dopo l'animazione precedente nell'elenco.
- Con la precedente - Imposta l'animazione per attivarsi contemporaneamente all'animazione precedente.
- Dall'inizio - Imposta l'animazione per attivarsi non appena l'asset viene caricato.
Ritardo (sec) - Quanto tempo di ritardo tra il caricamento dell'asset/animazione precedente e l'attivazione dell'animazione.
Velocità Animazione - Modifica la velocità di movimento dell'animazione.
| NOTA |
|
Per utilizzare correttamente la Tempistica dell'Animazione, dovrai coordinare la tua scelta con l'opzione Ritardo. Ad esempio, diciamo di avere tre animazioni di pagina, A, B e C.
|
Una volta aggiunta un'animazione, se ne possono creare altre. L'elenco delle animazioni può essere riordinato tramite trascinamento:
| NOTA |
| L'ordine in cui le Animazioni vengono trascinate non sovrascrive la loro tempistica di visualizzazione. Ad esempio, se hai tre animazioni e una è impostata per visualizzarsi "Dall'inizio" e la trascini in fondo all'ordine, verrà comunque visualizzata dall'inizio nonostante sia l'ultima in ordine. Cambiare l'ordine nel trascinamento non cambierà l'impostazione Tempistica dell'Animazione. |
Per creare l'animazione che vogliamo, selezioniamo semplicemente i diversi elementi d'acqua e li facciamo Entrare volando da destra, impostati su Dall'inizio così tutta l'acqua entra contemporaneamente. Possiamo testarlo premendo Riproduci:
Animazioni di Oggetto
Le Animazioni di Oggetto si animeranno simultaneamente, indipendentemente dall'ordine in cui sono posizionate. Queste possono anche essere impostate per animarsi indefinitamente (o finché l'asset viene mostrato sullo schermo).
Ad esempio, diciamo che vogliamo che il nostro schermo rimanga attivo per un tempo piuttosto lungo (oltre un minuto, diciamo). Per questo, vorremo includere qualche animazione aggiuntiva per assicurarci che non diventi stagnante e per continuare ad attirare l'attenzione delle persone.
Per fare questo, attireremo l'attenzione sull'elemento di testo Idratazione creando un'Animazione di Oggetto.
La scheda Animazioni di Oggetto è simile alla scheda Animazioni di Pagina, con alcune differenze chiave:
Tempistica dell'Animazione
- Ritardo - si riferisce al ritardo tra ogni animazione. Questo include all'inizio e in ogni animazione successiva
- Ritardo Finale - Si riferisce al ritardo all'interno di ogni animazione.
Ciclo
- Indefinitamente - Ripete continuamente l'animazione fino a quando l'asset viene cambiato.
- Una Volta - Riproduce l'animazione al caricamento una sola volta.
- Iterazioni - Ti permette di specificare quante volte vuoi che l'animazione si ripeta.
| NOTA per gli Utenti Legacy Designer 1.0 |
| Con il recente aggiornamento Designer 2.0, abbiamo deprecato le animazioni di oggetti multiple su un singolo elemento. Se hai 2-3 animazioni di oggetto in un design 1.0, può ancora essere modificato in 2.0. Se eliminate, tuttavia, dovranno essere aggiunte nuovamente in 1.0. Una volta che Designer 1.0 sarà deprecato, potrai solo modificare o eliminare queste animazioni. |
Diciamo che vogliamo che il testo Idratazione rimbalzi da un lato all'altro, ma non troppo velocemente da essere distraente o fastidioso.
Imposteremo il Ritardo a 3 secondi e poi imposteremo il Ritardo Finale anche a 3 secondi. Questo farà sì che il rimbalzo si fermi per quel periodo di tempo. Infine, imposteremo il Ciclo su Indefinitamente:
Ora, quando mettiamo insieme tutte le nostre animazioni, otteniamo un bel set rapido di animazioni all'inizio grazie alle nostre Animazioni di Pagina, seguito da un bel ciclo continuo grazie alla nostra Animazione di Oggetto. Questo può essere testato con Riproduci Tutto o Anteprima:
| NOTA |
|
La formula per ogni iterazione dell'Animazione di Oggetto è la seguente: Ritardo + Durata Animazione + Ritardo Finale = 1 Iterazione. |
Problemi Comuni con le Animazioni
Ora, esaminiamo alcuni problemi comuni che potresti incontrare mentre cerchi di visualizzare le tue animazioni su uno schermo.
Precaricamento degli Asset in Playlist
Questa funzione consente un aspetto più fluido caricando gli asset prima di mostrarli sullo schermo. Questo riduce la probabilità che il tuo signage si blocchi per un secondo o due mentre gli asset vengono caricati.
OptiSigns precaricherà i tuoi asset 6-8 secondi prima che l'asset venga visualizzato sullo schermo. Questo ha l'effetto sfortunato di saltare potenzialmente la tua animazione, che verrà visualizzata immediatamente al caricamento. Per risolvere questo, puoi:
- (Consigliato) Aggiungere un ritardo di 1-3 secondi sulle tue animazioni per assicurarti che appaiano sullo schermo quando questo precaricamento è selezionato:
- Disabilitare Precarica Asset nella Playlist. Tuttavia, questo mostrerà uno schermo vuoto tra le transizioni.
Prestazioni del Dispositivo
Eseguire troppe animazioni contemporaneamente influenzerà le prestazioni del tuo dispositivo e creerà un'esperienza di digital signage non ideale.
In generale, il grado in cui questo si percepisce dipenderà dalle capacità prestazionali del tuo dispositivo. Un dispositivo Roku, smart TV tipica, Amazon FireStick o altro dispositivo non costruito appositamente per il digital signage è probabile che soffra di problemi peggiori. Se utilizzi uno di questi dispositivi, raccomandiamo non più di 1 o 2 animazioni per asset creato.
Al contrario, i dispositivi Windows e Linux o i player OptiSigns possono gestire carichi significativamente più elevati. Tuttavia, se vedi balbettii mentre usi uno di questi dispositivi, raccomandiamo di limitare le animazioni a 3-4 animazioni per asset creato.
È tutto!
OptiSigns è leader nel software di digital signage. Se hai domande aggiuntive, dubbi o qualsiasi feedback su OptiSigns, non esitare a contattare il nostro team di supporto a support@optisigns.com.