1.3 KiB
kynd Sep 9, 2016
Designing motion in a fragment shader is not straight forward and can be a bit tedious since it is not an animation tool after all. Here are some convenient tools and examples for controlling easing and timing, drawing shapes, and combining all these to create a nice sequence of motion. The first five examples introduce many useful functions that you can use as building blocks for your design. Following examples demonstrate how you can combine these tool to design complex animations.
Exercises:
-
Draw different waves using easing functions, then animate circles following the waves.
-
Design your character by combining shapes and animate it.
-
Make your character animation slow-motion, five times slower than the original.
-
Can you express difference between a metal ball and a plastic ball only through motion without changing the graphics?
-
Add a new scene to the "wipes" example. How can you make it easy so that you don't have to adjust the timing of all subsequent parts manually?
-
The examples here are not necessarily optimized, especially the last one. Try reducing the number of calculation as much as possible. Many functions are running even when the elements they draw are not on-screen. How can you avoid this?