dart - 如何在 flutter 中沿 Z 轴旋转图像？

Question

我在我的 flutter 代码中使用 Transform 小部件来旋转屏幕

Offset _offset = Offset.zero;

return new Transform(
        transform: Matrix4.identity()
               ..setEntry(3, 2, 0.001)
               ..rotateX(0.01 * _offset.dy)
               ..rotateY(-0.01 * _offset.dx)
               ..rotateZ(- 0.01 * _offset.),
        alignment: FractionalOffset.center,
        child: new Scaffold(
          appBar: AppBar(
            title: Text("The 3D Matrix"),
          ),
          body: GestureDetector(
              onPanUpdate: (details) => setState(() => _offset += details.delta),
              onDoubleTap: () => setState(() => _offset = Offset.zero),
              child: Content())
        ),);

现在我想要的是以一定速度沿 z 轴旋转小部件，并在几秒钟后将其速度减慢到零。

可能我需要使用动画 Controller 。我们如何才能达到这种状态？

现在我取得了这么多:

Answer 1

只需将 AnimationController 添加到您的页面小部件。然后将您的 Transform 包装到 AnimatedBuilder

当你需要开始动画时，调用animationController.forward()。

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    animationController = new AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new AnimatedBuilder(
      animation: animationController,
      builder: (context, child) {
        return new Transform(
          transform: Matrix4.identity()
            ..setEntry(3, 2, 0.001)
            ..rotateZ(animationController.value * 45.0),
          child: child,
        );
      },
      child: new Scaffold(
        appBar: AppBar(
          title: Text("The 3D Matrix"),
        ),
        body: new Center(
          child: new RaisedButton(
            onPressed: () => animationController.forward(),
            child: new Text("Start anim"),
          ),
        ),
      ),
    );
  }
}