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

问题描述

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

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

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

解决方法

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

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

var _animating = false;

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

结果：