1。可能的解决方案

Question

的指示制作了简单的英雄动画

它可以按照说明中的说明工作，但就我而言，我希望它从第一个屏幕到第二个屏幕的动画制作速度要慢得多。有谁知道如何更改此动画的速度？

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,
          ),
        ),
      ),
    );
  }
}

Answer 2

1。可能的解决方案

我认为实现这一目标的唯一方法不是通过更改PageRoute过渡持续时间。我认为您也可以通过使用AnimationController来达到相同的效果-这个答案主要来自Angela Yu's The Complete 2019 Flutter Development Bootcamp with Dart的第149号和第150号讲座。

将屏幕转到StatefulWidget。
如果仅使用一种动画，请将with SingleTickerProviderStateMixin添加到状态类。
在状态类中创建一个控制器。
如果您的动画应该出现在屏幕的初始化中，请在controller方法内使用initState。
- 控制器具有一个名为duration的属性，因此您可以根据自己的喜好更改它。

2。会是什么样子

最后，一切应该看起来像这样：

class _NewScreenState extends State<HomeScreen> 
  with SingleTickerProviderStateMixin{

  AnimationController controller;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );

    controller.forward();

    controller.addListener((){
      setState(() {

      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return ...

vsync是必需的（@required）参数，它通常使用状态（实例）对象本身。

addListener

setState

controller和controller.value图标上带有类似height: finalHeight * controller.value的内容。
要切换到此屏幕，我只是将FlatButton与Navigator.pushNamed一起使用，没什么特别的。

3。一些其他重要信息

即使以后更改屏幕，controller仍将处于活动状态。因此，如果您在后台有一个循环的动画，则最好在更改屏幕时处置它，这样您就不会再浪费电话资源了。这可以通过以下方式实现：
```
@override
void dispose() {
  controller.dispose();
  super.dispose();
}
```
您还可以自定义动画的运行方式或动画的执行方式。一种选择是使用CurvedAnimation。
1. 在Animation animation;下方声明controller。
2. 在controller下方的initState下方，添加：
```
animation = CurvedAnimation( // the controller can't have upperBound > 1
  parent: controller, // the controller you created
  curve: Curves.decelerate,
);
```
在Flutter中进行动画制作的另一种有用方法是使用 TweenAnimations 。例如，如果要在颜色之间切换，可以使用ColorTween（在controller下方initState内）：
animation = ColorTween( begin: Colors.red, end: Colors.blue, ).animate(controller);

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

2 个答案:

1。可能的解决方案

2。会是什么样子

3。一些其他重要信息