flutter - AnimationController 用曲线动画重复

Question

如何制作一个重复的 AnimatedController，但以曲线动画开始。

---

代码：

动画控制器：

var _animating = false;

  AnimationController _rotationAnimationController;
  Animation<double> _animation;

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

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

按钮 ：

GestureDetector(
                       onTap: () {
                         Duration startStopTime = Duration(seconds: 3);
                         if(_animating) {
                           _rotationAnimationController.animateBack(1, duration: startStopTime, curve: Curves.easeOut);
                           setState(() {});
                         } else {
                           _rotationAnimationController.repeat() //This needs to start with a curve
                         }
                         setState(() {
                           _animating = !_animating;
                         });
                       },
                       child: [...]
                     ),

如果你也能做到，当重复停止时，它会用曲线做到这一点，那也太棒了:)

感谢您的帮助：D

标签： flutteranimationcurve

Answer 1

最好我理解你的问题，你想要一个CurvedAnimation对吗？这意味着您的动画将重复但遵循特定的曲线。所以在这里我可以为你做的最好的：

像这样定义你的AnimationController：

 Animation<double> _animation;
 AnimationController _animationController;


  @override
  void initState() {
    super.initState();

    _animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 2))
          ..addListener(() {
            setState(() {});
          });

    final Animation curve =
        CurvedAnimation(parent: _animationController, curve: Curves.easeOut);

    _animation = Tween<double>(begin: 0, end: pi * 4).animate(curve);
  }

你GestureDetector喜欢这样：

     GestureDetector(
                   onTap: () {
                        if (_animationController.isAnimating) 
  {
   _animationController.animateBack(0,duration: Duration(seconds: 2), curve: Curves.easeIn);
  } 

  else {
      _animationController.repeat();
    }
  },
                       child: [...]
                     ),

编辑：

我曾经TweenAnimationBuilder有过你想要的效果：

import 'package:flutter/material.dart';
import 'dart:math' as math;

class TweenAnimatedBuilderRotate extends StatefulWidget {
  TweenAnimatedBuilderRotate({Key key}) : super(key: key);

  @override
  TweenAnimatedBuilderRotateState createState() =>
      TweenAnimatedBuilderRotateState();
}

class TweenAnimatedBuilderRotateState
    extends State<TweenAnimatedBuilderRotate> {
  double _newAngle = 0;
  Curve curveThatChanges = Curves.easeIn;
  bool isAnimating = false;
  int _millsecs = 2000;
  

  void onCompletion() {
    if (isAnimating) {
      _newAngle += 4 * math.pi;
      curveThatChanges = Curves.linear;
      _millsecs = 1000;

      setState(() {});
    } else {
      _newAngle = 0;
      _millsecs = 2000;
    }
  }

  void onContainerTap() {
    if (isAnimating) {
      isAnimating = false;
      _newAngle = _newAngle;
      setState(() {});
    } else {
      curveThatChanges = Curves.easeIn;
      _newAngle += 4 * math.pi;
      isAnimating = true;
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder(
        tween: Tween<double>(begin: 0, end: _newAngle),
        duration: Duration(milliseconds: _millsecs),
        onEnd: () => onCompletion(),
        curve: curveThatChanges,
        builder: (
          BuildContext ctx,
          double angle,
          Widget child,
        ) {
          _newAngle = angle;
          return Center(
            child: Transform(
              transform: Matrix4.identity()..rotateZ(_newAngle),
              alignment: FractionalOffset.center,
              child: GestureDetector(
                child: Container(
                  color: Colors.blueGrey,
                  width: 200,
                  height: 200,
                ),
                onTap: () => onContainerTap(),
              ),
            ),
          );
        });
  }
}

你可以参考这篇Medium 文章来了解它是如何TweenAnimationdBuilder工作的。您还可以修改_millsecs变量以加快/减慢动画的速度。传入TweenAnimatedBuilderRotate()的body参数Scaffold(...)。