Eine der schwierigsten Sachen bei der Animation ist das Timing. Alles exakt so zu timen, dass es gut aussieht. Auch das Spacing ist nicht ganz einfach, aber gerade bei so etwas wie dem Bouncing Ball entscheidet das Timing darüber, ob man die Animation als glaubwürdig und gut empfindet oder nicht.


Schritt 1

Zuerst sehen wir, dass die Abnahme der Sprünge noch nicht stimmt. Eigentlich ist das ganze exponentiell. Wir müssen uns hier eine Kurve (*) vorstellen, die die Abnahme zeigt. Das Ganze strebt sozusagen gegen Null, erreicht aber die Null nie.

Da korrigiere ich die Punkte ein kleines bisschen und dann strebt das gegen Null.

Animation leicht gemacht: Bouncing Ball - das Timing

Schritt 2

Auch die zeitlichen Abstände der Sprünge müssen noch etwas angepasst werden. Ich mache das einfach mal nach Gefühl.

Manchmal stört mich die Transformieren-Box, aber die kann man auch einfach per Klick auf das Symbol unten ausschalten. Dann kann ich die einzelnen Werte einfach anpacken und verschieben.

Ich zoome noch etwas näher ran, markiere die Abschnitte und schiebe sie so hin, wie ich sie brauche.

Dann mache ich noch ein kleines Feintuning an den Kurven.

Animation leicht gemacht: Bouncing Ball - das Timing

Schritt 3

Ich lasse den Part mal ablaufen und dann sehen wir ein Problem: Der Ball scheint nicht wirklich auf dem Boden aufzukommen.

Gerade bei dem zweiten Jump hat man das Gefühl, dass er nicht wirklich aufkommt. Aber die Kurve ist doch unten - wie kann das sein?

Das kann sein, wenn man die Punkte nicht exakt auf einen Frame gesetzt hat. Wenn wir etwas näher heranzoomen, dann sehen wir das Raster mit den Frames und dazwischen ist der Punkt (1). Dabei ist es sehr wichtig, dass die Punkte auf Frames bleiben, denn nur so bekommen wir das Gefühl von einem springenden Ball.

Wir bewegen also jeden springenden Punkt - also jeden Kollisionspunkt mit dem Boden - genau auf einen Frame (2).

Animation leicht gemacht: Bouncing Ball - das Timing

Schritt 4

Ich lasse noch mal ablaufen. Der erste Part ist ein bisschen zu langsam, den mache ich etwas schneller und schiebe den anderen Part entsprechend hinterher. Dabei achte ich natürlich darauf, dass die Punkte jeweils auf den Frames sitzen. Diese Einstellungen können ziemlich lange dauern, bis das dann wirklich so ist, wie man es haben will.

Ganz spannend ist ja auch die Tatsache, dass jeder eine andere Vorstellung von einem Ball hat. Was für einen Ball zeigen wir denn? Wie leicht oder schwer ist er? Durch die Sprünge, die Höhe und die Abnahme definiert sich dieser Ball. Mir macht diese Übung am meisten Spaß, wenn ich mehrere Versionen davon mache. Und zwar in verschiedenen Gewichtsklassen bis hin zur Kanonenkugel.

Dieser Ball ist schon relativ schnell dabei, abzunehmen von seiner Geschwindigkeit her. Wir können aber natürlich auch die x-Position verändern, dann werden die Sprünge wieder alle ein bisschen breiter.

Animation leicht gemacht: Bouncing Ball - das Timing



Es ist ein ziemlich langer Entstehungsprozess, bis das Ganze so aussieht, wie man will.

Schritt 5

Die unteren Punkte sind egal, die können wir komplett frei bewegen, und dazu schalten wir das Snapping aus.

Normalerweise bewegen wir auf Frame-Basis, was gut ist. Wenn wir aber mit der Skalieren-Funktion arbeiten oder auch mit Alt den letzten Keyframe ziehen, dann können wir oft Keyframes erzeugen, die nicht genau auf einem Frame liegen.

