How to define discrete animation in Flutter?

Question

Is it possible to create an animation in flutter that doesn't continously change its value, but only with a given time gaps?

I have the following code working right now, but i'm sure there is a better solution out there.

  int aniValue = 0;
  bool lock = false;
  _asyncFunc() async {
    if(lock) return;
    else     lock = true;

    await new Future.delayed(const Duration(milliseconds: 50), () {
      ++aniValue;

      if (aniValue == 41) {
        aniValue = 0;
      }
    });

    lock = false;

    setState(() {});
    _asyncFunc();
  }

Why do you want to use an animation if you don't want change continuously? Can you please elaborate more on what you actually try to accomplish? — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 11, 2018 at 17:43
I'm working on an application that has an n x m matrix of colored "pixels", and i wan't to refresh all of their colors in every 150ms. Sorry if animations are really out of context, i'm really new in flutter. — BenSabo
– BenSabo, Commented Sep 11, 2018 at 18:22
No, don't worry. Using the animation framework here is the most ideal solution. — Rémi Rousselet
– Rémi Rousselet, Commented Sep 11, 2018 at 18:28

Rémi Rousselet · Accepted Answer · 2018-09-11 19:05:20Z

3

It is possible to define a Curve to animations; to have non-linear progression.

Flutter doesn't provides a "step" curves, but you can make one fairly easily:

class StepCurve extends Curve {
  final int stepCount;

  const StepCurve([this.stepCount = 2]) : assert(stepCount > 1);

  @override
  double transform(double t) {
    final progress = (t * stepCount).truncate();
    return 1 / (stepCount - 1) * progress;
  }
}

You can then freely use it by associating it to a CurveTween:

@override
Widget build(BuildContext context) {
  return AlignTransition(
    alignment: AlignmentGeometryTween(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    )
        .chain(CurveTween(curve: const StepCurve(5)))
        .animate(animationController),
    child: Container(
      color: Colors.red,
      width: 42.0,
      height: 42.0,
    ),
  );
}

Another solution is using TweenSequence.

class TestAnim extends StatefulWidget {
  @override
  _TestAnimState createState() => _TestAnimState();
}

class _TestAnimState extends State<TestAnim>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    final colors = <Color>[
      Colors.red,
      Colors.blue,
      Colors.lime,
      Colors.purple,
    ];

    return DecoratedBoxTransition(
      decoration: TweenSequence(colorsToTween(colors).toList())
          .animate(animationController),
      child: const SizedBox.expand(),
    );
  }
}

Iterable<TweenSequenceItem<Decoration>> colorsToTween(
    List<Color> colors) sync* {
  for (int i = 0; i < colors.length - 1; i++) {
    yield TweenSequenceItem<Decoration>(
      tween: DecorationTween(
        begin: BoxDecoration(color: colors[i]),
        end: BoxDecoration(color: colors[i + 1]),
      ),
      weight: 1.0,
    );
  }
}

edited Sep 11, 2018 at 19:05

answered Sep 11, 2018 at 18:01

Rémi Rousselet

280k89 gold badges559 silver badges456 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

BenSabo Over a year ago

Thanks for your excellent answer, the problem here is that StepCurve has gaps in positons, but i want to have them in time. I mean, the first step would happen after 1s, the second step after another 1s and so on and so forth.

Rémi Rousselet Over a year ago

You can convert time to steps. In your example, there are 40 steps for a total duration of 2 seconds.

BenSabo Over a year ago

I noticed Animatables don't have animation value, is there any way to have a counter or current step value here?

Rémi Rousselet Over a year ago

I think you want TweenSequence instead

Rémi Rousselet Over a year ago

@BenSabo Added an example, go take a look :)

Collectives™ on Stack Overflow

How to define discrete animation in Flutter?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related