Animierte Bilder erstellen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Neben statischen Bildern auf dem Zifferblatt können animierte Bilder die Nutzerfreundlichkeit weiter verbessern.
In diesem Abschnitt geht es speziell um die Verwendung animierter Bilddateien. Mit dem Element Transform können Sie Komponenten auf dem Zifferblatt animieren. Weitere Informationen finden Sie auf der Seite Dynamische Änderung des Erscheinungsbildes von Elementen.
Animationen können entweder aus einer animierten Bilddatei wie einem animierten GIF oder aus einer Sequenz von Images bestehen, die zusammen eine Animation bilden.
Sie müssen nicht nur die zu verwendenden Dateien angeben, sondern auch festlegen, wie sich die Animation verhalten soll, z. B. ob die Wiedergabe in einer Schleife erfolgen soll oder was am Ende passieren soll. Verwenden Sie dazu AnimationController.
Fügen Sie allen Animationen ein Miniaturbild hinzu.
Zusammengenommen kann eine einfache Animation so implementiert werden:
<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>
Weitere Informationen zum Einfügen einer Liste mit animierten Bildern und zum Erstellen einer Animation aus Standbildern finden Sie in der PartAnimatedImage-Referenz.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[null,null,["Zuletzt aktualisiert: 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."]]