Animation leicht gemacht: Bouncing Ball - das Timing

Schritt 6

Ich passe noch mal neu an, das dauert alles ein bisschen und man muss es immer wieder ablaufen lassen und anpassen. Es ist eine ganz schöne Spielerei.

Ich empfehle euch aber auf jeden Fall: Macht mal ein paar Bouncing Balls, denn da entwickelt ihr ein Auge für die Kurven. Steil oder nicht steil? Timing und Spacing etc.

Animation leicht gemacht: Bouncing Ball - das Timing

Schritt 7

Am Ende fehlen auf jeden Fall noch einige Jumps.

Wir kopieren uns den Part (1), gehen zum letzten Keyframe (2), fügen es ein und skalieren es wieder runter (3).

Animation leicht gemacht: Bouncing Ball - das Timing



Auf diese Art können wir uns etwas Arbeit sparen, da wir nicht alle Posen von vornherein setzen müssen, sondern auch Keyframes kopieren können.

Schritt 8

Irgendwas wirkt noch ein bisschen gezwungen, ich passe also weiter an. Der erste Absturz ist noch zu langsam und braucht auch dann beim Hochspringen etwas lange.

Animation leicht gemacht: Bouncing Ball - das Timing



Das sind die Kleinigkeiten, da muss man ausprobieren. Vieles ist Vermutung und Gefühl und erst beim Ausprobieren sehe ich dann, ob das wirklich die Lösung des Problems ist.

Schritt 9

Ich kopiere ans Ende noch mal zwei Jumps rein und mache die kleiner und kürzer.

Der Übergang passt noch nicht, da haben wir einen doppelten Keyframe generiert. Ich schiebe die beiden Frames einfach aufeinander - gut ist, wenn dabei das Snapping aktiv ist.

Animation leicht gemacht: Bouncing Ball - das Timing

Schritt 10

Die Kurven müssen natürlich kleiner und kürzer sein als die vorangegangenen.

Ich will die Kurven anpassen, merke aber, dass es offenbar immer noch nicht stimmt und es immer noch zwei Keyframes sind. Ich schaue es mir genauer an und sehe, das Problem ist, dass die beiden nicht auf dem Frame sind.

Animation leicht gemacht: Bouncing Ball - das Timing

Schritt 11

Jetzt ist es ein Frame und ich trenne dessen Tangenten wieder mit der Alt-Taste.

Auch hier gilt wieder: "Beautiful curves result in a beautiful animation". Also immer schön drauf achten, dass die Kurven schön sind.

Das Refining kann auch schon mal eine Stunde dauern. Wenn man wirklich übt und noch gar nie die Erfahrung damit gemacht hat, worauf es ankommt.

Animation leicht gemacht: Bouncing Ball - das Timing

Schritt 12

Das sieht schon ganz gut aus.

Wir prüfen immer wieder, dass alle Keyframes wirklich auf einem Frame sind, denn das ist immer die Gefahr.

Animation leicht gemacht: Bouncing Ball - das Timing



Im Großen und Ganzen war es das. Ich werde noch ein bisschen weiter daran feilen, dann ganz zufrieden bin ich nicht. Aber im nächsten Teil seht ihr dann, wie das Ganze aussieht.

Ihr habt schon viel mitbekommen von dem Prozess und wisst jetzt, dass es ein langes Hin und Her sein kann, bis es wirklich passt. Ich würde euch empfehlen, Zeit zu investieren, das Auge zu schulen und die Kurven Stück für Stück anzupassen.

Nehmt euch wirklich Zeit, denn es wird euch im Nachhinein wesentlich weiterhelfen, wenn ihr diese Übung ausführlich macht. Es geht nicht um den Ball im Speziellen, sondern ganz prinzipiell um Animation und darum, ein Gefühl für Bewegung, Schnelligkeit, Gewicht etc. zu bekommen. Das entwickelt man nur mit Übung. Probiert also ein bisschen rum und wir sehen uns im nächsten Teil des Tutorials "Squash & Stretch".

