Physics Based Animations in Flutter

Erdoğan Bavaş
Sep 15, 2019 · 3 min read

In the previous post I’ve tried to explain tween animations. Now it is time to dig in physics based animations.

To simulate real world movements like falling or swinging thoughtful Flutter team has created some simulation classes. With these classes we don’t have to figure out position out of acceleration and time or direction of a swinging widget.

Let’s jump in to the code with a GravitySimulation example.

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';
import 'package:flutter/physics.dart';

void main() => runApp(PhysicsAnimation());

class PhysicsAnimation extends StatefulWidget {
_PhysicsAnimation createState() => _PhysicsAnimation();
}

class _PhysicsAnimation extends State<PhysicsAnimation>
with SingleTickerProviderStateMixin{

AnimationController controller;
GravitySimulation simulation;

@override
void initState() {
super.initState();

simulation = GravitySimulation(
100.0, // acceleration
0.0, // starting point
500.0, // end point
0.0, // starting velocity
);

controller =
AnimationController(vsync: this, upperBound: 500)
..addListener(() {
setState(() {});
});

controller.animateWith(simulation);
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Stack(
children: [
Positioned(
left: 50,
top: controller.value,
height: 10,
width: 10,
child: Container(
color: Colors.redAccent,
),
),
]
),
);
}

@override
void dispose() {
controller.dispose();
super.dispose();
}
}

I already did some explanations in tween animations post.

GravitySimulation: A class for simulating gravity initialized with acceleration, starting point, ending point and starting velocity. In this example we provide 100 units for acceleration and our destination is zero to 500 with zero initial velocity.

upperBound: This may be a bug or it is just me. End position in simulation will not work as expected because AnimationController class value has a max and min limit. Default value for upperBound is 1. When you use simulation and your controller.value stucks at 1 you should change upperBound value accordingly. There is lowerBound property too which is default 0. We don’t need it in this example but it would be useful if we wanted to set our starting point to a negative value.

controller.animateWith: We tell our controller to use the simulation we initialized. You may notice that we didn’t set any duration in our controller because controller will calculate duration of animation with parameters we set in our simulation.

After all these we use controller.value in the Positioned widget wrapped with a Stack widget. And we have this;

Next is SpringSimulation.

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';
import 'package:flutter/physics.dart';

void main() => runApp(PhysicsAnimation());

class PhysicsAnimation extends StatefulWidget {
_PhysicsAnimation createState() => _PhysicsAnimation();
}

class _PhysicsAnimation extends State<PhysicsAnimation>
with SingleTickerProviderStateMixin{
AnimationController controller;

SpringSimulation simulation;

@override
void initState() {
super.initState();

simulation = SpringSimulation(
SpringDescription(
mass: 1,
stiffness: 100,
damping: 1,
),
0.0, // starting point
300.0, // ending point
10, // velocity
);

controller =
AnimationController(vsync: this, upperBound: 500, )
..addListener(() {
print(controller.value);
setState(() {});
});

controller.animateWith(simulation);
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Stack(
children: [
Positioned(
left: 50,
top: controller.value,
height: 10,
width: 10,
child: Container(
color: Colors.redAccent,
),
),
]
),
);
}

@override
void dispose() {
controller.dispose();
super.dispose();
}
}

Most is same with previous example. We’ve just used another simulation class. Notice upperBound value is bigger than ending point in simulation parameters because of spring’s oscillation.

Check out these GIFs to see how SpringDescription’s parameters affect the animation.

mass:1 stiffness:100 damping: varies

How damping affects spring animation

mass:1 damping:1 stiffness: varies

How stiffness affects spring animation

That’s it for now, thanks.

Erdoğan Bavaş

Written by

Software Developer, Physics Grad.

More From Medium

Related reads

Related reads

Related reads

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade