Question

在我的应用程序中，我有一个容器，我希望在单击时开始以缓慢的曲线旋转，然后保持旋转，然后再次单击将使其以缓慢的曲线停止。

如何在颤动中进行曲线动画？

像这样的东西： https://miro.medium.com/max/960/1*ZLekwO4QthfAWlBgM-9vpA.gif

Answer 1

制作动画控制器和动画。

  AnimationController _animController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animController = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation =
        Tween<double>(begin: 0, end: 2 * math.pi).animate(_animController)
          ..addListener(() {
            setState(() {});
          });
  }

  @override
  void dispose() {
    _animController.dispose();
    super.dispose();
  }

定义一个布尔变量。此变量指示对象是否在设置动画。

var _animating = false;

在Stop上结束动画，然后在Start上重复动画。

Scaffold(
  backgroundColor: Colors.blueGrey,
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Transform.rotate(
          angle: _animation.value,
          child: Container(
            color: Colors.green,
            height: 80,
            width: 80,
            padding: EdgeInsets.all(30),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 20.0),
          child: RaisedButton(
            color: Colors.white,
            child: Text(_animating ? "Stop" : "Start"),
            onPressed: () {
              if (_animating) {
                _animController.animateTo(1,
                                          duration: Duration(seconds: 3), curve: Curves.ease);
              } else {
                _animController.repeat();
              }
              setState(() => _animating = !_animating);
            },
          ),
        ),
      ],
    ),
  ),
)

结果：

颤振中具有曲线属性的动画

1 个答案: