时间戳

首页 > 解决方案 > Flutter Transform.rotate 如何在按下按钮时使其工作，而不是自动

flutter - Flutter Transform.rotate 如何在按下按钮时使其工作，而不是自动

问题描述

当我按下按钮时，我有想要移动的小部件。但是当我添加 Transform.rotate 或 Transform.scale 并且当我在其中添加一个按钮时它会消失小部件，当我按下时如何使其手动工作

AnimatedBuilder(
          animation: _controller,
          child: Stack(
            children: <Widget>[
              DragObject(image: 'image/w1.png',position: post1,dataName: 't1',dataColor: Colors.blue,textField:null),

            ],
          ),
            builder: (BuildContext context, Widget child){
              return Transform.translate(
      offset: Offset.zero,
      child: child,
             );
            },
        ),

标签： flutterflutter-animation

解决方案

按钮触发动画

1. 在 initState 中设置动画

与周围的许多教程不同，我建议放置一个名为 setupAnimation 的新函数，它涵盖了与动画相关的初始设置

这是我们将拥有的第一个代码结构：

class BuilderAuto extends StatefulWidget { // Mandatory : Stateful
  @override
  _BuilderAutoState createState() => _BuilderAutoState();
}

class _BuilderAutoState extends State<BuilderAuto>
    with SingleTickerProviderStateMixin { // Mandatory : inherit this class

  static AnimationController controller; // create class properties

  @override
  void initState() {
    super.initState();
    setupAnimation(); // wrap our initialization here
  }

  void setupAnimation() {
    // We initialize how many seconds will `some value` changes
    // and put it on some AnimationController which we may
    // control later, whether to increase `the value`, or decrease
    // `the value`

    controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    controller.forward();
  }

2.创建一些“价值”，范围从某个开始值到某个结束值

稍后我们将有这行代码

final animation = Tween<double>(begin: 0, end: 1)

这是什么意思 ？

  • 我们将有一些称为动画的“价值”。
  • 此值可能会更改为 0
  • 此值最多可更改为 1
  • 如果这个值增加，它将线性增加
  • 如果这个值减小，它会线性减小

为什么这有关系 ？

我们将使用这个值，作为我们移动对象动画的参考

要移动一个对象2 秒，我们可以有这样的简单场景：

  • 最初，它在 x : 0 和 y: 0 坐标上
  • 1s 后，它位于 x : 50 和 y : 30 坐标上
  • 最后，它在 x : 100 和 y : 60 坐标上

因此，我们可以利用线性变化的动画值。

3.如何开始改变一些“价值”？

稍后我们将扩展它

final animation = Tween<double>(begin: 0, end: 1)

对此

final animation = Tween<double>(begin: 0, end: 1).animate(controller)

然后增加它的价值

controller.forward();

然后降低它的价值

controller.reverse();

4. 为什么我们需要使用控制器？

因为，就在这部分，我们定义了它的持续时间。因此，一些“价值”将了解最大化和最小化其价值需要多少时间。

controller = AnimationController(
  duration: const Duration(seconds: 2),
  vsync: this,
);

5. 对原始代码进行哪些修改？

对于您的代码：

我们需要改变这个构建方法

AnimatedBuilder(
  animation: _controller,
  child: Stack(
    children: <Widget>[
      DragObject(image: 'image/w1.png',position: post1,dataName: 't1',dataColor: Colors.blue,textField:null),
    ],
  ),
  builder: (BuildContext context, Widget child){
    return Transform.translate(
      offset: Offset.zero, // this should be modified time-by-time.
      child: child,
    );
  },
),

到这个构建方法

  Widget build(BuildContext context) {
    final animation = Tween<double>(begin: 0, end: 1).animate(controller);
    return Scaffold(
      appBar: AppBar(
        title: Text('Button Triggered'),
      ),
      body: AnimatedBuilder(
        animation: animation,
        child: Stack(
          children: <Widget>[
            DragObject(image: 'image/w1.png',position: post1,dataName: 't1',dataColor: Colors.blue,textField:null),
          ],
        ),
        builder: (BuildContext context, Widget child) {
          final xPos = 100 * animation.value;
          final yPos = 60 * animation.value;
          return Transform.translate(
            offset: Offset(xPos, yPos),
            child: child,
          );
        },
      ),
    );
  }

6.完整的工作示例

你可以看看这个回购

演示

推荐阅读