Filecoin Pytorch ipv4 sorting uitableview drupal swiftui base64 react视频教程 react脚手架 软件测试实战项目 etl数据 mysql组合索引 js原生点击事件 重置hosts mysql将时间戳转换成日期 python取随机数 python环境设置 python分析 java语言代码大全 java运算 java输出当前时间 java方法的调用 gilisoft 超级力量2修改 手机模拟器下载 网络适配器下载 win10有哪些版本 中维高清监控系统安装 羽毛球拍握法 arm体系结构与编程 cdr字体变形 流媒体下载 迅雷单机游戏下载 php上传文件 dh浩劫天赋 getdata软件 cdr快捷键设置 迅雷去广告 磁盘阵列教程
当前位置: 首页 > 学习教程  > 编程语言

AnimationController

2020/10/16 17:49:47 文章标签:

需求&#xff1a;通过AnimationController实现控件平移动画效果。 核心代码&#xff1a; class RowState extends State<Row> with TickerProviderStateMixin{double paddingLeft 150;AnimationController animationController;overridevoid initState() {animationCo…

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

核心代码:

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

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

  @override
  void didUpdateWidget(Row oldWidget) {
    animationController.animateTo(paddingLeft);
    super.didUpdateWidget(oldWidget);
  }

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

总结:

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

2、动画实现原理:控件执行build方法会触发didUpdateWidget生命周期,在该方法里执行AnimationController.animateTo()进行动画值更新,从而触发监听器,再在监听器里更新控件触发build方法,如此循环实现动画(build -》didUpdateWidget -》AnimationController.animateTo() -》setState() -》build)

3、注意在2中,如果AnimationController的移动值要在lowerBound和upperBound之间(当达到移动值后会停止触发监听器),否则当AnimationController.value达到最大值或最小值后虽然该值不会再改变了,但继续调用.animateTo(200),仍会触发监听器从而刷新控件而由于无法达到移动值进入死循环状态。为了避免这种无效刷新,设置lowerBound和upperBound要包含将要移动值。


本文链接: http://www.dtmao.cc/news_show_300206.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?