Preface:
Dear students, during the recent National Day holiday, BECAUSE I didn’t go back to my hometown for the holiday (didn’t buy tickets), I wrote some small cases of flutter to share with you (the animation cases of flutter self-defined routing). So without further ado, we will officially start
The preparatory work
Need to install the flutter development environment: everyone can look at the previous tutorial: 1 win flutter system development environment installed tutorial: www.jianshu.com/p/152447bc8… 2 MAC flutter development environment installed tutorial: www.jianshu.com/p/bad2c35b4…
Effect:
Concrete implementation:
Gradient routing animation
First we’re going to define a custom routing class that inherits PageRouteBuilder and then we’re going to rewrite the constructor by passing in a Widget variable that we define in the constructor and then we’re going to add some properties when spuer points to the parent constructor
TransitionDuration, pageBuilder, transitionsBuilder and so on and then we return FadeTransition to implement the gradient effect concrete code
import 'package:flutter/material.dart'; /** ** Created by :xuqing * October 5, 2020 19:06:43 * GradualChangeRoute extends PageRouteBuilder{Final Widget Widget; GradualChangeRoute(this.widget):super( transitionDuration:Duration(seconds: 2), pageBuilder:( BuildContext context, Animation<double>animation1, Animation<double>animation2, ){ return widget; }, transitionsBuilder:( BuildContext context, Animation<double>animation1, Animation<double>animation2, Return FadeTransition(opacity: Tween(begin: 0.0,end: 1.0). Animate (CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn ) ), child: child, ); }); }Copy the code
Specific call:
Navigator.of(context).push(GradualChangeRoute(SencondPage()));
Copy the code
Scaling route animation
The implementation is similar to the above gradient which requires custom route inheritance PageRouteBuilder except when we return, we return
ScaleTransition property to achieve a ScaleTransition route animation effect specific code:
import 'package:flutter/material.dart'; /** ** Created by :xuqing * October 5, 2020 19:06:43 * Class ZoomRoute extends PageRouteBuilder{final Widget Widget; ZoomRoute(this.widget):super( transitionDuration:Duration(seconds: 2), pageBuilder:( BuildContext context, Animation<double>animation1, Animation<double>animation2, ){ return widget; }, transitionsBuilder:( BuildContext context, Animation<double>animation1, Animation<double>animation2, Return ScaleTransition(scale: Tween(begin: 0.0,end: 1.0). Animate (CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn )), child: child, ); }); }Copy the code
Specific call:
Navigator.of(context).push(ZoomRoute(SencondPage()));
Copy the code
#### Rotate and zoom and animate the route:We do this in a similar way to the above gradient where we need a custom route to inherit the PageRouteBuilder except when we return we return the RotationTransition rotation property and then we nested the ScaleTransition inside the rotation property component child The component that scales the property returns our defined child as follows
Return RotationTransition(turns: Tween(begin: 0.0,end: 1.0). Animate (CurvedAnimation(parent: Animation1, Curve: Curves. FastOutSlowIn), child: ScaleTransition(scale: Tween(begin: 0.0,end: Animate (Parent: animation1, Curve: Curves. FastOutSlowIn), child: child,),);Copy the code
Complete rotation and scaling routing class code:
import 'package:flutter/material.dart'; /** ** Created by :xuqing * October 5, 2020 19:06:43 * */ Class RotateAndZoomRoute extends PageRouteBuilder{final Widget Widget; RotateAndZoomRoute(this.widget):super( transitionDuration:Duration(seconds: 2), pageBuilder:( BuildContext context, Animation<double>animation1, Animation<double>animation2, ){ return widget; }, transitionsBuilder:( BuildContext context, Animation<double>animation1, Animation<double>animation2, Widget child){return RotationTransition(turns: Tween(begin: 0.0,end: 1.0). Animate (CurvedAnimation(parent: Animation1, Curve: Curves. FastOutSlowIn), child: ScaleTransition(scale: Tween(begin: 0.0,end: Animate (Parent: animation1, Curve: Curves. FastOutSlowIn), child: child,),); }); }Copy the code
Specific call:
Navigator.of(context).push(RotateAndZoomRoute(SencondPage()));
Copy the code
Slide left and right route animation:
The implementation is similar to the above gradient which requires custom route inheritance PageRouteBuilder except when we return, we return
The SlideTransition property is used to animate the left/right sliding route.
Return SlideTransition(position: Tween<Offset>(begin: Offset(-1.0,0.0), end:Offset(0.0,0.0),). Animate (Parent: animation1, curve: Curves.fastOutSlowIn )), child: child, );Copy the code
Complete left and right sliding routing class code:
import 'package:flutter/material.dart'; import 'second_page.dart'; import '.. /routes/gradual_change_route.dart'; import '.. /routes/zoom_route.dart'; import '.. /routes/rotateandzoom_route.dart'; import '.. /routes/sliding_around_route.dart'; /** ** Founder: xuqing * Created on 5 October 2020 16:57:33 * * * */ class FirstPage extends StatelessWidget {FirstPage({Key Key}) : super(Key: Key); TextStyle styles=TextStyle(fontSize: 20,color: Colors.white); @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( backgroundColor: Colors. Blue, appBar: appBar (title: Text("Firstpage",style: TextStyle(fontSize: 36.0), elevation: 4,), body: Center( child:Column( children: <Widget>[ MaterialButton( child: Row( mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [Text (" gradient" style: styles,), Icon (the Icons navigate_next, color: Colors. White, size: 64.0,),],), onPressed: (){ Navigator.of(context).push(GradualChangeRoute(SencondPage())); }, ), MaterialButton( child: Row( mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [Text (" zoom", style: styles,), Icon (the Icons navigate_next, color: Colors. White, size: 64.0,),],), onPressed: (){ Navigator.of(context).push(ZoomRoute(SencondPage())); }, ), MaterialButton( child: Row( mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [Text (" scaling and rotation," style: styles,), Icon (the Icons navigate_next, color: Colors. White, size: 64.0,),],), onPressed: (){ Navigator.of(context).push(RotateAndZoomRoute(SencondPage())); }, ), MaterialButton( child: Row( mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [Text (" left" style: styles,), Icon (the Icons navigate_next, color: Colors. White, size: 64.0,),],), onPressed: (){ Navigator.of(context).push(SlidingAroundRoute(SencondPage())); }, ), ], ) ), ); }}Copy the code
Specific call:
Navigator.of(context).push(SlidingAroundRoute(SencondPage()));
Copy the code
This concludes our discussion of custom route animations. Of course, there are many other animate properties available in the Flutter class for those who are interested in trying them out for themselves
Conclusion:
The route jump animation in the flutter is relatively easy to implement. The FLUTTER SDK already provides many useful animation properties for us to call. All we need to do is to call each other and nest them to achieve cool animation interaction. I will contribute more useful code to share with you in the future. If you think the article is good, please pay attention and star. Thank you
The project address
Yards cloud: gitee.com/qiuyu123/cu…