Question

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

我设法使用Hero和RotationTransition使图标在导航上旋转。但是，当前该图标旋转了一个圆圈。我很确定我必须为Animation<double>的{{1}}参数提供另一个turns，但是我迷失了AnimationControllers和vsyncs。

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

顺便说一句。如果有一种更简单的方法可以使图标旋转导航，欢迎提出建议。另外，在视频中，向前和向后导航中的图标都旋转到同一侧。使用RotationTransition有可能吗？

示例代码：

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

在导航上进行半旋转时的Flutter RotationTransition

1 个答案: