0
点赞
收藏
分享

微信扫一扫

Flutter Hero动画案例

墨春 2021-10-04 阅读 65
Flutter学习Flutter...FlutterFlutter圈子All in ...

Hero 指的是可以在路由(页面)之间“飞行”的 widget，简单来说 Hero 动画就是在路由切换时，有一个共享的 widget 可以在新旧路由间切换。由于共享的 widget 在新旧路由页面上的位置、外观可能有所差异，所以在路由切换时会从旧路逐渐过渡到新路由中的指定位置，这样就会产生一个 Hero 动画。

实现一个简单的 Hero 动画

 Container(
                      height: 100,
                      alignment: Alignment.center,
                      child: InkWell(
                        child: Hero(
                            tag: Tag,
                            child: ClipOval(
                              child: Image.asset(
                                "assets/datas/night.jpg",
                                width: 80,
                                height: 80,
                                fit: BoxFit.cover,
                              ),
                            )),
                        onTap: () {
                      Navigator.of(context).push(
                          new MaterialPageRoute(builder: (BuildContext context) {
                           return new HeroAnimationPage1();
                       }));
                        },
                      ),
                    ),
  • HeroAnimationPage1
class HeroAnimationPage1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Hero1"),
        ),
        body: Center(
          child: Container(
            margin: EdgeInsets.all(20),
            child: Hero(
              tag: Tag, //唯一标记，前后两个路由页Hero的tag必须相同
              child: ClipOval(
                child: Image.asset(
                  "assets/datas/night.jpg",
                  width: 120,
                  height: 120,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ));
  }
}

效果图


可以看到，实现 Hero 动画只需要用 Hero 组件将要共享的 widget 包装起来，并提供一个相同的 tag 即可，中间的过渡帧都是 Flutter Framework 自动完成的。必须要注意， 前后路由页的共享 Hero 的 tag 必须是相同的，Flutter Framework 内部正是通过 tag 来确定新旧路由页 widget 的对应关系的。

但我们用的是 MaterialPageRoute 这个系统给我们提供好的路由，这个路由能让我们在 Android 或者 Ios 上呈现相应的页面跳转效果，但在这里和 Hero 合起来看有点杂乱，别扭，我们稍微改一下：

   Container(
                      height: 100,
                      alignment: Alignment.center,
                      child: InkWell(
                        child: Hero(
                            tag: Tag,
                            child: ClipOval(
                              child: Image.asset(
                                "assets/datas/night.jpg",
                                width: 80,
                                height: 80,
                                fit: BoxFit.cover,
                              ),
                            )),
                        onTap: () {
//                    Navigator.of(context).push(
//                        new MaterialPageRoute(builder: (BuildContext context) {
//                          return new HeroAnimationPage1();
//                        }));

                          Navigator.push(context, PageRouteBuilder(pageBuilder:
                              (BuildContext context, Animation animation,
                                  Animation secondaryAnimation) {
                            return new FadeTransition(
                              opacity: animation,
                              child: Scaffold(
                                appBar: AppBar(
                                  title: Text("Fade"),
                                ),
                                body: HeroAnimationRouteWithFade(),
                              ),
                            );
                          }));
                        },
                      ),
                    ),
  • HeroAnimationRouteWithFade
class HeroAnimationRouteWithFade extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: EdgeInsets.all(20),
        child: Hero(
          tag: "tag", //唯一标记，前后两个路由页Hero的tag必须相同
          child: ClipOval(
            child: Image.asset(
              "assets/datas/night.jpg",
              width: 120,
              height: 120,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

效果图

通过 PageRouteBuilder 自定义自己的路由器，动画看起来明显干净了很多。

不过细心的我发现，在运动（飞翔）过程中，图片在慢慢变大的同时好像也稍微有点变形。这其实我也不知道为啥，后来我从 Flutter 中文官网看到 MaterialRectCenterArcTween 这个类。这个类居然能让控件在运动过程中圆角不变形。

我们先回头看看 Hero 的构造函数：

  const Hero({
    Key key,
    @required this.tag,
    this.createRectTween,
    this.flightShuttleBuilder,
    this.placeholderBuilder,
    this.transitionOnUserGestures = false,
    @required this.child,
  }) : assert(tag != null),
       assert(transitionOnUserGestures != null),
       assert(child != null),
       super(key: key);

  • tag：[必须]用于关联两个 Hero 动画的标识,前后两个路由页 Hero 的 tag 必须相同.

  • createRectTween：[可选]定义目标 Hero 的边界，在从起始位置到目的位置的运动过程中该如何变化。

  • child：[必须]定义动画所呈现的 widget。

MaterialRectCenterArcTween 这个类正好能给我们返回 createRectTween 参数所需的实例。

我们再来看一个稍微高大上的 Hero 动画，其实我觉得没啥改动，只是界面做的稍微复杂一点，添加了 createRectTween。

实现一个复杂的 Hero 动画

  • 这里提一下 timeDilation = 3; 这是让过渡动画时间稍微慢一点，默认为 1.
timeDilation =3;//动画过渡时间

其实第二个案例就只是添加了 createRectTween，你可以试着注释 createRectTween；或者案例 2 中直接注释 Hero 控件；看看它们的动画效果是啥，想来你印象会更深。


全部代码

import 'package:flutter/material.dart';
import 'package:flutter_travel/widgets/item_widget.dart';

import 'package:flutter/scheduler.dart' show timeDilation;
import 'dart:math' as math;

const Tag = "tag"; ////唯一标记，前后两个路由页Hero的tag必须相同

class HeroPage extends StatefulWidget {
  @override
  _HeroPageState createState() => _HeroPageState();
}

class _HeroPageState extends State<HeroPage> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    timeDilation = 3; //动画过渡时间
    return Scaffold(
      appBar: AppBar(
        title: Text("Hero"),
      ),
      body: Container(
        margin: EdgeInsets.only(top: 30, right: 5, left: 5),
        child: Column(
          children: <Widget>[
            Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      height: 100,
                      alignment: Alignment.center,
                      child: InkWell(
                        child: Hero(
                            tag: Tag,
                            child: ClipOval(
                              child: Image.asset(
                                "assets/datas/night.jpg",
                                width: 80,
                                height: 80,
                                fit: BoxFit.cover,
                              ),
                            )),
                        onTap: () {
//                    Navigator.of(context).push(
//                        new MaterialPageRoute(builder: (BuildContext context) {
//                          return new HeroAnimationPage1();
//                        }));

                          Navigator.push(context, PageRouteBuilder(pageBuilder:
                              (BuildContext context, Animation animation,
                                  Animation secondaryAnimation) {
                            return new FadeTransition(
                              opacity: animation,
                              child: Scaffold(
                                appBar: AppBar(
                                  title: Text("Fade"),
                                ),
                                body: HeroAnimationRouteWithFade(),
                              ),
                            );
                          }));
                        },
                      ),
                    ),
                    Container(
                      height: 40,
                      width: double.infinity,
                      alignment: Alignment.center,
                      margin: EdgeInsets.only(top: 30),
                      child: Text(
                        "下面的案例仅仅只是添加了RectTween",
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),
                  ],
                )),
            Expanded(
                flex: 2,
                child: Container(
                  alignment: Alignment.bottomCenter,
                  margin: EdgeInsets.only(bottom: 100),
                  child: _buildHero(context, 'assets/datas/empty.png', '空空如也'),
                ))
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }
}

class HeroAnimationPage1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Hero1"),
        ),
        body: Center(
          child: Container(
            margin: EdgeInsets.all(20),
            child: Hero(
              tag: Tag, //唯一标记，前后两个路由页Hero的tag必须相同
              child: ClipOval(
                child: Image.asset(
                  "assets/datas/night.jpg",
                  width: 120,
                  height: 120,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ));
  }
}

class HeroAnimationRouteWithFade extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: EdgeInsets.all(20),
        child: Hero(
          tag: "tag", //唯一标记，前后两个路由页Hero的tag必须相同
          child: ClipOval(
            child: Image.asset(
              "assets/datas/night.jpg",
              width: 120,
              height: 120,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

///////////////////////////////////
//华丽的分割线
///////////////////////////////////

const double kMinRadius = 40.0;
const double kMaxRadius = 150.0;

class Photo extends StatelessWidget {
  Photo({Key key, this.photo, this.color, this.onTap}) : super(key: key);

  final String photo;
  final Color color;
  final VoidCallback onTap;

  Widget build(BuildContext context) {
    return Material(
      color: Colors.grey.withOpacity(0.25),
      child: InkWell(
        onTap: onTap,
        child: Image.asset(
          photo,
          color: Colors.green.withOpacity(.8),
          fit: BoxFit.contain,
        ),
      ),
    );
  }
}

RectTween _createRectTween(Rect begin, Rect end) {
  print("begin=${begin}\t end=${end}");
  return MaterialRectCenterArcTween(begin: begin, end: end);
}

Widget _buildHero(BuildContext context, String imageName, String description) {
  return Container(
    width: kMinRadius * 2.0,
    height: kMinRadius * 2.0,
    child: Hero(
      createRectTween: _createRectTween,
      tag: imageName,
      child: RadialExpansion(
        maxRadius: kMaxRadius,
        child: Photo(
          photo: imageName,
          onTap: () {
            Navigator.of(context).push(
              PageRouteBuilder<void>(
                pageBuilder: (BuildContext context, Animation<double> animation,
                    Animation<double> secondaryAnimation) {
                  return FadeTransition(
                      opacity: animation,
                      child: _showDetailPage(context, imageName, description));
                },
              ),
            );
          },
        ),
      ),
    ),
  );
}

Widget _showDetailPage(
    BuildContext context, String imageName, String description) {
  return Container(
    color: Theme.of(context).canvasColor,
    child: Center(
      child: Card(
        elevation: 8.0,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(
              width: kMaxRadius * 2.0,
              height: kMaxRadius * 2.0,
              child: Hero(
                createRectTween: _createRectTween,
                tag: imageName,
                child: RadialExpansion(
                  maxRadius: kMaxRadius,
                  child: Photo(
                    photo: imageName,
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ),
              ),
            ),
            Text(
              description,
              style: TextStyle(
                fontWeight: FontWeight.bold,
              ),
              textScaleFactor: 3.0,
            ),
            const SizedBox(height: 16.0),
          ],
        ),
      ),
    ),
  );
}

class RadialExpansion extends StatelessWidget {
  RadialExpansion({
    Key key,
    this.maxRadius,
    this.child,
  })  : clipRectSize = 2.0 * (maxRadius / math.sqrt2),
        super(key: key);

  final double maxRadius;
  final clipRectSize;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Center(
        child: SizedBox(
          width: clipRectSize,
          height: clipRectSize,
          child: ClipRect(
            child: child,
          ),
        ),
      ),
    );
  }
}
举报

相关推荐

Flutter(十六)——Hero动画

Heroflutter移动开发dartandroid

Flutter 学习之旅(三十六) Flutter 动画(三) Hero动画

Flutter 学习之旅Flutter记录自学flu...

Flutter Hero控件实现共享元素转换动画

Flutter前端开发那些事儿flutter

Flutter 自定义路由动画案例

日记本Flutter UIFlutter

Flutter：动画

spring bootwebsocketjava

《Flutter 动画系列》组合动画

FlutterFlutter圈子Flutter...

Flutter 06 动画

react.js前端前端框架

Flutter动画相关

Flutter

flutter-动画

随记flutter

Flutter - 登录动画

FlutterFlutter相关fluter文章收藏flutter前端iOS相关记录本值得收藏的文章
0 条评论