专栏首页Android知识点总结[- Flutter福利篇 -] Hero转场组件共享 — 附赠-路由动画工具类

[- Flutter福利篇 -] Hero转场组件共享 — 附赠-路由动画工具类

最近比较忙,很少发文章了。今天抽空把Hero的转场组件共享说一下 顺便发个转场的动画福利类,可以定义转场的时间,曲线,别客气,随便拿去用。 废话不多说,先看图:


  • 1.透明:FadeRouter

  • 2.缩放:ScaleRouter

  • 3.旋转:RotateRouter

  • 4.透明+缩放+旋转
  • 5.右--->左:Right2LeftRouter

  • 6.左--->右:Left2RightRouter

  • 7.上--->下:Top2BottomRouter

  • 8.下--->上:Bottom2TopRouter

Hero元素共享

也许上面吸引你的不是界面跳转的动画,而是那个头像神奇般的轨迹。下面就来说一下如何实现。

起始页:OriginPage
class OriginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      var hero= Hero(//----定义一个Hero,并添加tag标签,此中组件共享
        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(//容器,没啥好说的
        alignment: Alignment(-0.8, -0.8),
        child: hero,
        width: 250,
        height: 250*0.618,
        decoration: BoxDecoration(//添加渐变色
        gradient: LinearGradient(colors: [Colors.red.withAlpha(99),Colors.yellow.withAlpha(189),Colors.green.withAlpha(88),Colors.blue.withAlpha(230)])
      ),);

    return Scaffold(
      body: Center(//点击跳转
        child: GestureDetector(child: Card(elevation:5,child:container ,),onTap: (){
          _toNext(context);
        },),
      ),
    );
  }

  void _toNext(context) {//跳转路由
    Navigator.push(
        context,
//      FadeRouter(child:TargetPage()),
//      ScaleRouter(child:TargetPage()),
//      RotateRouter(child:TargetPage()),
//      ScaleFadeRotateRouter(child:TargetPage()),
//      Right2LeftRouter(child:TargetPage()),
//      Left2RightRouter(child:TargetPage()),
//      Top2BottomRouter(child:TargetPage()),
      Bottom2TopRouter(child:TargetPage()),//跳转+动画
    );
  }
}
目标页:TargetPage
class TargetPage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    var hero=Hero(//----定义一个Hero,为其添加标签,两个标签相同,则可以共享
      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)])
        ),
      ),
    );
  }
}

关于createRectTween属性

在回调中会给两个初始和结束的两个矩形,可以进行矩形动画来控制共享组件的区域,如下图在目标页:

var height=MediaQuery.of(context).size.height;
var width=MediaQuery.of(context).size.width;
var size=min(height,width);

 var hero=Hero(//----定义一个Hero,为其添加标签,两个标签相同,则可以共享
      createRectTween: ((r1,r2){
        return RectTween(begin: Rect.fromLTWH(size/2,0, size, size),end:  r2);
      }),

另外还有个要点:同一页面不能出现多处同名Hero


福利时间:路由动画工具

使用方法看上面的路由跳转处,当然你也可以根据下面的定制更酷炫的跳转效果。

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: 1.0).animate(
              CurvedAnimation(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: 1.0).animate(
                CurvedAnimation(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) =>
          RotationTransition(
            turns: Tween(begin: 0.1, end: 1.0).animate(
                CurvedAnimation(parent: a1, curve:curve,)),
            child: child,
          ));
}

//右--->左
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(
                CurvedAnimation(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(
                CurvedAnimation(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,//页面
      transitionsBuilder: (ctx, a1, a2, Widget child,) {//构建动画
        return RotationTransition(//旋转动画
          turns: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
            parent: a1,
            curve: curve,
          )),
          child: ScaleTransition(//缩放动画
            scale: Tween(begin: 0.0, end: 1.0).animate(
                CurvedAnimation(parent: a1, curve: curve)),
            child: FadeTransition(opacity://透明度动画
            Tween(begin: 0.5, end: 1.0).animate(CurvedAnimation(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);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [- Flutter 状态篇 -] 主题色切换+国际化 三连

    张风捷特烈
  • 【 开源计划 - Flutter组件】 旋转切换 toggle_rotate

    张风捷特烈
  • [- Flutter基础篇 -] 聊聊那些弹框

    张风捷特烈
  • vue 父子组件的方法调用

    庞小明
  • Flutter开发实战分析-pesto_demo解析

    以下代码基本参考于 flutter_gallery中的pesto_demo示例。(可以结合本文看源码)

    deep_sadness
  • [干货]数字未来(85页PPT)

    大数据文摘
  • 数据(事件)传递

    在平时的开发中我们都会遇到很多数据传递的例子,在前面的文章中我们接触队夺得就是构造方法属性的传递,但是flutter中并不是只有这一种传递的方法,今天我们就来看...

    flyou
  • Akka 指南 之「容错」

    容错(fault tolerance)概念与 Actor 相关,为了使用这些概念,需要在项目中添加如下依赖:

    CG国斌
  • 经典教程|10 分钟速成 Python3

    Python 是由吉多·范罗苏姆(Guido Van Rossum)在 90 年代早期设计。 它是如今最常用的编程语言之一。它的语法简洁且优美,几乎就是可执行的...

    py3study
  • @Controller 和 @RestController 区别是什么

    @RestController 在 Spring MVC 中就是 @Controller 和 @ResponseBody 注解的集合。

    HoneyMoose

扫码关注云+社区

领取腾讯云代金券