I am very busy recently and seldom send articles. Take time today to talk about Hero transition component sharing

By the way, send a transition animation welfare class, you can define the transition time, curve, feel free to use. Without further ado, let’s look at the picture:

  • 1. The transparent:FadeRouter

  • 2. Zoom:ScaleRouter

  • 3. The rotation:RotateRouter

  • 4. Transparent + Zoom + Rotate

  • 5. Right –> Left:Right2LeftRouter

  • 6. Left –> right:Left2RightRouter

  • 7. Up –> Down:Top2BottomRouter

  • 8. Down –> Up:Bottom2TopRouter

Hero element sharing

Maybe it’s the head’s magical trajectory that appeals to you, not the jump animation. Here’s how to do it.

Start page: OriginPage
class OriginPage extends StatelessWidget { @override Widget build(BuildContext context) { var hero= Hero(//---- define a Hero and add a tag tag, where components share tag: 'user-head', child: ClipRRect(borderRadius: BorderRadius.all(Radius.circular(30)), child: Image.asset( "images/mani.jpg",width: 60,height: 60,fit: BoxFit.cover, ), ), ); Var container= container (// container, -0.8), child: hero, width: 250, height: 250*0.618, decoration: BoxDecoration(// add gradient: LinearGradient(colors: [Colors.red.withAlpha(99),Colors.yellow.withAlpha(189),Colors.green.withAlpha(88),Colors.blue.withAlpha(230)]) ),); Return Scaffold (body: Center (/ / click jump child: GestureDetector (child: Card (elevation: 5, the child: container,), onTap: (){ _toNext(context); },),),); } void _toNext(context) {// Redirect route navigator.push (context, // FadeRouter(child:TargetPage()), // ScaleRouter(child:TargetPage()), // RotateRouter(child:TargetPage()), // ScaleFadeRotateRouter(child:TargetPage()), // Right2LeftRouter(child:TargetPage()), // Left2RightRouter(child:TargetPage()), Bottom2TopRouter(Child :TargetPage()), Bottom2TopRouter(child:TargetPage())),// Jump + animation); }}Copy the code
TargetPage: TargetPage
class TargetPage extends StatelessWidget { @override Widget build(BuildContext context) { var Hero = hero (//---- define a hero and add a tag to it. If two tags are the same, you can share the tag: 'user-head', child: Padding(Padding: EdgeInsets. All (16.0), child: CircleAvatar(backgroundColor: Colors. Transparent, RADIUS: 72.0, backgroundImage: AssetImage( "images/mani.jpg", ), ), ), ); var touch=InkWell(onTap: (){ Navigator.of(context).pop(); },child: hero,); return Scaffold( appBar: AppBar(leading:touch ,), body: Container( decoration: BoxDecoration( gradient: LinearGradient(colors: [Colors.red.withAlpha(99),Colors.yellow.withAlpha(189),Colors.green.withAlpha(88),Colors.blue.withAlpha(230)]) ), ), ); }}Copy the code
About the createRectTween property

In the callback, two rectangles are given to start and end. You can animate the rectangles to control the area of the shared component, as shown on the target page:

var height=MediaQuery.of(context).size.height; var width=MediaQuery.of(context).size.width; var size=min(height,width); Var hero= hero (//---- define a hero and add a label to it. If the two labels are the same, you can share createRectTween: ((r1, R2){return RectTween(begin: The Rect. FromLTWH (size / 2, 0, the size and the size), end: r2); }),Copy the code

Another important point: don't have more than one Hero of the same name on the same page

Bonus time: Routing animation tool

Use method to see the above route jump, of course, you can also customize according to the following more cool jump effect.

import 'package:flutter/cupertino.dart'; Class ScaleRouter<T> extends PageRouteBuilder<T> {final Widget child; final int duration_ms; final Curve curve; ScaleRouter({this.child, this.duration_ms = 500,this.curve=Curves.fastOutSlowIn}) : super( pageBuilder: (context, animation, secondaryAnimation) => child, transitionDuration: Duration(milliseconds: Duration_ms), transitionsBuilder: (Context, A1, A2, child) => ScaleTransition(scale: Tween(begin: 0.0, end: .animate(Parent: a1, curve: curve), child: child,),); } class FadeRouter<T> extends PageRouteBuilder<T> {final Widget child; final int duration_ms; final Curve curve; FadeRouter({this.child, this.duration_ms = 500,this.curve=Curves.fastOutSlowIn}) : super( pageBuilder: (context, animation, secondaryAnimation) => child, transitionDuration: Duration(milliseconds: Duration_ms), transitionsBuilder: (context, A1, a2, child) => FadeTransition(opacity: Tween(begin: 0.1, end: .animate(Parent: a1, curve:curve,), child: child,)); } class RotateRouter<T> extends PageRouteBuilder<T> {final Widget child; final int duration_ms; final Curve curve; RotateRouter({this.child, this.duration_ms = 500,this.curve=Curves.fastOutSlowIn}) : super( pageBuilder: (context, animation, secondaryAnimation) => child, transitionDuration: Duration(milliseconds: Duration_ms), transitionsBuilder: (Context, A1, A2, child) => Transition(turns: Tween(begin: 0.1, end: .animate(Parent: a1, curve:curve,), child: child,)); } // right --> left class Right2LeftRouter<T> extends PageRouteBuilder<T> {final Widget child; final int duration_ms; final Curve curve; Right2LeftRouter({this.child,this.duration_ms=500,this.curve=Curves.fastOutSlowIn}) :super( transitionDuration:Duration(milliseconds: duration_ms), pageBuilder:(ctx,a1,a2){return child; }, transitionsBuilder:(ctx,a1,a2,Widget child,) { return SlideTransition( position: Tween<Offset>( begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0),). Animate (CurvedAnimation(parent: A1, curve: curve)), child: child); }); } // class Left2RightRouter<T> extends PageRouteBuilder<T> {final Widget child; final int duration_ms; final Curve curve; List<int> mapper; Left2RightRouter({this.child,this.duration_ms=500,this.curve=Curves.fastOutSlowIn}) :assert(true),super( transitionDuration:Duration(milliseconds: duration_ms), pageBuilder:(ctx,a1,a2){return child; }, transitionsBuilder:(ctx,a1,a2,Widget child,) { return SlideTransition( position: Tween<Offset>( begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0),). Animate (Parent: a1, curve: curve), child: child); }); } // Class Top2BottomRouter<T> extends PageRouteBuilder<T> {final Widget child; final int duration_ms; final Curve curve; Top2BottomRouter({this.child,this.duration_ms=500,this.curve=Curves.fastOutSlowIn}) :super( transitionDuration:Duration(milliseconds: duration_ms), pageBuilder:(ctx,a1,a2){return child; }, transitionsBuilder:(ctx,a1,a2,Widget child,) { return SlideTransition( position: Tween<Offset>( begin: Offset(0.0,-1.0), end: Offset(0.0, 0.0),). Animate (CurvedAnimation(parent: A1, curve: curve), child: child); }); } class Bottom2TopRouter<T> extends PageRouteBuilder<T> {final Widget child; final int duration_ms; final Curve curve; Bottom2TopRouter({this.child,this.duration_ms=500,this.curve=Curves.fastOutSlowIn}) :super( transitionDuration:Duration(milliseconds: duration_ms), pageBuilder:(ctx,a1,a2){return child; }, transitionsBuilder:(ctx,a1,a2,Widget child,) { return SlideTransition( position: Tween<Offset>( begin: Offset(0.0, 1.0), end: Offset(0.0, 0.0),). Animate (Parent: a1, curve: curve), child: child); }); } class ScaleFadeRotateRouter<T> extends PageRouteBuilder<T> {Final Widget child; final int duration_ms; final Curve curve; ScaleFadeRotateRouter({this.child, this.duration_ms = 500,this.curve=Curves.fastOutSlowIn}) : super( transitionDuration: Duration(milliseconds: duration_ms), pageBuilder: (CTX, a1, a2)=>child,// page transitionsBuilder: (CTX, A1, A2, Widget child,) {return RotationTransition(// Rotate animation turns: Tween(begin: 0.0, end: Animate (Parent: a1, curve: curve,)), child: ScaleTransition(begin: 0.0, end: Animate (Animate (parent: a1, curve: curve)), child: FadeTransition(opacity:// opacity: Tween(begin: 0.5, end: .animate(Parent: a1, curve: curve), child: child,),); }); } class NoAnimRouter<T> extends PageRouteBuilder<T> {final Widget Page; NoAnimRouter(this.page) : super( opaque: false, pageBuilder: (context, animation, secondaryAnimation) => page, transitionDuration: Duration(milliseconds: 0), transitionsBuilder: (context, animation, secondaryAnimation, child) => child); }Copy the code
conclusion

This is the end of this article. If you want to taste Flutter quickly, Flutter For Seven days is a must-have. If you want to explore it, follow in my footsteps and complete a Flutter tour. In addition, I have a Flutter wechat communication group. You are welcome to join and discuss Flutter issues together. My wechat account is ZDL1994328.