Animate with 🚀Stateless Animation

In my last article I announced the new version 2 of Simple Animations. Today I want to show, how easily you create animations with the 🚀Stateless Animation widgets.

Given the following scenario: We want to animate the number of likes inside a Text widget.

The animation we want to create.

Let’s begin with a stateless widget that returns a Text widget.

We start by wrapping our Text widget inside a PlayAnimation widget.

We put, everything we want to animate, inside the builder function. This function is called everytime our animates updates. It has three parameters. The last one value represents the current state of the animated value.

Next we need to specify what kind of data type the PlayAnimation<?> should animate. In our case we want to animate integer values. Then we can use the value to replace the static number “64736” in our Text widget.

Now we need to describe the animation. We can do this by specifying a tween. A tween describes the behavior of an animation over the time. In our case we want to animate integer values, starting from 0 to 64736 .

With supercharged we can just write: 0.tweenTo(64736) .

We apply this tween to the tween parameter. The PlayAnimation will now animate the number of likes within one second (default value).

That’s quite fast. That’s why we define our own duration by setting the duration parameter to 5.seconds. It will now animate the number for 5 seconds we the same speed.

To make it more interesting we can apply a non-linear animation curve. For example: easeIn will slow the animation down at the beginning and speed up at the end.

That looks much better.

The PlayAnimation can animate every data type we want. You easily create a double animation that changes the size of a container.

The stateless animation widgets are designed to be upgradable. You can simply rename PlayAnimation to LoopAnimation to change it’s behavior. Instead of stopping at the end, the animation will start over and over again.

Another very nice effect can be achieved with the MirrorAnimation . It’s also looping but instead of starting from the beginning, the animation will change it’s direction when reaching the beginning or the end.

If you like to read more: The CustomAnimation is the maximum upgrade to PlayAnimation and allows full control over the animation. You can find details in the readme file.

You can also watch the whole example as screen cast.

You can find Simple Animation at pub.dev. Examples shown here also make use of Supercharged. I hope you enjoy it.

Leave some 👏claps if you like my content.

Until next time
— Felix —

--

--

--

Software Developer, http://felix-blaschke.de

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Add a Map to a Website in 30 Seconds

Learning TypeScript 01 — Basic types

JavaScript Shinies: Rest and Spread

Next.js firebase, client side render

Gettin’ Started with Angular 5 (Part 3) — Gettin’ Data From Your Users!

React Hooks setState

FP++ (functional programming put to practice)

Sharing source code and libraries in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Felix Blaschke

Felix Blaschke

Software Developer, http://felix-blaschke.de

More from Medium

Flame Game Device Orientation and Resolution

Let’s Create a Snake game using Flutter and Flame!

Simple & Performant State Management without an External Library

Super Editor goes mobile!