MYP Design Animation and Motion Graphics Notes

Animation Is Still Pictures Shown Fast Enough to Fool You

1. The eye holds each image for a fraction of a second, so a quick enough run of stills reads as continuous movement.
2. Frame rate is how many of those stills appear each second, written as fps.
3. Film runs at 24 fps, European broadcast at 25 fps, and most web video at 30 fps.
4. Games and smooth interface motion aim for 60 fps, which matches the refresh rate of an ordinary screen.
5. Hand drawn animation often works "on twos", holding each drawing for two frames, so 24 fps needs only 12 new drawings a second.
6. Below about 12 fps the motion starts to read as a flick book, which is a fine style on purpose and a mistake by accident.

Keyframes Set the Anchors, Tweening Fills the Gap

1. A keyframe records the value of one property at one moment: position at 0 seconds, position at 2 seconds.
2. The software then calculates every frame in between, which is called tweening or interpolation.
3. Place two keyframes two seconds apart at 25 fps and the computer draws the other 49 frames for you.
4. Each property gets its own track, so a logo can move, rotate and fade at once from three separate sets of keyframes.
5. Fewer keyframes normally gives smoother motion, and a dense row of them means you are fighting the software rather than using it.
6. Dragging a keyframe further along the timeline changes the speed without touching the start or end position, because the same distance now takes longer.

Easing Is What Makes Motion Look Real

1. Linear motion runs at one constant speed from start to finish, which is how nothing in the physical world moves.
2. Ease in starts slow and builds, which suits something leaving, and ease out starts fast and settles, which suits something arriving.
3. Ease in out does both and is the safe default for almost any interface movement.
4. Editing software shows easing as a curve you drag by its handles, and CSS writes the same thing as cubic-bezier(0.4, 0, 0.2, 1).
5. Most interface motion should last 150 to 300 milliseconds, because under 100ms reads as an instant jump and over 500ms feels sluggish.
6. A bouncing ball settles the argument: it accelerates on the way down and slows on the way up, and linear timing makes it look like it is on a string.

Frame by Frame Drawing and Sprite Sheets

1. Frame by frame animation draws a fresh picture for every frame, which buys total control at the highest cost in hours.
2. Onion skinning shows faint ghosts of the frames either side so the next drawing lines up with its neighbours.
3. A sprite is a single image of a character or object that the program draws on top of the background.
4. A sprite sheet packs every frame of a walk or an explosion into one image, and the program shows one tile at a time.
5. One file means one download and no flicker while the next frame loads over a slow connection.
6. A believable walk cycle needs only 8 frames: contact, down, passing and up, then the same four with the legs swapped.

Stop Motion: Move a Little, Shoot, Repeat

1. Stop motion photographs a real object, nudges it, and photographs it again, so the model does the animating.
2. Shoot at 12 or 15 fps rather than 24, because a 10 second shot then needs 120 photographs instead of 240.
3. The camera must not shift a millimetre, so tape the tripod legs down and fire the shutter with a remote or a timer.
4. Lock exposure, focus and white balance, since any automatic setting will flicker from frame to frame.
5. Block out daylight and work with constant lamps, otherwise a passing cloud changes the brightness of frame 63 alone.
6. Move the object in small even steps, because a step twice as big reads on screen as twice the speed.

Four of the Twelve Principles Do Most of the Work

1. The twelve principles were written down by Disney animators in the 1930s, and four of them fix most student animation.
2. Timing is how many frames a move takes, and it tells the viewer how heavy the thing is, since a bowling ball and a balloon fall over very different numbers of frames.
3. Squash and stretch deforms an object as it accelerates and lands, which reads as weight, provided the volume stays the same.
4. Anticipation is the small opposite move before the main one, so a character crouches before jumping and a panel nudges left before it slides right.
5. Follow through means loose parts keep going after the body stops, so a scarf or a ponytail settles a few frames late.
6. Put all four into one bouncing ball and it stops looking like a circle sliding down the screen.

Animating an Interface State Change

1. Motion in an interface exists to explain a change, so if it explains nothing it should not be there.
2. A state change is any move from one condition to another: a button from resting to hovered, a panel from closed to open, a field from valid to error.
3. In CSS, transition: background-color 200ms ease-out animates that change every time the value changes, with no keyframes to place by hand.
   1. Animation driven by code, with conditions and loops deciding what moves when, sits with the programming logic articles in this unit.
4. Animate transform and opacity wherever you can, because the browser handles both without redoing the layout and keeps the motion near 60 fps.
5. Animating width, height or margin forces a full relayout on every frame and visibly stutters on an older phone.
6. A menu that slides in from the left edge shows the user where it came from and where tapping again will send it back.
7. Respect @media (prefers-reduced-motion: reduce) by cutting to a plain fade, because sliding and zooming makes some people genuinely unwell.