flutter FadeTransition实现透明度渐变动画

本文实例为大家分享了flutter实现透明度渐变动画的具体代码,供大家参考,具体内容如下

flutter 动画状态监听器

AnimationController

//动画控制器
AnimationController controller;
//AnimationController是一个特殊的Animation对象,在屏幕刷新的每一帧,就会生成一个新的值,
// 默认情况下,AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字
//用来控制动画的开始与结束以及设置动画的监听
//vsync参数,存在vsync时会防止屏幕外动画(动画的UI不在当前屏幕时)消耗不必要的资源
//duration 动画的时长,这里设置的 seconds: 2 为2秒,当然也可以设置毫秒 milliseconds:2000.
 controller =
 AnimationController(duration: const Duration(seconds: 2), vsync: this);
 //动画开始、结束、向前移动或向后移动时会调用StatusListener
 controller.addStatusListener((status) {
 if (status == AnimationStatus.completed) {
 //动画从 controller.reverse() 反向执行 结束时会回调此方法
 print("status is completed");
 // controller.reset(); 将动画重置到开始前的状态
 //开始执行
 //controller.forward();
 } else if (status == AnimationStatus.dismissed) {
 //动画从 controller.forward() 正向执行 结束时会回调此方法
 print("status is dismissed");
 //controller.forward();
 }else if (status == AnimationStatus.forward) {
 print("status is forward");
 //执行 controller.forward() 会回调此状态
 }else if (status == AnimationStatus.reverse) {
 //执行 controller.reverse() 会回调此状态
 print("status is reverse");
 }
 });

AnimationController 的常用操作说明

flutter AnimationStatus 动画状态说明

flutter FadeTransition实现透明度渐变动画

//动画控制器
 AnimationController controller; 

 controller =
 AnimationController(duration: const Duration(seconds: 2), vsync: this);
 //动画开始、结束、向前移动或向后移动时会调用StatusListener
 controller.addStatusListener((status) {
 if (status == AnimationStatus.completed) {
 //动画从 controller.forward() 正向执行 结束时会回调此方法
 print("status is completed");
 //反向执行
 //controller.reverse();
 } else if (status == AnimationStatus.dismissed) {
 //动画从 controller.reverse() 反向执行 结束时会回调此方法
 print("status is dismissed");
 //controller.forward();
 } else if (status == AnimationStatus.forward) {
 print("status is forward");
 //执行 controller.forward() 会回调此状态
 } else if (status == AnimationStatus.reverse) {
 //执行 controller.reverse() 会回调此状态
 print("status is reverse");
 }
 });

执行动画的view

 //渐变动画
 Widget buildSlideTransition() {
 return Center(
 child: FadeTransition(
 opacity: controller,
 //将要执行动画的子view
 child: Container(
  width: 200,
  height: 200,
  color: Colors.grey,
  child: Image.network(
  "http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg",
  ),
 ),
 ),
 );
 }

开始动画

//动画开始
controller.forward();

页面消毁时

@override
 void dispose() {
 super.dispose();
 controller.dispose();
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • flutter FadeTransition实现透明度渐变动画

    本文实例为大家分享了flutter实现透明度渐变动画的具体代码,供大家参考,具体内容如下 flutter 动画状态监听器 AnimationController //动画控制器 AnimationController controller; //AnimationController是一个特殊的Animation对象,在屏幕刷新的每一帧,就会生成一个新的值, // 默认情况下,AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字 //用来控制动画的开始与结束以

  • jQuery实现鼠标响应式透明度渐变动画效果示例

    本文实例讲述了jQuery实现鼠标响应式透明度渐变动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-透明度变化</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.

  • JS实现的透明度渐变动画效果示例

    本文实例讲述了JS实现的透明度渐变动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS透明度变化效果</title> <style> body{ margin: 0px; padding: 0px; } .redb{ width:200px; height: 20

  • Android旋转、平移、缩放和透明度渐变的补间动画

    android实现旋转.平移.缩放和透明度渐变的补间动画,具体实现如下: 1.在新建项目的res目录中,创建一个名为anim的目录,并在该目录中创建实现旋转.平移.缩放和透明度渐变的动画资源文件. 透明度渐变的动画资源文件anim_alpha.xml(完全不透明->完全透明->完全不透明) <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://sch

  • Flutter绘制3.4边形及多边形渐变动画实现示例

    目录 正文 绘制3.4边形 整数边形的绘制 分数边形的绘制 具体代码 效果改进1 效果改进2 正文 项目被优化了,人也跟着被优化了,正好趁这一个月整理整理关于flutter的一些东西. 绘制3.4边形 先看一下效果图: 起因是上上上上上个月浏览flutter的canvas相关内容时,点进去一个网站,看到一个让我眼前一亮的动效: 作者用的代码是swift的,我没细看,不过他文章里的一句话让我醍醐灌顶: That is, we want the shape be asked to draw mult

  • Flutter 用自定义转场动画实现页面切换

    fluro 转场动画源码 在使用自定义转场动画前,先扒一扒 fluro 的源码,通过源码可以发现这么一个标准的转场方法: RouteTransitionsBuilder _standardTransitionsBuilder( TransitionType? transitionType) { return (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation

  • Android动画之渐变动画(Tween Animation)详解 (渐变、缩放、位移、旋转)

    本文实例讲述了Android动画之渐变动画(Tween Animation).分享给大家供大家参考,具体如下: Android 平台提供了两类动画. 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转.平移.放缩和渐变). 第二类就是 Frame动画,即顺序的播放事先做好的图像,与gif图片原理类似. 下面就讲一下Tweene Animations. 主要类: Animation                  动画 AlphaAnimation          

  • 利用Flutter绘制出3D效果动画

    目录 前言 Path 的 transform 方法 绕任意点旋转 卡片3D 旋转实现 日历翻页效果 总结 前言 本篇我们继续介绍 Flutter 绘图的 Path 的应用.Flutter 的 Path 类提供了一个三维空间的变换方法,可以实现路径在三维空间的平移.旋转等操作,从而可以实现3D 绘制的效果.通过本篇你将了解到: Path的三维转换方法 transform 的使用. 绕三维空间某一点的旋转实现. 卡片3D 旋转动效. 类似日历的三维翻页效果. Path 的 transform 方法

  • Flutter实现一个支持渐变背景的Button示例详解

    目录 Flutter中的按钮 不完美的地方 在child中处理 外面套一个wrapper MaterialStateProperty MaterialStatesController 边距问题 EnhancedButton Flutter中的按钮 自Flutter 1.20 新增了ButtonStyleButton 系列按钮,可以说非常好用了,默认样式比之前漂亮了许多,扩展性也增加了很多.按钮样式统一由ButtonStyle这个类提供,支持根据各种状态(MaterialState)变化的属性,也

  • js实现按钮颜色渐变动画效果

    本文实例讲述了js实现按钮颜色渐变动画效果的方法.分享给大家供大家参考.具体如下: 这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/ 具体代码如下: <HTML><HEAD><TITLE>按钮慢慢变色&

随机推荐