flutter - 颤动中具有曲线属性的动画

问题描述

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

如何在颤动中制作曲线动画？

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

标签： flutteranimationcurve

制作一个动画控制器和一个动画。

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

结果：

flutter - 颤动中具有曲线属性的动画

问题描述

解决方案

推荐阅读