Flutter AnimatedWidget 实现动画的自动刷新

在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如果你有兴趣你可以关注一下公众号 biglead 来获取最新的学习资料。

Flutter 从入门到精通系列文章在这里
当然也必需是要有源码的在这里了
github 有点慢
系列学习教程在这里

更多应用知识点，小编已总结在书中

手机点击查看
电脑点击查看

在Flutter中, AnimatedWidget可以理解为动画Animation的辅助类，可以理解为创建一个Widget自带动画效果，也可以理解为使用Widget来封装复杂的组合的自定义动画实现，当然这个过程中是不需要 setState的。

本页面实现 Demo 效果如下

程序入口

main() {runApp(MaterialApp(//不显示 debug标签debugShowCheckedModeBanner: false,//显示的首页面home: DemoStreamBuilder(),));
}

DemoStreamBuilder 主页面


class DemoAnimatedBuilder extends StatefulWidget {@override_DemoAnimatedBuilderState createState() => _DemoAnimatedBuilderState();
}class _DemoAnimatedBuilderState extends State<DemoAnimatedBuilder>with SingleTickerProviderStateMixin {//动画控制器AnimationController _animationController;@overridevoid initState() {super.initState();//0.0 - 1.0_animationController = new AnimationController(vsync: this, duration: Duration(milliseconds: 1800));}@overrideWidget build(BuildContext context) {//返回return Scaffold(//按钮floatingActionButton: FloatingActionButton(//小图标child: Icon(Icons.add),//点击事件onPressed: () {_animationController.reset();_animationController.forward();},),appBar: AppBar(title: Text("Animated"),),body: Container(padding: EdgeInsets.all(30),//线性布局child: Column(children: [TransformAnimated(animation: _animationController,child: Column(mainAxisSize: MainAxisSize.min,children: [Text("测试数据"),Text("测试数据"),Text("测试数据"),],),),],),),);}
}

自定义AnimatedWidget 的实现 TransformAnimated 如下

class TransformAnimated extends AnimatedWidget {Widget child;TransformAnimated({this.child, Animation animation}): super(listenable: animation);@overrideWidget build(BuildContext context) {//获取动画控制监听Animation<double> animation = listenable;//自定义return Container(color: Colors.grey[200],width: double.infinity,margin: EdgeInsets.only(left: 20,right: 20,top: 60 * animation.value / 2,),height: 260,//向下平移child: Transform.translate(// 参数一 表示 在x轴方向的平移量// 参数二 表示 在y轴方向的平移量offset: Offset(0.0, 150 * animation.value),//执行动画的子Widetchild: child,),);}
}

Flutter AnimatedWidget 实现动画的自动刷新相关推荐

【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
文章目录 ◯.AnimatedWidget 组件引入一.创建 AnimatedWidget 动画组件二.创建动画控制器三.创建动画四.动画运行五.完整代码示例六.相关资源 Animated ...
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入一.创建动画控制器二.创建动画三.创建动画作用的组件四.创建 AnimatedBuilder 关联动画与组件五.动画运行六.完整代码示例 ...
android表格自动刷新,Android SwipeRefreshLayout 自动刷新
调用Android的SwipeRefreshLayout 的setRefreshing() 方法,本以为可以完成像知乎客户端的自动刷新,可是并没有,在网上找了一下问题的所在 Paste_Image.p ...
Flutter进阶—实现动画效果（一）
上一篇文章我们了解了Flutter的动画基础:Flutter进阶-解析动画,这一篇文章我们就来实现一个图表的动画效果. 首先,我们需要创建一个新项目myapp,然后把main.dart的内容替换成下面 ...
Flutter进阶—解析动画
浅解动画 Flutter中的动画系统基于Animation对象的类型.控件可以直接通过读取其当前的值并监听其状态变化来将这些动画添加到其构建函数中,或者可以使用动画作为更精细的动画的基础,并将它们传递 ...
flutter 页面加载动画_十、Flutter加载动画
目录一.效果展示二.RoundPainter 三.RoundProgress 四.旋转起来五.停止旋转一.效果展示 Flutter加载动画.jpg 二.RoundPainter 同上篇文章&l ...
js 刷新页面但是不闪烁_前端开发还在手动刷新页面？手把手教你搭建一个自动刷新工具...
作为一名前端,开发web页面是我们的本职工作.在完成一个页面开发的过程中,保存代码然后手动刷新页面查看效果,这样的动作需要重复无数次,虽然一次这样的动作可能只要花费几秒钟的时间,但是次数多了也挺浪费时 ...
使用livereload实现自动刷新
livereload是一个web开发辅助工具,当我们修改完html.css和js的时候会自动刷新浏览器,解放码农的双手.这样在双屏切图.写js代码的时候会提高很多效率.livereload有很多版本, ...
php每分钟刷新一次的验证码,php如何在进入页面的时候自动刷新一次验证码
页面直接进入login页面的时候无法获取到$_SESSION["auth"]值,只能刷新一次验证码才能获取到值,怎么才能在用户访问的时候自动刷新一次验证码,求大神支招... 验证码 ...

Flutter AnimatedWidget 实现动画的自动刷新

Flutter AnimatedWidget 实现动画的自动刷新相关推荐

最新文章

热门文章