flutter ScaleTransition实现缩放动画
更多文章请查看 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);//动画开始、结束、向前移动或向后移动时会调用StatusListenercontroller.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 的常用操作说明
值 | 说明 |
---|---|
controller.forward() | 正向开始执行动画 |
controller.reverse() | 反向开始执行动画 |
controller.reset() | 重置动画到初始状态 |
controller.dispose() | 取消/停止动画 |
flutter AnimationStatus 动画状态说明
值 | 说明 |
---|---|
AnimationStatus.forward | 执行 controller.forward() 会回调此状态 |
AnimationStatus.reverse | 执行 controller.reverse() 会回调此状态 |
AnimationStatus.dismissed | 动画从 controller.reverse() 反向执行 结束时会回调此方法 |
AnimationStatus.completed) | 动画从 controller.forward() 正向执行 结束时会回调此方法 |
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_x/base/base_appbar_page.dart';/*** ScaleTransition 实现 缩放动画*/
class ScaleTransitionPage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return new AnimaScalePageState();}
}//是我这里使用到的一个基类
class AnimaScalePageState extends BaseAppBarPageState<ScaleTransitionPage>with SingleTickerProviderStateMixin {//动画控制器AnimationController controller;@overrideString buildInitState() {buildBackBar("动画", backIcon: Icons.arrow_back_ios);//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);//动画开始、结束、向前移动或向后移动时会调用StatusListenercontroller.addStatusListener((status) {if (status == AnimationStatus.completed) {//动画从 controller.forward() 正向执行 结束时会回调此方法} else if (status == AnimationStatus.dismissed) {//动画从 controller.reverse() 反向执行 结束时会回调此方法print("status is dismissed");} else if (status == AnimationStatus.forward) {print("status is forward");//执行 controller.forward() 会回调此状态} else if (status == AnimationStatus.reverse) {//执行 controller.reverse() 会回调此状态print("status is reverse");}});return null;}@overrideWidget buildWidget(BuildContext context) {return Row(children: <Widget>[Column(children: <Widget>[Padding(padding: EdgeInsets.all(15),child: FlatButton(onPressed: () {if( controller.isCompleted){//反向开始controller.reverse();}else{//正向动画开始controller.forward();}},child: Text("开始")),),buildRotationTransition(),],)],);}@overridevoid dispose() {super.dispose();controller.dispose();}//缩放Widget buildRotationTransition() {return Center(child: ScaleTransition(//设置动画的缩放中心alignment: Alignment.center,//动画控制器scale: controller,//将要执行动画的子viewchild: Container(width: 100,height: 100,color: Colors.grey,),),);}
}
flutter ScaleTransition实现缩放动画相关推荐
- flutter PositionedTransition 实现缩放动画
更多文章请查看 flutter从入门 到精通 flutter 动画状态监听器 AnimationController //动画控制器AnimationController controller;//A ...
- flutter常用内置动画组件
文章目录 AnimatedContainer AnimatedCrossFade Hero AnimatedBuilder DecoratedBoxTransition FadeTransition ...
- 在 Flutter 中实现文字动画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tds9vto6-1626653755909)(https://ducafecat.tech/2021/07/19/tra ...
- Flutter 实现九宫格抽奖动画效果
一.本文实现的九宫格抽奖动画效果如下 二.主要分享下怎么一步一步来实现这个效果 源代码地址 布局可以通过GridView轻松实现,只需在数据源的第五个位置插入一个元素用来标识是开始按钮 抽奖动画的实现 ...
- Flutter 8 个优秀动画 Packages
Flutter 8 个优秀动画 Packages 前言 动画对于使移动应用程序的用户界面感觉自然流畅至关重要.加上交互式元素和平滑的过渡,它们使应用程序简单易用. 正文 Flutter Animate ...
- Android Property Animation属性动画:scale缩放动画(4)
Android Property Animation属性动画:scale缩放动画(4) 和之前我写的附录文章1,2,3相似,本文将接着使用Android Property Animation属性 ...
- 【Animations】使用缩放动画放大视图(7)
原文 概要 本课程演示如何执行触摸缩放动画,这对诸如照片库等应用程序可以将视图从缩略图动画化为充满屏幕的全尺寸图像. 以下是触摸缩放动画看起来像展开图像缩略图以填充屏幕: 视频地址:https://d ...
- 【iOS】图片缩放动画
iOS 开发中,可用 UIView 的下述方法实现图片的缩放动画效果: + transitionWithView:duration:options:animations:completion: 示例代 ...
- AndroidTv Home界面实现原理(二)——Leanback 库的主页卡位缩放动画源码解析
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 先看个效果图: 上一篇中,我们留了问题,在 Tv Home 界面这种很常见聚焦卡位放大动画效果,我们这一篇就来看看 Leanback ...
最新文章
- Centos6安装SaltStack
- 每日一皮:男性同胞,是时候反击了!
- 面向对象,面向服务(转)
- JVM中垃圾回收相关算法 - 值得了解一下的,因为早晚得了解
- C++中,有哪4种与类型转换相关的关键字?各有什么特点?应该在什么场合下使用?
- 毕业论文排版之Word 中公式居中,编号靠右该怎么设置(针对左右不对称页边距)
- C++编译时多态和运行时多态
- 公众号精选评论点赞_12月评论:前10名和编辑精选
- java 字符串索引从0开始_无限字符串中的字符串的第一个索引-Java
- RBF神经网络MATLAB代码实现
- C语言16进制字符串转数字
- easybcd 无法添加linux条目,easybcd无法添加条目怎么办-easybcd无法添加条目的解决办法...
- 【TensorFlow】【数字货币】【单词记忆】【微信运营】【DIY电脑】 | Chat · 预告
- java里equal与equals_Java中关于==与equal和equals的区别
- android设置标题颜色设置颜色,设置标题背景颜色
- 【Linux命令】ip addr、ip link、ifconfig 用法 二
- CSS--怪异盒子模型
- 【论文笔记】Beyond frontal faces: improving person recognition using multiple cues
- 周志华《机器学习》第三章课后习题
- mysql htop大量进程,htop与dstat
热门文章
- 推荐收藏 | SLAM优秀开源工程汇总
- 管天管地管空气!谷歌探索用CV估算空气质量
- 加量不加价!极速人脸检测库libfacedetection升级v3版,新增五点检测
- 吴恩达《机器学习训练秘籍》中文版58章节完整开源
- html5网页制作图文混排,03第3章制作图文混排网页.docx
- python爬虫实战教程分享 或许你可以看一下这篇文章
- 收藏 | 那些机器学习必备知识
- 基础知识(九)boost+vs2015安装配置
- 源码安装mysql 5.1_Linux环境下源码编译安装MySQL5.1
- python企业级框架_Python六大开源框架对比:Web2py略胜一筹(转)