icyrock.com
HomeCanvas experiments - easings
2015-Dec-25 11:42
An interactive demo of easings, demonstrated by drawing scenes on canvas. There are a couple of scenes:
- Arcs, drawing a familiar logo
- Star, drawing a star with arcs on the tips
For each of the scenes, several properties can be changed:
- Position 1, easing the first position (shape-dependent) from start to end
- Position 2, easing the second position (shape-dependent) from start to end
- Shape, easing the shape from not drawn to fully drawn (shape-dependent)
- Fill color, easing the fill color from transparent to fully colored
- Stroke color, easing the stroke color from transparent to fully colored
- Stroke width, easing the stroke width from 0 to full width
Playing with the controls below the canvas is the easiest way to get a feeling for what they do. You can click on already selected items to repeat the animation without changing the settings, in case you missed the animation that you find interesting.