animation - 半旋转导航时 flutter 旋转过渡

Question

在我的应用程序中，我尝试将领先的应用程序栏图标设置为动画，以便在用户导航到另一个页面时旋转。基本上我正在尝试创建与 this video 完全相同的动画来自 Material 设计规范。

我设法使用 Hero 使图标在导航上旋转与 RotationTransition 。然而，目前该图标正在旋转一整圈。我很确定我必须提供另一个 Animation<double>到turns RotationTransition的参数，但我迷失在动画 Controller 和垂直同步中。

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

顺便说一句。如果有更简单的方法让图标在导航上旋转，欢迎提出建议。此外，在视频中，在向前和向后导航时，图标旋转到同一侧。这可能吗，使用 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
      ),
    );
  }