Flutter ColorTween实现颜色过渡动画效果

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

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

Flutter 从入门到精通系列文章在这里
当然也必需是要有源码的在这里了
github 有点慢不妨来看看码云的源码吧
系列学习教程在这里
更多Widget 的应用，小编已总结在书中
手机点击查看
电脑点击查看

Flutter 用来快速开发 Android iOS平台应用，在Flutter 中，通过 ColorTween 来实现颜色过渡动画效果

程序入口

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

Demo 实例页面

class DemoColorTweenPage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<DemoColorTweenPage>with SingleTickerProviderStateMixin {late AnimationController _animationController;late Animation _animation;@overridevoid initState() {// TODO: implement initStatesuper.initState();//创建动画控制器_animationController = new AnimationController(vsync: this,duration: Duration(milliseconds: 1000),);//添加动画执行刷新监听_animationController.addListener(() {setState(() {});});//添加动画状态监听_animationController.addStatusListener((status) {//获取动画执行状态AnimationStatus status = _animationController.status;//动画正向执行完成状态if (status == AnimationStatus.completed) {//反向开启动画_animationController.reverse();} else if (status == AnimationStatus.dismissed) {//动画初始未执行或者是动画反向执行完成//正向开始执行动画_animationController.forward();}});//颜色动画变化_animation = ColorTween(begin: Colors.blue, end: Colors.red).animate(_animationController);//添加到事件队列Future.delayed(Duration.zero, () {_animationController.forward();});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Tween")),body: Center(child: Container(width: 200,height: 200,color: _animation.value,),),);}
}

Flutter ColorTween实现颜色过渡动画效果相关推荐

android 颜色过渡动画效果,Android buttom textview 颜色平滑过渡的动画效果
1.TransitionDrawable.例如,在文件夹中绘制一个xml文件,你可以这样写: 然后,在你的xml的实际检视你都引用这个TransitionDrawable在android:backgr ...
react过渡动画效果的实现,react-transition-group
本文介绍react相关的过渡动画效果的实现有点类似vue的transition组件,主要用于组件mount和unmount之前切换时应用动画效果安装 cnpm install react-tran ...
android js 开屏动画,利用Flutter实现“孔雀开屏”的动画效果
前言今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果不知道这种效果大家叫什么名字?如果有更合适的名字可以在 ...
Vue入门之animate过渡动画效果
简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 `<!DOCTYPE html>` `<html ...
ppt模板页面过渡动画效果怎么制作？
一个好看的ppt模板,动画效果少不了,ppt模板制作软件也带了不少动画效果,ppt家园下面就来介绍一下ppt模板页面过渡动画效果怎么制作? 插入-图片-将两张图片素材导入-一张铺满PPT页面-一张放在 ...
js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
Android颜色渐变动画效果的实现
系列文章目录 Android颜色渐变动画效果的实现文章最后有源码文章目录系列文章目录前言一.Android中插值器TypeEvaluator. 二.案例效果实现 1.利用Android自带的 ...
Flutter AnimatedOpacity 实现透明度渐变动画效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 在Flutter 中实现透明度渐变效果的方式可通过以下通过 AnimatedOpacity 实现就是本文了通过 ...
js修改display_Vue.js从零开始——过渡 / 动画效果（2）
题图是2013年在 OSRAM 的顶层拍的远景,能看到慕尼黑的高楼大厦不算多,远近也就看到4栋,左上的富士通,右侧远处的奥林匹克公园的高塔还有宝马大厦,最远处的那一栋我不知道是哪里了--这是因为不在老 ...

Flutter ColorTween实现颜色过渡动画效果

程序入口

Demo 实例页面

Flutter ColorTween实现颜色过渡动画效果相关推荐

最新文章

热门文章