Animations

Creating animations in Code Shrew is fun! And if you know how to set properties on shapes and icons then you pretty much know how to create animations! You just need to put the code inside the with animation() block.

For example, the following code will animate a circle by gradually changing its color from red to blue:

You can animate by changing almost any of the object's properties inside the with animate() block. This includes changing its color, size, position, rotation, transparency and other. You can see the full list of properties in the chapters describing shapes and icons.

Duration

By default, a with animation() block will take exactly 1 second to perform the animation. You can control this by giving it a duration. For example, the following animation will take 5 seconds to run:

Animating multiple properties simultaneously

You can simultaneously animate more than one property. For example, this will create a small rectangle going from left and change its color from pink to cyan, both at the same time:

Multiple with animation() blocks

You can have more than one with animation() block. They run one after another. For example, this code will make the rectangle go back and forth:

Empty with animation() blocks

You can have empty with animation() blocks, if you want. This will make the program wait for the duration of the block, without changing anything. To do this write pass inside the block, to indicate that you intend for it to be empty. For example, this will create an animation where a rectangle travels from left to right, waits for half a second and then goes back:

Animating shape creation

You can put the declaration of a new shape inside the with animation() block. This will make the shape appear gradually. For example, the following code will create an animation where it takes 5 seconds for the rectangle to fully appear.

Animating multiple shapes simultaneously

You can animate more than one shape at a time. For example, in the following animation, a rectangle travels from left to right, while the color of the background goes from yellow-blue to red-violet: