AnimationController

最新推荐文章于 2024-09-27 22:15:00 发布

yufumatou

最新推荐文章于 2024-09-27 22:15:00 发布

阅读量1.8k

点赞数

分类专栏： flutter 文章标签： widget平移动画

本文链接：https://blog.csdn.net/yufumatou/article/details/109120600

版权

flutter 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文介绍了如何在Flutter中通过AnimationController创建一个平移动画效果，重点讲解了AnimationController的初始化、监听器设置以及animateTo()方法的使用。通过监听器更新控件状态，并设置lowerBound和upperBound防止无效刷新，确保动画在指定范围内平滑运行。

摘要由CSDN通过智能技术生成

需求：通过AnimationController实现控件平移动画效果。

核心代码：

class RowState extends State<Row> with TickerProviderStateMixin{
  double paddingLeft = 150;
  AnimationController animationController;
  int n = 0;

  @override
  void initState() {
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 4),
      lowerBound: 10,
      upperBound: 150,
    );
    animationController.addListener(() {
      n++;
      setState(() {});
    });
    animationController.animateTo(paddingLeft);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      width: double.infinity,
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(
        left: animationController.value,
      ),
      child: Text('$n  ${animationController.value}'),
    );
  }
}

总结：

1、AnimationController.value起始值为最小值

2、动画实现原理：AnimationController监听器中进行更新控件，执行AnimationController.animateTo()会持续触发监听器，直到达到移动值后停止触发。

3、注意在2中，如果AnimationController的移动值要在lowerBound和upperBound之间（当达到移动值后会停止触发监听器），否则当AnimationController.value达到最大值或最小值后虽然该值不会再改变了，但仍会触发监听器刷新控件。（如paddingLeft值为200，会发现animationController.value直到150数值不再增加，而n还在增加一段时间才会停止）。为了避免这种无效刷新，设置lowerBound和upperBound要包含将要移动值。