时间戳

首页 > 解决方案 > 如何在颤动中沿 Z 轴旋转图像？

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

问题描述

我在颤振代码中使用 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 轴以一定的速度旋转小部件，并在几秒钟后将它的速度减慢到零。

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

现在我取得了这么多：看这里

标签： dartflutterflutter-layoutflutter-animation

解决方案

只需将一个添加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"),
          ),
        ),
      ),
    );
  }
}

推荐阅读