打开一个APP,经常会看到精美的启动页,这种启动页也称为闪屏动画。它是从无到有有一个透明度的渐变动画的。图像展示完事后,才跳转到用户可操作的页面。

AnimationController

AnimationControllerAnimation的一个子类,它可以控制Animation, 也就是说它是来控制动画的,比如说控制动画的执行时间。

我们这里有了两个参数 :

  • vsync:this :垂直同步设置,使用this就可以了。
  • duration : 动画持续时间,这个可以使用seconds秒,也可以使用milliseconds毫秒,工作中经常使用毫秒,因为秒还是太粗糙了。

来看一段代码,这段代码就是控制动画的一个典型应用。

_controller = AnimationController(vsync: this,duration: Duration(milliseconds: )); //3000毫秒
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);

这段代码的意思是,设置一个动画控制器,这个动画控制器控制动画执行时间是3000毫秒。然后我们设置了一段动画,动画使用了动画控制器的约定。

animation.addStatusListener

animation.addStatusListener动画事件监听器,它可以监听到动画的执行状态,我们这里只监听动画是否结束,如果结束则执行页面跳转动作。

_animation.addStatusListener((status){
if(status == AnimationStatus.completed){
Navigator.of(context).pushAndRemoveUntil( //跳转到下页,并把动画结束掉
MaterialPageRoute(builder: (context) => FirstPage()),
(route) => route==null
);
}
});
  • AnimationStatus.completed:表示动画已经执行完毕。
  • pushAndRemoveUntil:跳转页面,并销毁当前控件。

完整代码如下:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch:Colors.blue,
),
home:SplashScreen()
);
}
} class SplashScreen extends StatefulWidget {
_SplashScreenState createState() => _SplashScreenState();
} class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin{
AnimationController _controller; //控制器,一般控制动画和时间
Animation _animation; //动画
//初始化状态
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this,duration: Duration(milliseconds: )); //3000毫秒
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
//监听事件
_animation.addStatusListener((status){
if(status == AnimationStatus.completed){ //判断动画已经执行完毕
Navigator.of(context).pushAndRemoveUntil( //跳转到下页,并把动画结束掉
MaterialPageRoute(builder: (context) => FirstPage()),
(route) => route==null
);
}
});
_controller.forward(); //播放动画
}
//控制器销毁
@override
void dispose() {
_controller.dispose();
super.dispose();
} @override
Widget build(BuildContext context) {
return FadeTransition( //动画透明过度
opacity: _animation,
child: Image.asset(
'images/lake.jpg',
scale:2.0, //图片缩放
fit:BoxFit.cover //填充 充满屏幕
),
);
}
}

FirstPage.dart文件

class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('闪屏动画'),),
body: Center(
child: Text('首页'),
),
);
}
}

