Eigenes Bild mit Animation

[hätsch]

Ich würde gerne eines meiner (evtl. freigestellten) Bilder mit einer Animation versehen, welches dann vov außerhalb des linken Screenrandes in einer harmonischen Sinuslinie quer über den Screen nach rechts wandert, um schließlich am rechten Screenrand wieder zu verschwinden.
Zwei Fragen dazu:
a) Wie bekomme ein Foto anstelle einer Form (z. B. eines Pfeils) an die Spitze der Animationslinie?
b) Wie kann ich gleichzeitig die Animationslinie unsichtbar machen!

Sehr komplex für mich und unlösbar.

Danke für eure Hinweise.
Heinz

[Christoph Hilger]

Hallo Heinz,

in diesem Tutorial findest Du alle benötigten Infos: https://www.youtube.com/watch?v=EDWt0aESnoE

Viel Spaß damit und schöne Grüße!
Christoph Hilger

[hätsch]

Christoph vielen Dank. Muss noch ausprobieren, ob ich eine animierte Linie so anlegen kann, dass sie außerhalb des Screens (links, rechts, etc.) startet und in meinem Fall das Bild z. B. von außerhalb einwandert und über den rechten Rand verschwindet.

Schöne Feiertage und herzliche Grüße

Heinz

[Gerhard.BN]

Hallo Heinz,

genau dieses Thema hatten wir schon mal in einem anderen Thread.

Es gibt eine Möglichkeit, mit denen man ein animiertes Bild auch über den Screenrand hinaus fliegen lassen kann. Dabei müssen allerdings zwei Dinge kombiniert werden:

• die Animation
• und die dynamische Position des animierten Bildes

Wie schon beim anderen Thread, lasse ich eine Möwe durchs Bild fliegen, und zwar von links außerhalb des Screens nach rechts außerhalb des Screens.

Dazu verwendet man zusätzlich zur Animation eine Steuerspur Position/Zoom. Die Steuerspur enthält zwei Keyframes, die exakt unter den Start- bzw. Ziel-Knotenpunkten liegen sollten.

• Beim ersten ("Start"-)Keyframe wird die X-Position soweit nach links verschoben, bis die Möwe noch nicht sichtbar ist, in unserem Fall also -300 px.
• Beim zweiten ("Ziel"-)Keyframe wird die X-Position soweit nach rechts verschoben, bis die Möwe nicht mehr sichtbar ist, in unserem Fall also 100 px.

Hier laufen also zwei Bewegungsvorgänge parallel ab: Zusätzlich zur Animation wird die Möwe noch über die Steuerspur "angetrieben".

FlugAni3a.jpg (107.92 KiB) 105 mal betrachtet

Zur Demo habe ich ein kleines Musterprojekt erstellt, das Du Dir hier herunterladen kannst:

https://magentacloud.de/s/Cff9JxLoTSz42TF

Viele Grüße
Gerhard

[hätsch]

Vielen Dank Christoph! Eigentlich logisch, vielleicht wäre ich beim Ausprobieren sogar selber draufgekommen.

Schöne Feiertage und herzliche Grüße
Heinz