Utilizzo dell’animazione per creare quadranti dinamici

Aggiungi una nuova dimensione al quadrante del tuo orologio e dagli vita utilizzando l’animazione. Con Watch Face Studio (WFS), è facile aggiungere animazioni ai quadranti senza codifica. Puoi utilizzare animazioni in vari formati per creare quadranti estetici e belli, ma ottimizzati per gli smartwatch che funzionano su Wear OS. WFS consente inoltre di configurare animazioni per rispondere all’interazione dell’utente.

Questo tutorial introduce varie funzionalità di animazione che possono essere configurate in WFS e suggerimenti per creare esperienze visivamente incantevoli sulla tela del quadrante. Nonostante lo spazio limitato, le possibilità sono infinite!

Tipi di animazione

Watch Face Studio supporta l’implementazione di animazioni in diversi formati:

• Sequenza di immagini di fotogrammi PNG o JPG
  I formati immagine PNG e JPG supportano milioni di colori. Le immagini a risoluzione più elevata producono animazioni di qualità superiore, a scapito della dimensione del file.
• GIF animata
  Utilizzato per la grafica più semplice, il formato GIF è senza perdite e supporta 256 colori.
• Web animato
  Webp è un formato immagine popolare che supporta milioni di colori in dimensioni di file compatte.

Segui la dimostrazione in questo tutorial scaricando il progetto di esempio. Il quadrante nel progetto di esempio include un arcobaleno che appare quando il quadrante si accende, nuvole che fluttuano continuamente nel cielo, una girandola che gira quando viene toccata e bolle che emergono a intervalli di tempo regolari.

Implementazione di animazioni

Puoi utilizzare qualsiasi strumento di progettazione per creare la tua animazione come sequenza di immagini, GIF animate o file Webp animati.

NotaLa frequenza dei fotogrammi dell’animazione in WFS è fissa a 15 fps.

Sequenza di immagini animate

Per creare l’animazione della girandola da una serie di immagini:

1. In WFS, seleziona Aggiungi componente > Animazione > Sequenza di immagini.
   
   Figura 1: aggiunta di una sequenza di immagini

   Si apre il browser dei file.

2. Selezionare le immagini da includere nella sequenza e fare clic Aprire.
   
   Figura 2: selezionare le immagini per la sequenza

   I file selezionati vengono aggiunti a un singolo livello di sequenza nel progetto del quadrante dell’orologio.

3. Per modificare e visualizzare in anteprima l’animazione, seleziona la sequenza di immagini dall’elenco dei livelli.
   
   Figura 3. Modifica sequenza di immagini
4. Modifica l’animazione:
   • Per modificare l’ordine delle immagini, rimuovere immagini o aggiungere immagini, selezionare Importa immagine.
   • Per rallentare l’animazione, aumenta il numero di fotogrammi di qualsiasi immagine.
   • Per visualizzare l’anteprima dell’animazione, fare clic su Giocare.

ManciaSe la stessa immagine viene utilizzata ripetutamente, aumentare il numero di fotogrammi per quell’immagine. Ciò ottimizza l’utilizzo della memoria e riduce le dimensioni del file del quadrante.

Figura 4: importa immagini aggiuntive, definisci il numero di fotogrammi, visualizza l’anteprima dell’animazione

Archivio multimediale

Ho creato altre tre animazioni, “rainbow.webp”, “cloud.gif” e “bubble_up.gif”, utilizzando uno strumento di progettazione e le aggiungerò in questa dimostrazione. Puoi seguire i passaggi seguenti per aggiungere queste animazioni di tipo multimediale.

1. In WFS, seleziona Aggiungi componente > Animazione > GIF animata/Webp. Si apre il browser dei file.
2. Selezionare il file di animazione desiderato da importare e fare clic Aprire.
   
   Figura 5: aprire il file multimediale

Figura 6: aggiungi contenuti multimediali nella scheda Stile

Attivazione di animazioni

Puoi definire un trigger per ogni animazione. I trigger sono condizioni che definiscono quando e come viene riprodotta l’animazione.

Riproduci quando il quadrante è attivo

Per riprodurre l’animazione cloud in modo continuo ogni volta che il quadrante è attivo, nella scheda “Proprietà” dell’animazione, definire “WatchFace on” come trigger e abilitare “Riproduzione automatica”.

Figura 7: riproduzione continua con il quadrante acceso

Per riprodurre l’animazione arcobaleno solo una volta quando il quadrante si accende, fermandosi sull’ultimo fotogramma dell’animazione, definire “WatchFace on” come trigger, ma abilitare “Riprendi riproduzione”.

Figura 8: gioca una volta quando il quadrante è attivo

Riproduci quando toccato

Per riprodurre l’animazione della girandola ogni volta che si tocca l’immagine della girandola, definire “Tap” come trigger. Definisci l’animazione per iniziare la riproduzione con un ritardo di 1 secondo e attiva le opzioni “Riproduzione automatica” e “Ripeti ritardo”.

Figura 9: riproduci l’animazione quando viene toccato

Gioca a intervalli di tempo

Per riprodurre l’animazione della bolla ogni minuto, definisci “Ogni minuto” come trigger. Fai scomparire le bolle alla fine dell’animazione abilitando “Nascondi al termine”.

Figura 10: gioca a intervalli di tempo definiti

Guarda l’anteprima del quadrante

Per visualizzare l’anteprima del quadrante nel progetto di esempio, apri il progetto in Watch Face Studio, fai clic su “Esegui” e seleziona “Sull’orologio”.

Figura 11: quadrante dell’orologio del progetto di esempio

Suggerimenti sulle prestazioni

Quando progetti le animazioni dei quadranti dell’orologio, tieni presente i seguenti concetti per garantire prestazioni ottimali:

• Consumo della batteria
  Gli elementi animati possono consumare la batteria più rapidamente rispetto alla grafica statica. Considera l’equilibrio tra la complessità dell’animazione e le immagini nel design del quadrante.
• Potenza di calcolo
  Le animazioni complesse potrebbero richiedere una maggiore potenza di elaborazione, pertanto le limitazioni hardware dell’orologio potrebbero comportare prestazioni lente o discontinue
• L’efficienza delle risorse
  Maggiore è la dimensione del file di animazione, la risoluzione dell’immagine o il numero di fotogrammi, maggiori saranno le risorse necessarie per visualizzare l’animazione. Ottimizza la tua grafica per evitare prestazioni lente.
• Esperienza utente
  Animazioni discontinue o stridenti possono disturbare l’esperienza dell’utente. Ad esempio, poiché le immagini multimediali vengono caricate in modo asincrono, potrebbero verificarsi ritardi nell’avvio delle animazioni.

Riepilogo

Le animazioni possono aumentare il coinvolgimento dell’utente con il design del quadrante dell’orologio e migliorare la sua esperienza di cronometraggio. Nonostante i limiti dell’hardware dell’orologio, Watch Face Studio ti offre gli strumenti per sbloccare il tuo potenziale creativo e implementare e configurare facilmente animazioni ottimizzate per i design dei quadranti dell’orologio.

Se hai domande o hai bisogno di aiuto con le informazioni contenute in questo tutorial, puoi condividere le tue domande sul Forum degli sviluppatori Samsung o contattarci tramite il Supporto per gli sviluppatori Samsung.