如何在Flutter中定义离散动画？ [英] How to define discrete animation in Flutter?

问题描述

是否可以创建不连续改变其值但仅在给定时间间隔内波动的动画？

我有以下代码可以正常工作现在，但我确定还有更好的解决方案。

  int aniValue = 0; 
 bool lock = false; 
 _asyncFunc（）异步{
 if（lock）return; 
 else lock = true; 
 
等待新的Future.delayed（const Duration（毫秒：50），（）{
 ++ aniValue; 
 
 if（aniValue == 41）{
 aniValue = 0; 
} 
}）； 
 
 lock = false; 
 
 setState（（）{}）; 
 _asyncFunc（）; 
} 
  

解决方案

可以定义一个曲线动画；

Flutter不提供阶梯曲线，但是您可以很容易地制作出一条曲线：

 类StepCurve扩展了Curve {
 final int stepCount; 
 
 const StepCurve（[this.stepCount = 2]）：assert（stepCount> 1）; 
 
 @override 
 double transform（double t）{
最终进度=（t * stepCount）.truncate（）; 
返回1 /（stepCount-1）*进度; 
} 
} 
  

然后您可以将其关联到 CurveTween ：

  @override 
 Widget build（BuildContext context ）{
 return AlignTransition（
alignment：AlignmentGeometryTween（
 start：Alignment.centerLeft，
 end：Alignment.centerRight，
）
 .chain（CurveTween （曲线：const StepCurve（5）））
 .animate（animationController），
子级：Container（
 color：Colors.red，
 width：42.0，
高度：42.0，
），
）; 
} 
  

---

另一种解决方案是使用

  Class TestAnim扩展了StatefulWidget {
 @override 
 _TestAnimState createState（）=> _TestAnimState（）; 
} 
 
类_TestAnimState扩展了State< TestAnim> 
和SingleTickerProviderStateMixin {
 AnimationController animationController; 
 
 @override 
 void initState（）{
 super.initState（）; 
 animationController = AnimationController（
 vsync：this，
 duration：const Duration（seconds：1），
）.. repeat（）; 
} 
 
 @override 
小部件构建（BuildContext上下文）{
最终颜色=< Color> [
 Colors.red，
 Colors.blue，
 Colors.lime，
 Colors.purple，
]; 
 
 return DecoratedBoxTransition（
装饰：TweenSequence（colorsToTween（colors）.toList（））
 .animate（animationController），
子对象：const SizedBox.expand（） ，
）; 
} 
} 
 
 Iterable< TweenSequenceItem< Decoration> colorsToTween（
 List< Color>颜色）sync * {
 for（int i = 0; i< colors.length-1; i ++）{
 yield TweenSequenceItem< Decoration>（
补间：DecorationTween（
开头：BoxDecoration（颜色：colors [i]），
结束：BoxDecoration（颜色：colors [i + 1]），
），
权重：1.0，
）; 
} 
} 
  

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

解决方案

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

这篇关于如何在Flutter中定义离散动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！