Flutter Hero动画让你的APP页面切换充满动效 不一样的体验 不一样的细节处理

优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维。


本文章实现的Demo效果,如下图所示:
在这里插入图片描述

1 首先是页面的主体

在这里使用的是Scaffold脚手架来构建,代码如下:

class HeroHomePage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<HeroHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //背景
      backgroundColor: Colors.grey[200],
      //标题
      appBar: AppBar(
        title: Text("每日分享"),
      ),
      //页面主体
      body: buildBodyWidget(),
    );
  }
  ...
}

页面的主体就是这里显示的图文,使用Row来将图片与文本区域左右排列,代码如下:
在这里插入图片描述

  Widget buildBodyWidget() {
    //水波纹点击事件监听
    return InkWell(
      //手指点击抬起时的回调
      onTap: () {
        //打开新的页面
        openPageFunction();
      },
      child: Container(
        padding: EdgeInsets.all(10),
        color: Colors.white,
        //线性布局左右排列
        child: Row(
          //主轴方向开始对齐 在这里是左对齐 
          mainAxisAlignment: MainAxisAlignment.start,
          //交叉轴上开始对齐 在这里是顶部对齐
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            //左侧的图片
            buildLeftImage(),
            //右侧的文本区域
            buildRightTextArea()],
        ),
      ),
    );
  }

2 显示图片的构建

左侧的图片区域 需要 使用 Hero 来包裹,因为这里就是Hero动画触发的效果,代码如下:

  ///左侧的图片区域
  Container buildLeftImage() {
    return Container(
      margin: EdgeInsets.only(right: 12),
      child: Hero(
        tag: "test",
        child: Image.asset(
          "images/banner3.webp",
          width: 96,
          fit: BoxFit.fill,
          height: 96,
        ),
      ),
    );
  }

3 右侧的文本区域

在这里插入图片描述

  ///右侧的文本区域
  Expanded buildRightTextArea() {
    return Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            "优美的应用",
            softWrap: true,
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
            style: TextStyle(fontSize: 16),
          ),
          Text(
            "优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维。",
            softWrap: true,
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
            style: TextStyle(fontSize: 14, color: Colors.black38),
          )
        ],
      ),
    );
  }

4 自定义透明过度动画路由

Hero达成两个页面之间共享元素的连动效果,但是页面的切换效果造成碍眼的体验,配合一个透明过度,达成舒适的体验,代码如下:

  ///自定义路由动画
  void openPageFunction() {
    Navigator.of(context).push(
      PageRouteBuilder(
        pageBuilder: (BuildContext context, Animation<double> animation,
            Animation<double> secondaryAnimation) {
          //目标页面
          return DetailsPage();
        },
        //打开新的页面用时
        transitionDuration: Duration(milliseconds: 1800),
        //关半页岩用时
        reverseTransitionDuration: Duration(milliseconds: 1800),
        //过渡动画构建
        transitionsBuilder: (
          BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
          Widget child,
        ) {
          //渐变过渡动画
          return FadeTransition(
            // 透明度从 0.0-1.0
            opacity: Tween(begin: 0.0, end: 1.0).animate(
              CurvedAnimation(
                parent: animation,
                //动画曲线规则,这里使用的是先快后慢
                curve: Curves.fastOutSlowIn,
              ),
            ),
            child: child,
          );
        },
      ),
    );
  }

5 最后就是点击图文信息打开的详情页面

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //背景透明
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("精彩人生"),
      ),
      body: buildCurrentWidget(context),
    );
  }

  Widget buildCurrentWidget(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(8),
      margin: EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //图片区域
          buildHero(context),
          SizedBox(
            width: 22,
          ),
          //文字区域
          buildTextContainer(),
        ],
      ),
    );
  }
}

页面分为两部分,第一部分的图片,使用Hero过渡 ,需要注意的是 目标 Hero 的直接子类必须是一个 Material包裹,代码如下:

  ///图片区域
  Hero buildHero(BuildContext context) {
    return Hero(
      tag: "test",
      child: Material(
        color: Colors.blue,
        child: InkWell(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Image.asset(
            "images/banner3.webp",
            fit: BoxFit.fill,
          ),
        ),
      ),
    );
  }

第二部分就是一个普通的文本了


  Container buildTextContainer() {
    return Container(
      child: Text(
        "优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力",
        softWrap: true,
        overflow: TextOverflow.ellipsis,
        maxLines: 3,
        style: TextStyle(fontSize: 16),
      ),
    );
  }

Flutter Hero动画 让你的APP页面切换充满动效 不一样的体验 优美的视觉

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

【x4】一目了然的源码

【x5】简短的视频不一样的体验


不局限于思维,不局限语言限制,才是编程的最高境界。

以小编的性格,肯定是要录制一套视频的,随后会上传

有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人

在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
已标记关键词 清除标记
相关推荐
<p> <span style="color:#333333;">Flutter是谷歌的移UI框架,可以快速在iOS和Android上构建高质量的用户界面。本课程以理论+实例的方式带领大家学习动画的基础理论及各种动画的编写。</span> </p> <p> <span style="color:#333333;"><strong>本次课程包含以下内容:<br /> 动画基本概念</strong><br /> <span style="color:#333333;">动画的本质</span><br /> <span style="color:#333333;">帧与FPS</span><br /> <span style="color:#333333;">插值器/估值器</span><br /> <span style="color:#333333;">动画类型</span><br /> <br /> <strong>动画相关核心类</strong><br /> <span style="color:#333333;">Animation介绍</span><br /> <span style="color:#333333;">AnimationController动画管理类</span><br /> <span style="color:#333333;">CurvedAnimation非线性动画</span><br /> <span style="color:#333333;">Tween补间值生成类</span><br /> <br /> <strong>动画事件监听及控制流程</strong><br /> <span style="color:#333333;">Listeners和StatusListeners动画监听</span><br /> <span style="color:#333333;">动画控制流程</span><br /> <br /> <strong>动画示例</strong><br /> <span style="color:#333333;">字体放大动画</span><br /> <span style="color:#333333;">缓动画</span><br /> <span style="color:#333333;">遮罩动画</span><br /> <span style="color:#333333;">数字变化动画</span><br /> <span style="color:#333333;">图表动画</span><br /> <span style="color:#333333;">AnimatedOpacity实现渐变果</span><br /> <span style="color:#333333;">Hero实现页面切换动画</span><br /> </span> </p>
<p> <br /> </p> <p> <br /> </p> <p> <br /> </p> <p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <span>本课程根据实际开发中总结出来的一些学习思路,从零开始详细讲解</span><span>Flutter</span><span>的基础知识点。从简到难,从浅入深,逐步带领大家了解</span><span>Flutter</span><span>,熟悉</span><span>Flutter</span><span>的组成部分,并且带领大家学习如何使用</span><span>Flutter</span><span>实现</span><span>UI</span><span>功能编写。通过对本视频的学习,你将会掌握</span><span>Flutter</span><span>常用组件和常用布局构建复杂布局、</span><span>Flutter</span><span>路由导航实现多页面构建和交互、</span><span>Flutetr</span><span>手势处理动画实现态交互果,以及如何使用音视频、图片、文字、字体等资源。除此之外,你还可以收获每一章节遇到的重难点问题的解决方案。</span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858"></a><a href="https://edu.csdn.net/course/detail/26227">https://edu.csdn.net/course/detail/26227</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方式:电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858"></a><a href="https://edu.csdn.net/course/detail/26227">https://edu.csdn.net/course/detail/26227</a>,点击右下方课程资料、代码、课件等打包下载 </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页