Flutter Hero動(dòng)畫案例

Hero 指的是可以在路由(頁面)之間“飛行”的 widget，簡(jiǎn)單來說 Hero 動(dòng)畫就是在路由切換時(shí)，有一個(gè)共享的 widget 可以在新舊路由間切換。由于共享的 widget 在新舊路由頁面上的位置、外觀可能有所差異，所以在路由切換時(shí)會(huì)從舊路逐漸過渡到新路由中的指定位置，這樣就會(huì)產(chǎn)生一個(gè) Hero 動(dòng)畫。

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Hero 動(dòng)畫

 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, //唯一標(biāo)記，前后兩個(gè)路由頁Hero的tag必須相同
              child: ClipOval(
                child: Image.asset(
                  "assets/datas/night.jpg",
                  width: 120,
                  height: 120,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ));
  }
}

效果圖


可以看到，實(shí)現(xiàn) Hero 動(dòng)畫只需要用 Hero 組件將要共享的 widget 包裝起來，并提供一個(gè)相同的 tag 即可，中間的過渡幀都是 Flutter Framework 自動(dòng)完成的。必須要注意， 前后路由頁的共享 Hero 的 tag 必須是相同的，F(xiàn)lutter Framework 內(nèi)部正是通過 tag 來確定新舊路由頁 widget 的對(duì)應(yīng)關(guān)系的。

但我們用的是 MaterialPageRoute 這個(gè)系統(tǒng)給我們提供好的路由，這個(gè)路由能讓我們?cè)?Android 或者 Ios 上呈現(xiàn)相應(yīng)的頁面跳轉(zhuǎn)效果，但在這里和 Hero 合起來看有點(diǎn)雜亂，別扭，我們稍微改一下：

   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", //唯一標(biāo)記，前后兩個(gè)路由頁Hero的tag必須相同
          child: ClipOval(
            child: Image.asset(
              "assets/datas/night.jpg",
              width: 120,
              height: 120,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

效果圖

通過 PageRouteBuilder 自定義自己的路由器，動(dòng)畫看起來明顯干凈了很多。

不過細(xì)心的我發(fā)現(xiàn)，在運(yùn)動(dòng)（飛翔）過程中，圖片在慢慢變大的同時(shí)好像也稍微有點(diǎn)變形。這其實(shí)我也不知道為啥，后來我從 Flutter 中文官網(wǎng)看到 MaterialRectCenterArcTween 這個(gè)類。這個(gè)類居然能讓控件在運(yùn)動(dòng)過程中圓角不變形。

我們先回頭看看 Hero 的構(gòu)造函數(shù)：

  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：[必須]用于關(guān)聯(lián)兩個(gè) Hero 動(dòng)畫的標(biāo)識(shí),前后兩個(gè)路由頁 Hero 的 tag 必須相同.

  • createRectTween：[可選]定義目標(biāo) Hero 的邊界，在從起始位置到目的位置的運(yùn)動(dòng)過程中該如何變化。

  • child：[必須]定義動(dòng)畫所呈現(xiàn)的 widget。

MaterialRectCenterArcTween 這個(gè)類正好能給我們返回 createRectTween 參數(shù)所需的實(shí)例。

我們?cè)賮砜匆粋€(gè)稍微高大上的 Hero 動(dòng)畫，其實(shí)我覺得沒啥改動(dòng)，只是界面做的稍微復(fù)雜一點(diǎn)，添加了 createRectTween。

實(shí)現(xiàn)一個(gè)復(fù)雜的 Hero 動(dòng)畫

  • 這里提一下 timeDilation = 3; 這是讓過渡動(dòng)畫時(shí)間稍微慢一點(diǎn)，默認(rèn)為 1.
timeDilation =3;//動(dòng)畫過渡時(shí)間

其實(shí)第二個(gè)案例就只是添加了 createRectTween，你可以試著注釋 createRectTween；或者案例 2 中直接注釋 Hero 控件；看看它們的動(dòng)畫效果是啥，想來你印象會(huì)更深。

有興趣的小伙伴關(guān)注公眾號(hào)，和我一起學(xué)習(xí)吧，本文代碼在文末。


全部代碼

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"; ////唯一標(biāo)記，前后兩個(gè)路由頁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; //動(dòng)畫過渡時(shí)間
    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, //唯一標(biāo)記，前后兩個(gè)路由頁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", //唯一標(biāo)記，前后兩個(gè)路由頁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,
          ),
        ),
      ),
    );
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容