Flutter的闪屏动画案例AnimationController的更多相关文章

  1. flutter 打开应用的闪屏动画

    import 'package:flutter/material.dart'; import 'package:flutter_app/pages/SplashScreen.dart'; void m ...

  2. Cocos闪屏视频VideoPlayer踩坑记录

    游戏闪屏动画(Logo&健康游戏公告)使用了 experimental::ui::VideoPlayer 来播放视频 3.7版本开发到目前为止发现2个坑 1.设置大小 _videoPlayer ...

  3. 设置 phoneGap/Cordova 3.4 应用程序启动动画闪屏 SplashScreen

    当Cordova 程序打包并安装到手机中后,我们会发现启动程序时,会有数秒的黑屏现象,常见的解决方法则是设置闪屏后面. 这里以 Android 程序为例,介绍Cordova设置启动画面的方法. 1. ...

  4. 解决web翻转动画闪屏

    首先确保backface-visibility: hidden.这样做可以解决大部分闪屏的情况. 然后需要特别注意的是谷歌的浏览器,不管是桌面端还是移动端,在翻转的过程中在该元素上绘制其他元素也会导致 ...

  5. android 的闪屏效果

    android的闪屏效果,就是我们刚开始启动应用的时候弹出的界面或者动画,过2秒之后自动的跳转到主界面. 其实,实现这个效果很简单,使用Handler对象的postDelayed方法就可以实现.在这个 ...

  6. imx6 android 进入文件系统闪屏

    imx6进入文件系统的时候都会闪屏,应该是framebuffer未初始化,就已经打开了背光.目前解决办法,在kenel阶段关闭背光,显示android的开机动画之后(此时framebuffer已经初始 ...

  7. 看项目得到info_freeCsdn-01闪屏页面

    /** * 渐变展示启动屏 */ private void startAnimation() { Animation aa = new Animation() { }; aa.setDuration( ...

  8. ios transition translate 闪屏问题总结

    webkit在绘制页面时会将结构分为各种层,当层足够大时就会变成很大的平铺层.这样一来webkit在每次页面结构发生变化时不需要都渲染整个页面而是渲染对应层了,这对渲染速度来说相当的重要.webkit ...

  9. 主流智能手机屏幕材质介绍 及 LCD闪屏现象分析

    TN            TN(Twisted Nematic) 即扭曲向列型面板,属于有源矩阵液晶显示器中的一种.由于TFT是主动式矩阵LCD可让液晶的排列方式具有记忆性,不会在电流消失后马上恢复 ...

随机推荐

  1. (二)AppScan使用教程

    1.新建扫描:一般选择 常规扫描 2.选择扫描的平台:web或app 3.扫描配置向导 ①配置URL和服务器 ②配置登录管理 在扫描的过程中,可能会不小心碰到退出按钮导致Appscan注销.因此,要登 ...

  2. [转载]Appium工作原理

    [Appium]Appium工作原理 2017-09-13 15:28 sophia194910 阅读(7658) 评论(0) 编辑 收藏 参考:http://www.cnblogs.com/zhjs ...

  3. 学习Python编程的最好的几本书

    读书是汲取某个特定学科的知识以及更深入的理解该学科的最好的方式.在这个科技世界,通晓计算机系统各个不同的技术领域是至关重要的.其中最重要的内容之一便是计算机程序语言.现今,计算机中存在许多不同类型的程 ...

  4. (Java基础--反射)框架的概念及用反射技术开发框架的原理

    一.概述 1.框架:通过反射调用Java类的一种方式.  (框架与房子非常类似,使用的用户写的程序写配置文件,就相当于给房子装修) 如房地产商造房子用户住,门窗和空调等等内部都是由用户自己安装,房子就 ...

  5. ACM-ICPC 2018 青岛赛区现场赛 D. Magic Multiplication && ZOJ 4061 (思维+构造)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4061 题意:定义一个长度为 n 的序列 a1,a2,..,an ...

  6. SIGAI深度学习第二集 人工神经网络1

    讲授神经网络的思想起源.神经元原理.神经网络的结构和本质.正向传播算法.链式求导及反向传播算法.神经网络怎么用于实际问题等 课程大纲: 神经网络的思想起源 神经元的原理 神经网络结构 正向传播算法 怎 ...

  7. [Luogu] 金字塔神话

    这是出给pj的题ccccc #include <bits/stdc++.h> #define ll long long #define INF 2147483647 #define y1 ...

  8. CF768F Barrels and boxes

    嘟嘟嘟 此题不难. 这种题做几道就知道些套路了:我们枚举酒有几堆,这样就能算出食物有多少堆以及他们的排列数,那么概率就是合法方案数 / 总方案数. 设酒有\(i\)堆,那么就有\(C_{w - 1} ...

  9. windows游戏编程鼠标

    ①.常用鼠标消息: WM_MOUSEMOVE           鼠标移动位置 WM_LBUTTONDOWN       鼠标左键按下 WM_LBUTTONUP             鼠标左键弹起 ...

  10. Wondershare Video Converter Ultimate 注册码 License

    这个软件可以直接将DVD iso转换成mp4播放,可以破解,还不错,特地记录 官网下载最新版: https://videoconverter.wondershare.com/gl/video-conv ...