Huge upgrade for your Flutter animations

With the today’s release of Simple Animations 2.5.0 a lot of new features coming to all Flutter developers.

The last months I challenged myself in doing really complex animations and tried to use the existing tooling of the simple_animations package. I figured out, there was some room for improvements. #eatyourowndogfood

Introducing: Timeline Tween

Simple Animation already had a tool for creating complex animations with multiple tweened properties, called MultiTween. It’s able to handle multiple properties, but it doesn’t really reflect the way we humans think or like to read code.

Therefore I created Timeline Tween that works similar to MultiTween but organizes all “property tweening instructions” into time slices, a so called scene.

Furthermore Timeline Tween computes property gaps by using extrapolation. Here is an example how it works:

This tween consists of two scenes. In the first scene we move something on the x-axis for a second. Then we move something on the y-axis for another second. That makes 2 seconds in total.

When the tween gets passed into an animation and the animation asks the tween for properties, it will return x=0 y=0 at the beginning of the animation. We declared the y property from 1 second onwards, but it got extrapolated to the previous scene. Also the x property keeps it’s value of 100 after 1 second. It really feels natural on how we think.

Take a look even more complex animation:

Clockwise moving square

Each scene can handle unlimited properties by calling the animate() method multiple times. The api is designed to make use of builder style. But you can also store each scene into a variable to increase code readability.

You can also specify relative scenes that start right after another scene has completed. This saves you from time consuming refactorings when you fine-tune the timings of your animation afterwards.

Other features, like the multi level curve system, is extensively described in the Timeline Tween documentation.

Introducing: Animation Developer Tools

While creating a really complex animation I got annoyed by watching the whole animation over and over again. I just wanted to tweak some last parts of the animation. This is how I came up with the Animation Developer Tools that are fully integrated into the Stateless Animation widgets and Anicoto.

Using Animation Developer Tools

You can pause your animation, scroll around, slow down, speed up or just focus on parts of the animation. The setup is really simple:

• Wrap your UI with the AnimationDeveloperTools widget.
• (A) Set the property developerMode to true for any stateless animation widget (i.e. PlayAnimation, LoopAnimation, CustomAnimation, etc.)
• (B) Or call the enableDeveloperMode(controller) from within any stateful widget that has Anicoto’s AnimationMixin.

The Simple Animation documentation also contains full app examples for both cases.

Introducing: Liquid Studio (Gen 2)

Last but not least I want to mention the next generation of Liquid Studio. I have totally rewritten all code. The result is a layer based creative environment.

Liquid Studio (Gen 2)

For now it supports the following layer types:

• Solid Backgrounds
• Gradients (Linear/Radial/Sweep)
• Plasma

You can compose multiple layers in a WYSIWYG environment.

I also introduced two other types of Plasma (circle and bubbles) along with many new properties to play around with.

If you are done, you can generate the Dart code from the Export menu.

Liquid Studio itself is fully written in Flutter and demonstrates the capabilities of the Flutter web renderer. You can try it out here.

The 2.5.0 release is one of the biggest in Simple Animation’s history. I hope you enjoy all the features and that they simplify your developer life.

Leave some clapps on this article :-) and like the simple_animations package on pub.dev. There you can also get a full overview of the package, along with links to the documentation.

Until next time
— Felix —