Флаттер RotationTransition при навигации с половинным вращением

Question

В моем приложении я пытаюсь анимировать значок ведущей панели приложения, чтобы он вращался, когда пользователь переходит на другую страницу.По сути, я пытаюсь создать точно такую ​​же анимацию, как в этом видео из спецификации дизайна материала.

Мне удалось заставить значок вращаться при навигации, используя Hero сRotationTransition.В настоящее время, однако, значок вращается целый круг.Я вполне уверен, что должен предоставить еще один Animation<double> для параметра turns RotationTransition, но я заблудился в 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 : это обновленный код со значком, который вращает половину круга в одном направлении при нажатии и всплытии:

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