如何在扑扑中改变英雄动画的速度 [英] How to change speed of a hero animation in flutter

问题描述

我已按照

  import'package:flutter/material.dart';void main()=>runApp(MyApp());MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回MaterialApp(主页:Page1()，);}}类Page1扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回脚手架(身体:中心(子:列(mainAxisAlignment:MainAxisAlignment.spaceAround，子代:< Widget> [加高按钮(子代:Text('Page2')，onPressed:()=>Navigator.push(语境，PageRouteBuilder(transitionDuration:持续时间(秒:2)，pageBuilder:(_，__，___)=>第2页()))，)，英雄(标签:家"，孩子:图标(Icons.home))]，)，)，);}}类Page2扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回脚手架(身体:中心(孩子:英雄(标签:家"，孩子:图标(Icons.home，)，)，)，);}} 

I have made simple hero animation following instructions from Flutter's website

It works as described in the instructions but in my case, I would like it to animate much more slowly from the first to the second screen. do anyone know how to change the speed of this animation?

解决方案

To modify the transition speed, you'll have to adjust the PageRoute transition duration (as already pointed out by @diegoveloper).

If you wanna keep the default transition, you can create a class implementing MaterialPageRoute. If you already have your own transition or want to create one you can use the PageRouteBuilder to easily build your own. Simply adjust the transitionDuration.

Here's a small standalone example, using the 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,
          ),
        ),
      ),
    );
  }
}

这篇关于如何在扑扑中改变英雄动画的速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！