Fun with flutter animations - Divyanshu Bhargava, GoHighLevel

Fun with
Flutter Animations
Divyanshu Bhargava
@divyanshub024, HighLevel

What is Animation?
A sequence of images or frames.

“To think creatively, we must be
able to look afresh at what we
normally take for granted”
- George Keller
“Animation is about creating the
illusion of life. And you can't create it
if you don't have one.”
- Brad Bird

Progress Bar
Is just an indicator to show
something is happening on the
device.

Brad A. Myres
It does not matter if progress
bar gives you accurate progress.
What matters was that a
progress is there.

Animations Type
Tween Animation Physics-based Animation
- In-between.
- Models path between start and
end point.
- curve that defines the timing and
speed of the transition
- Animations with resemble
real-world behavior.
- Whenever possible, apply
real-world physics so they are
natural-looking.
Linear Curve Fling Spring

3 pillars of animation
Ticker Animation Animation
Controller

Animation<T> class
- An animation with a value of type T.
- Animation is nothing else but a value that change in a life span.
- Value change can be linear or curve

AnimationController class
- A controller for an animation.
- Can start, stop, repeat animation.
- Set the animation to a specific value.
- Define the upperBound and lowerBound
values of an animation. (default 0.0 - 1.0)
- Duration of animation.
- Needs Ticker Provider

Ticker class
- Calls its callback once per animation frame.
- around 60 times per second.

Animation
widgets
Implicit
Animated
widget
Explicit
Animated
widget
- AnimatedBuilder
- AlignTransition
- DecoratedBoxTransition
- DefaultTextStyleTransition
- PositionedTransition
- more...
- AnimatedAlign
- AnimatedContainer
- AnimatedDefaultTextStyle
- AnimatedOpacity
- AnimatedPadding
- more...
You need to
provide Animation
Controller
Manage own
Animation Controller

Color bgColor = Colors.redAccent;
return Scaffold(
body: Container(
color: bgColor,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.autorenew),
onPressed: () { },
),
);

return Scaffold(
body: Container(
color: bgColor,
),
onPressed: () {
setState(() {
bgColor = Colors.deepPurpleAccent;
});
},
),
);

return Scaffold(
body: AnimatedContainer(
color: bgColor,
duration: Duration(milliseconds: 500),
),
onPressed: () {
setState(() {
});
},
),
);

return Scaffold(
body: AnimatedContainer(
color: bgColor,
),
onPressed: () {
setState(() {
_height = 100;
_width = 100;
_radius = 100.0;
});
},
),
);

return Scaffold(
body: TweenAnimationBuilder(
tween: ColorTween(
begin: Colors.redAccent,
end: Colors.deepPurpleAccent,
),
builder: (context, value, child) {
return Container(
color: value,
);
},
),
);

https://flutter.dev/docs/development/ui/animations/hero-animations

// First Screen
child: Hero(
tag: ‘'imageHero',
child: Image.network(
'https://picsum.photos/250?image=9',
),
),
// Second Screen
child: Hero(
tag: 'imageHero',
child: Image.network(
'https://picsum.photos/250?image=9',
),
),

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
AnimationController _controller;
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 3),
);
_controller.forward();
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}

Animatable<Color> background = TweenSequence<Color>([
TweenSequenceItem(
weight: 1.0,
tween: ColorTween(
begin: color1,
end: color2,
),
),
TweenSequenceItem(
weight: 1.0,
tween: ColorTween(
begin: color2,
end: color3,
),
),
TweenSequenceItem(
weight: 1.0,
tween: ColorTween(
begin: color3,
end: color4,
),
),
]);

@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, widget) => Container(
color: background.evaluate(_controller),
),
);
}

void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 3),
)..repeat();
}
@override
return AnimatedBuilder(
animation: _controller,
builder: (context, widget) => Container(
color: background.evaluate(_controller),
),
);
}

builder: (context, child) {
final double color =
pageController.hasClients ? pageController.page /
3 : 0.0;
return DecoratedBox(
decoration: BoxDecoration(
color: background.evaluate(
AlwaysStoppedAnimation(color),
),
),
child: PageView.builder(
controller: pageController,
itemCount: places.length,
itemBuilder: (context, index) {
return Center(
child: Text('Page $index'),
);
},
),
);
},

child: PageView.builder(
return CustomCard(
assetName: places[index].assetName,
title: places[index].title,
description: places[index].description,
offset: 0.0,
);
},
),

child: PageTransformer(
pageViewBuilder: (context, visibilityResolver) {
return PageView.builder(
return CustomCard(
assetName: places[index].assetName,
title: places[index].title,
description: places[index].description,
offset: visibilityResolver
.resolvePageVisibility(index)
.pagePosition,
);
},
);
},
),

