Animations in Flutter

A quick intorduction to animations in Flutter

Transcript

8. GPU Animate vsync Build Layout Paint
10. - Is an animation of type Animation<double> - Default range 0.0 to 1.0 - Default Linear curve - Duration - Defines the length of the animation - Play-Stop-Reverse-Repeat-Reset-Resume - AnimateTo-AnimateWith-Fling AnimationController controller = AnimationController( value: 0.0, duration: const Duration(milliseconds: 2000), vsync: this); controller.forward();
11. - Animation Status - Dismissed, completed, forward reverse - Animation Value - AnimateTo-AnimateWith-Fling - Duration and Value - Is listenable - add/remove value listeners - add/remove status listeners - Calls listeners prior to rebuild
12. Animation<double> sizeAnimation = Tween(begin: 0.0, end: 320.0).animate(controller); Animation<Color> colorAnimation = Tween(begin: Colors.transparent, end: Colors.red).animate(controller);
13. - Non-Linear transformation of a curve. - As defined in Curves.x - Must map between 0.0 and 1.0 - Create custom curves final CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.elasticOut);
15. CurvedAnimation wraps the object it’s modifying—you don’t subclass AnimationController to implement a curve. class ShakeCurve extends Curve { @override double transform(double t) { return math.sin(t * math.PI * 2); } }
16. class AnimationPage extends StatefulWidget { _AnimationPageState createState() => _AnimationPageState(); } class _AnimationPageState extends State<AnimationPage> { Widget build(BuildContext context) { return Center( child: Icon( Icons.android, ), ); } }
17. class _AnimationPageState extends State<AnimationPage> with SingleTickerProviderStateMixin { AnimationController controller; initState() { super.initState(); controller = AnimationController( value: 0.0, duration: const Duration(milliseconds: 2000), vsync: this); controller.forward(); } Widget build(BuildContext context) { ... } dispose() { controller.dispose(); super.dispose(); } }
18. class _AnimationPageState extends State<AnimationPage> with SingleTickerProviderStateMixin { AnimationController controller; Animation<double> sizeAnimation; initState() { super.initState(); sizeAnimation = Tween(begin: 0.0, end: 320.0).animate(controller); … } Widget build(BuildContext context) { return Center( child: Icon(Icons.android, size: sizeAnimation.value), ); } dispose() {...}
20. class _AnimationPageState extends State<AnimationPage> with SingleTickerProviderStateMixin { ... initState() { super.initState(); controller = AnimationController( value: 0.0, duration: const Duration(milliseconds: 2000), vsync: this); final CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.elasticOut); sizeAnimation = Tween(begin: 0.0, end: 320.0).animate(curve); … } Widget build(BuildContext context) { ... } dispose() {...}
22. - No Animation object needed - Automatically interpolate and animate - You can change the Curve and Duration Examples: - AnimatedAlign - AnimatedContainer - AnimatedDefaultTextStyle - AnimatedOpacity - AnimatedPadding - AnimatedPhysicalModel - AnimatedPositioned - AnimatedPositionedDirectional - AnimatedTheme
23. Some Examples Kolkata
25. https://speakerdeck.com/dhuma1981/flutter-theming-and-animation