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轴旋转小部件，并在几秒钟后将其速度降低到零。

可能需要使用“动画控制器”。我们怎样才能达到这种状态？

现在我已经取得了很多成就：

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

如何在振颤中沿Z轴旋转图像？

1 个答案: