Flutter的闪屏动画案例AnimationController
打开一个APP,经常会看到精美的启动页,这种启动页也称为闪屏动画。它是从无到有有一个透明度的渐变动画的。图像展示完事后,才跳转到用户可操作的页面。
AnimationController
AnimationController
是Animation
的一个子类,它可以控制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的更多相关文章
- flutter 打开应用的闪屏动画
import 'package:flutter/material.dart'; import 'package:flutter_app/pages/SplashScreen.dart'; void m ...
- Cocos闪屏视频VideoPlayer踩坑记录
游戏闪屏动画(Logo&健康游戏公告)使用了 experimental::ui::VideoPlayer 来播放视频 3.7版本开发到目前为止发现2个坑 1.设置大小 _videoPlayer ...
- 设置 phoneGap/Cordova 3.4 应用程序启动动画闪屏 SplashScreen
当Cordova 程序打包并安装到手机中后,我们会发现启动程序时,会有数秒的黑屏现象,常见的解决方法则是设置闪屏后面. 这里以 Android 程序为例,介绍Cordova设置启动画面的方法. 1. ...
- 解决web翻转动画闪屏
首先确保backface-visibility: hidden.这样做可以解决大部分闪屏的情况. 然后需要特别注意的是谷歌的浏览器,不管是桌面端还是移动端,在翻转的过程中在该元素上绘制其他元素也会导致 ...
- android 的闪屏效果
android的闪屏效果,就是我们刚开始启动应用的时候弹出的界面或者动画,过2秒之后自动的跳转到主界面. 其实,实现这个效果很简单,使用Handler对象的postDelayed方法就可以实现.在这个 ...
- imx6 android 进入文件系统闪屏
imx6进入文件系统的时候都会闪屏,应该是framebuffer未初始化,就已经打开了背光.目前解决办法,在kenel阶段关闭背光,显示android的开机动画之后(此时framebuffer已经初始 ...
- 看项目得到info_freeCsdn-01闪屏页面
/** * 渐变展示启动屏 */ private void startAnimation() { Animation aa = new Animation() { }; aa.setDuration( ...
- ios transition translate 闪屏问题总结
webkit在绘制页面时会将结构分为各种层,当层足够大时就会变成很大的平铺层.这样一来webkit在每次页面结构发生变化时不需要都渲染整个页面而是渲染对应层了,这对渲染速度来说相当的重要.webkit ...
- 主流智能手机屏幕材质介绍 及 LCD闪屏现象分析
TN TN(Twisted Nematic) 即扭曲向列型面板,属于有源矩阵液晶显示器中的一种.由于TFT是主动式矩阵LCD可让液晶的排列方式具有记忆性,不会在电流消失后马上恢复 ...
随机推荐
- linux实操_硬盘
1.硬盘分区 硬盘说明: 查看分区和挂载情况 语法: lsblk -f lsblk 2.增加硬盘 (1)虚拟机添加硬盘 (2)分区 fdisk /dev/sdb (3)格式化 mkfs -text4 ...
- C指针的运算
指针的运算在数组中才有意义 int *p; p++,一定是在一片连续的区域才有意义,当然越界也会带来诸多问题. void main() { ; int *p = #//这根本无界可言 ...
- The method format(String, Object[]) in the type String is not applicable for the arguments
今天,我弟遇到一个有意思的错误~ 程序: package com.mq.ceshi1; public class StringFormat { public static void main(Stri ...
- 1、课程简介-Spring 注解驱动开发
1.课程简介-Spring 注解驱动开发
- focusout([data],fn) 当元素失去焦点时触发 focusout 事件。
focusout([data],fn) 概述 当元素失去焦点时触发 focusout 事件. focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况.大理石平台怎么样 参 ...
- MySQL percona-toolkit工具详解
一.检查和安装与Perl相关的模块 PT工具是使用Perl语言编写和执行的,所以需要系统中有Perl环境. 依赖包检查命令为: rpm -qa perl-DBI perl-DBD-MySQL perl ...
- luogu 1903 [国家集训队]数颜色 / 维护队列 带修改莫队
十分玄学的数据结构~ code: #include <bits/stdc++.h> #define N 1000006 #define setIO(s) freopen(s".i ...
- Doki Doki Literature Club ZOJ - 4035
Doki Doki Literature Club ZOJ - 4035 题解:其实就是简单排序输出就没了. #include <cstdio> #include <cstring& ...
- 十六、程序包管理之 rpm
c语言程序的构建过程 1.程序源代码 --> 预处理 --> 编译 --> 汇编 --> 链接--> 可执行程序 开放源码:就是程序码,文本格式的源代码,写给人类看的程序 ...
- jquer绑定和获取属性
最近每天都在熬夜,今天感觉眼睛特别涩,我决定,今天早睡,哈哈哈,上次总结了jquery控制节点,今天总结jquery控制属性,学习完基础知识,看看下面的案例练习一下,掌握的会更好 属性绑定和获取 ...