Creare immagini animate
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Oltre alle immagini statiche sul quadrante, le immagini animate possono aggiungere un'altra dimensione all'esperienza utente.
Tieni presente che questa sezione riguarda in modo specifico l'utilizzo di file di immagini animate. È possibile animare i componenti sul quadrante utilizzando l'elemento Transform, trattato nella pagina Modificare dinamicamente l'aspetto degli elementi.
Le animazioni possono essere costituite da un file immagine animato, ad esempio una GIF animata, o da una sequenza di Images, che si combinano per formare un'animazione.
Oltre a specificare i file da utilizzare, dovrai definire il comportamento dell'animazione, ad esempio se riprodurre in loop la riproduzione o, in caso contrario, cosa fare alla fine, tra le altre opzioni. A questo scopo, utilizza un AnimationController.
Infine, per tutte le animazioni, includi un'immagine
miniatura.
Riassumendo, un'animazione di base può essere implementata come segue:
<PartAnimatedImage x="0" y="0" width="450" height="450">
<AnimationController play="ON_VISIBLE"/>
<AnimatedImage resource="my_animation" format="AGIF"/>
<Thumbnail resource="my_animation_thumbnail" />
</PartAnimatedImage>
Consulta la documentazione di riferimento PartAnimatedImage per maggiori dettagli su come includere un elenco di immagini animate e creare un'animazione da immagini fisse.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-07-27 UTC."],[],[],null,["# Create animated images\n\nIn addition to static images on the watch face, animated images can bring a\nfurther dimension to the user experience.\n\nNote that this section is specifically about using animated image files. It is\npossible to animate components on the watch face using the `Transform` element,\nwhich is covered on the [Dynamically changing the appearance of\nelements](/training/wearables/wff/transform) page.\n\nAnimations can consist of either an animated image file, such as an animated\nGIF, or a sequence of `Images`, which combine together to form an animation.\n\nAs well as specifying the files to use, you'll need to define how the animation\nshould behave, for example, whether to loop the playback, or if not, what to do\nat the end, among other options. For this, use an [`AnimationController`](/training/wearables/wff/group/part/animated-image/animation-controller).\n\nFinally, for all animations, include a [thumbnail\nimage](/training/wearables/wff/group/part/animated-image/thumbnail) in all animations.\n\nPutting this together, a basic animation can be implemented as follows: \n\n \u003cPartAnimatedImage x=\"0\" y=\"0\" width=\"450\" height=\"450\"\u003e\n \u003cAnimationController play=\"ON_VISIBLE\"/\u003e\n \u003cAnimatedImage resource=\"my_animation\" format=\"AGIF\"/\u003e\n \u003cThumbnail resource=\"my_animation_thumbnail\" /\u003e\n \u003c/PartAnimatedImage\u003e\n\nConsult the [`PartAnimatedImage`](/training/wearables/wff/group/part/animated-image/part-animated-image) reference for more details on including a\nlist of animated images and constructing an animation from still images."]]
