Animations in Flutter v1.0 (Flutter Berlin Meetup)

Animations in Flutter for Flutter Berlin Meetup

Transcript

1. ANIMATIONS IN FLUTTER @salihgueler 1 MUHAMMED SALIH GULER
2. 2 @salihgueler WHAT IS FLUTTER?
3. 3 @salihgueler WHY ANIMATIONS ARE IMPORTANT
4. 4 @salihgueler Credit: uxinmotion
5. 5 @salihgueler ANIMATIONS IN FLUTTER
6. 6 @salihgueler ANIMATION TYPES IN FLUTTER • Physics-based Animations • Tween Animations
7. 7 @salihgueler TWEEN ANIMATIONS
8. 8 @salihgueler Credit: uxinmotion
9. 9 @salihgueler EASING ANIMATION
10. 10 @salihgueler > $ flutter create flutter_animations
11. 11 @salihgueler void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Animation Demo', theme: new ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or press Run > Flutter Hot Reload in IntelliJ). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: new EasingAnimationWidget(), ); } } void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Animation Demo', theme: new ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or press Run > Flutter Hot Reload in IntelliJ). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: new EasingAnimationWidget(), ); } }
12. 11 @salihgueler void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Animation Demo', theme: new ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or press Run > Flutter Hot Reload in IntelliJ). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: new EasingAnimationWidget(), ); } } void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Animation Demo', theme: new ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or press Run > Flutter Hot Reload in IntelliJ). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: new EasingAnimationWidget(), ); } }
13. 12 @salihgueler class EasingAnimationWidget extends StatefulWidget { @override EasingAnimationWidgetState createState() => EasingAnimationWidgetState(); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> { @override Widget build(BuildContext context) { //TODO: Layout goes here } }
14. 13 @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); }
15. 13 @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); }
16. 13 @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); }
17. 14 @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); }
18. 14 @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); }
19. 14 @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); }
20. 15 @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); }
21. 15 @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); }
22. 15 @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); }
23. 16 @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); }
24. 16 @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); }
25. 16 @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); }
26. 17 @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); }
27. 17 @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); }
28. 17 @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); }
29. 18 @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); }
30. 18 @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); }
31. 18 @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); }
32. 19 @salihgueler ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } ……
33. 19 @salihgueler ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } ……
34. 19 @salihgueler ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } ……
35. 20 @salihgueler OFFSET & DELAY ANIMATION
36. 21 @salihgueler Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } }
37. 21 @salihgueler Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } }
38. 21 @salihgueler Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } }
39. 22 @salihgueler Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))),
40. 22 @salihgueler Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))),
41. 22 @salihgueler Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))),
42. 23 @salihgueler PARENTING ANIMATION
43. 24 @salihgueler Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); }
44. 24 @salihgueler Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); }
45. 24 @salihgueler Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); }
46. 25 @salihgueler Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: new Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: new Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))),
47. 25 @salihgueler Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: new Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: new Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))),
48. 25 @salihgueler Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: new Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: new Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: new Center( child: new Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))),
49. 26 @salihgueler TRANSFORMATION & MASKING ANIMATION
50. 27 @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); }
51. 27 @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); }
52. 27 @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); }
53. 28 @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); }
54. 28 @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); }
55. 28 @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); }
56. 29 @salihgueler @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: new Stack( children: <Widget>[ new Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), new Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: new Stack( children: <Widget>[ new Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), new Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); }
57. 29 @salihgueler @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: new Stack( children: <Widget>[ new Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), new Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: new Stack( children: <Widget>[ new Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), new Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); }
58. 29 @salihgueler @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: new Stack( children: <Widget>[ new Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), new Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: new Stack( children: <Widget>[ new Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), new Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); }
59. 30 @salihgueler VALUE CHANGE ANIMATION
60. 31 @salihgueler @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); } @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); }
61. 31 @salihgueler @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); } @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); }
62. 31 @salihgueler @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); } @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: new Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); }
63. 32 @salihgueler
64. 33 @salihgueler PHYSICS - BASED ANIMATIONS
65. 34 @salihgueler // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart'; // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart';
66. 34 @salihgueler // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart'; // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart';
67. 34 @salihgueler // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart'; // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart';
68. 35 @salihgueler SPRING ANIMATION
69. 36 @salihgueler double _squareEdgeSize = 200.0; SpringDescription _spring = new SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = new AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); } double _squareEdgeSize = 200.0; SpringDescription _spring = new SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = new AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); }
70. 36 @salihgueler double _squareEdgeSize = 200.0; SpringDescription _spring = new SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = new AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); } double _squareEdgeSize = 200.0; SpringDescription _spring = new SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = new AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); }
71. 36 @salihgueler double _squareEdgeSize = 200.0; SpringDescription _spring = new SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = new AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); } double _squareEdgeSize = 200.0; SpringDescription _spring = new SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = new AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); }
72. 37 @salihgueler @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = new SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = new SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); }
73. 37 @salihgueler @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = new SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = new SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); }
74. 37 @salihgueler @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = new SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = new SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: new Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); }
75. 38 @salihgueler Credit: InVision Credit: Frank Rapacciuolo Credit: ColinGarven CONCLUSION
76. 39 @salihgueler THANK YOU! GitHub: https://github.com/salihgueler/flutter-animations Medium: https://proandroiddev.com/animations-in-flutter Twitter: https://twitter.com/salihgueler