如何在颤动中改变英雄动画的速度

Question

我按照Flutter's website的指示做了简单的英雄动画

它按照说明中的说明工作，但在我的情况下，我希望它从第一个屏幕到第二个屏幕的动画要慢得多。有谁知道如何改变这个动画的速度？

Answer 1

要修改转换速度，您必须调整PageRoute转换持续时间（正如@diegoveloper已经指出的那样）。

如果您想保持默认转换，可以创建一个实现MaterialPageRoute的类。如果您已经拥有自己的过渡或想要创建过渡，则可以使用PageRouteBuilder轻松构建自己的过渡。只需调整transitionDuration。

这是一个小的独立示例，使用PageRouteBuilder：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page1(),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            RaisedButton(
              child: Text('Page2'),
              onPressed: () => Navigator.push(
                  context,
                  PageRouteBuilder(
                      transitionDuration: Duration(seconds: 2),
                      pageBuilder: (_, __, ___) => Page2())),
            ),
            Hero(tag: 'home', child: Icon(Icons.home))
          ],
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'home',
          child: Icon(
            Icons.home,
          ),
        ),
      ),
    );
  }
}