class CrossPainter extends CustomPainter {
final double fraction;
var _crossPaint;
CrossPainter({this.fraction}) {
_crossPaint = Paint()
..color = crossColor
..strokeWidth = 12.0
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round;
}
@override
bool shouldRepaint(CrossPainter oldDelegate) {
return oldDelegate.fraction != fraction;
}

@override
void paint(Canvas canvas, Size size) {
double leftLineFraction, rightLineFraction;
if (fraction < .5) {
leftLineFraction = fraction / .5;
rightLineFraction = 0.0;
} else {
leftLineFraction = 1.0;
rightLineFraction = (fraction - .5) / .5;
}
}

canvas.drawLine(
Offset(0.0, 0.0),
Offset(size.width * leftLineFraction, size.height *
leftLineFraction),
_crossPaint);
if (fraction >= .5) {
canvas.drawLine(
Offset(size.width, 0.0),
Offset(size.width - size.width * rightLineFraction,
size.height * rightLineFraction),
_crossPaint);
}

class CirclePainter extends CustomPainter {
final double fraction;
var _circlePaint;
@override
void paint(Canvas canvas, Size size) {
var rect = Offset(0.0, 0.0) & size;
canvas.drawArc(rect, -pi / 2, pi * 2 * fraction, false,
_circlePaint);
}
@override
bool shouldRepaint(CirclePainter oldDelegate) {
return oldDelegate.fraction != fraction;
}
}

class ScaleRoute extends PageRouteBuilder {
final Widget page;
ScaleRoute({this.page}) : super (
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) => page,
transitionDuration: Duration(seconds: 2),
transitionsBuilder: (context, animation, secondaryAnimation, child
) =>
ScaleTransition(
scale: Tween<double>(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: animation,
curve: Curves.fastOutSlowIn,
),
),
child: child,
),
);
}

Navigator.push(
context,
ScaleRoute(page: SecondPage()),
);

class ScaleRotateRoute extends PageRouteBuilder {
final Widget page;
ScaleRotateRoute({this.page})
: super(
pageBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) =>
page,
transitionDuration: Duration(seconds: 1),
transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) =>

ScaleTransition(
scale: Tween<double>(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: animation,
curve: Curves.fastOutSlowIn,
),
),
child: RotationTransition(
turns: Tween<double>(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: animation,
curve: Curves.linear,
),
),
child: child,
),
),

Navigator.push(
context,
ScaleRotateRoute(page: SecondPage()),
);

Spring Simulation
- A spring simulation.
- Models a particle attached to a spring that follows Hooke's law.
- “Hooke's law states that the force (F) needed to extend or compress a
spring by some distance x scales linearly with respect to that distance.”
- F = Kx

@override
final size = MediaQuery.of(context).size;
return GestureDetector(
onPanDown: (details) { _controller.stop() },
onPanUpdate: (details) {
setState(() {
_dragAlignment += Alignment(
details.delta.dx / (size.width / 2),
details.delta.dy / (size.height / 2),
);
});
},
onPanEnd: (details) {
_runAnimation(details.velocity.pixelsPerSecond, size);
},
child: Align(
alignment: _dragAlignment,
child: Card(
child: widget.child,
),
),
);
}

void _runAnimation(Offset pixelsPerSecond, Size size) {
_animation = _controller.drive(
AlignmentTween(
begin: _dragAlignment,
end: Alignment.center
,),);
final unitsPerSecondX = pixelsPerSecond.dx / size.width;
final unitsPerSecondY = pixelsPerSecond.dy / size.height;
final unitsPerSecond = Offset(unitsPerSecondX,
unitsPerSecondY);
final unitVelocity = unitsPerSecond.distance;
const spring = SpringDescription(
mass: 30,
stiffness: 1,
damping: 1,
);
final simulation = SpringSimulation(spring, 0, 1, -unitVelocity);
_controller.animateWith(simulation);
}

What is Flare?
Flare is a powerful design and animation tool, which allows
designers and developers to easily add high-quality animation
to their apps and games.

- Real assets.
- No rebuilding in code.
- Manipulate anything at runtime.
- Open source.
Why Flare matters?

Thank You
‫תודה‬
Divyanshu Bhargava
@divyanshub024, HighLevel

Fun with flutter animations - Divyanshu Bhargava, GoHighLevel

Recommended

More Related Content

Similar to Fun with flutter animations - Divyanshu Bhargava, GoHighLevel (20)

More from DroidConTLV (20)

Recently uploaded (20)

Fun with flutter animations - Divyanshu Bhargava, GoHighLevel