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

时间:2020-08-28 13:35:55

标签: flutter animation curve

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

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

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

1 个答案:

答案 0 :(得分:2)

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

结果:

Result