ICONS TEST

/sprites/ui.svg:

alert
apple-pay
apple
arrow-down
arrow-right
arrows
checkbox
checked
chevron-down-small
chevron-down
chevron-left
chevron-right-doble-primary
chevron-right
chevron-up-small
chevron-up
close-cross
close-small
close
cog
complete
copy
eye-lock
eye
facebook-logo
file
form-select-arrow-up
form-select-arrow
google-icon
icon-als-gast-fortfahren_b
icon-anmelden1_b
icon-anmelden2_b
icon-globe
icon-neues-konto-erstellen_b
icon-resize-out
information-icon-button
left-align
letters
like
link-arrow
link
list-icon
lock
mail
medal
moon
notification
open-small
picture
pinterest-2
play
plus-white
quizz
rate
refresh-211
refresh-282
reset
reward
search-thin
search
star
sun
user
warenkorb

/sprites/image-editor.svg:

align-center
align-left
align-right
alignment-center
alignment-left
alignment-right
alignment-vertical-bottom
alignment-vertical-center
alignment-vertical-top
background-test
background
bold
bring-forward
bring-to-front
capslock
change-size
check-point
constrain
copy
crop-image
delete
download
edit-file-name
editable
flip-horisontally
flip-vertically
group-layer
help
hide
italic
justified
layers
line-spacing
lock
not-editable
open-group
paste
redo
rotate
save
send-backward
send-to-back
shape-layer
shapes
show
strike
text-layer
text
translate
underline
undo
unlock
zoom-in
zoom-out

/sprites/paint.svg:

brush
clear
cursors
eraser
escape
full-screen
marker
navigate
pencil
print
refresh
save
spray
zoom-in
zoom-out

/sprites/theme.svg:

001-01
001-02
001-03
001-04
001-05a
001-05b
001-05c
002-05a
3d-square-software-icon-dark
architektur-software-icon-dark
arrows-down-active
arrows-up-active
assets-templates-download-icon-dark
butterfly-answer-icon-dark
category-icon-example
certificate_alternate
certificate_downloaded
certificate_grey
certificate_primary
edit-multiple
edit
facebook
folder
grey-pause
grey-play
grey-stop
icon-als-gast-fortfahren_c
icon-anmelden1_c
icon-anmelden2_c
icon-neues-konto-erstellen_c
icons-cookie
instagram
interests-1
lamp-idea-bulb-smart-icon-dark
linkedin
pinterest
plus
red-cross
reload
toggle-list-active
toggle-list
toggle-on-off-active
toggle-on-off
toggle-single-active
toggle-single
toggle-switch-active
toggle-switch
trash
trophy-inactive
urkunden-zertifikate-software-icon-dark
video-streaming-icon-dark
xing

/sprites/banners.svg:

bild
icons8-google
proven_expert_4eck-tutkit

/sprites/elements-of-design.svg:

annika-hillger
annika-hillger
annika-hillger
annika-hillger_100
annika-hillger_100
annika-hillger_100
blockquote-border-line
icons-svg-log-in
svg-log-in
svg-registration

/sprites/logotypes.svg:

logo-big-colored
logo-big-dark
logo-big-green
logo-big
logo-dark
logo-green
logo-light-grey
logo-light-white
logo-mini-dark
logo-mini-green
logo-mini
logo-payment
logo-small-dark
logo-small-green
logo-small
logo-tutkit
logo
tutkit_pirate-bay
tutkit_voucher_top

/sprites/payment-provider.svg:

apple-pay-2
apple-pay-white
apple-pay
card-bank
card-mastercard
card-paypal
creditcard
g-pay-2
g-pay
google-pay-2
invoice
mastercard
payment-google-pay
paypal-2
paypal
sepa
visa
[]