Flutter Transform.rotate 按下按钮时如何让它工作，而不是自动

Question

我有一个小部件，我想在按下按钮时移动它。但是当我添加 Transform.rotate 或 Transform.scale 并且当我在其中添加一个按钮时，它会消失 widget ， 当我按下

时如何让它手动工作

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

Answer 1

按钮触发动画

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。创建一些 'value'，范围从一些开始值到一些结束值

后面我们会有这行代码

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

这是什么意思？

• 我们将有一些 'value' 称为动画。
• 此值可能会向下更改为 0
• 此值可能会更改 最多 1
• 如果这个值增加，会线性增加
• 如果这个值减少，会线性减少

为什么重要？

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

的参考

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

• 最初是在x:0,y:0坐标上
• 1s后在x:50,y:30坐标
• 最后在x:100,y:60坐标上

所以，我们可以利用动画值，在上面线性变化

3。如何开始改变一些 'value' ?

稍后我们将扩展这个

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

至此

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

然后增加它的值

controller.forward();

然后减小它的值

controller.reverse();

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

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

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.对于完整的工作示例

你可以看看this repo