Flutter RotationTransition on Navigate with a half spin

Question

在我的应用程序中，我试图让领先的应用程序栏图标在用户导航到另一个页面时旋转。基本上我正在尝试根据材料设计规范创建与this video 完全相同的动画。

我设法使图标在导航上旋转，使用Hero 和RotationTransition。然而，目前，该图标正在旋转一整圈。我很确定我必须为RotationTransition 的turns 参数提供另一个Animation<double>，但我在AnimationControllers 和vsyncs 中迷路了。

如何让图标旋转半圈？以及如何控制纺纱速度/持续时间？

顺便说一句。如果有更简单的方法使图标在导航上旋转，欢迎提出建议。此外，在视频中，在前进和后退导航中，图标会旋转到同一侧。这可能吗，使用Navigator.pop()？

示例代码：

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Hero(
          tag: "mytag",
          child: IconButton(
            icon: Icon(Icons.menu),
            onPressed: null,
          ),
          // Magic happens here
          flightShuttleBuilder: (
            BuildContext flightContext,
            Animation<double> animation,
            HeroFlightDirection flightDirection,
            BuildContext fromHeroContext,
            BuildContext toHeroContext,
          ) {
            return RotationTransition(
              turns: animation,
              child: Material(
                color: Theme.of(context).primaryColor,
                shadowColor: Theme.of(context).accentColor,
                shape: CircleBorder(),
                child: toHeroContext.widget
              ),
            );
          },
        ),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("To second"),
          onPressed: () {
            Navigator.of(context).push(
              PageRouteBuilder(
                pageBuilder: 
                  (context, animation, secondaryAnimation) => SecondPage()
              )
            );
          },
        ),
      )
    );
  }

}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Hero(
          tag: "mytag",
          child: IconButton(
            icon: Icon(Icons.clear),
            onPressed: null,
          ),
        ),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("To first"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      )
    );
  }
}

Answer 1

将pskink 的 cmets 放在一起：这是更新后的代码，带有一个图标，在 push 和 pop 时会向同一方向旋转半圈：

flightShuttleBuilder: (
    BuildContext flightContext,
    Animation<double> animation,
    HeroFlightDirection flightDirection,
    BuildContext fromHeroContext,
    BuildContext toHeroContext,
  ) {
    Animation<double> newAnimation = 
      Tween<double>(begin: 0, end: 0.5).animate(animation);

    if (flightDirection == HeroFlightDirection.pop) {
      newAnimation = ReverseAnimation(newAnimation);
    }

    return RotationTransition(
      turns: newAnimation,
      child: Material(
        color: Theme.of(context).primaryColor,
        shadowColor: Theme.of(context).accentColor,
        shape: CircleBorder(),
        child: toHeroContext.widget
      ),
    );
  }