Flutter Animation实现缩放和滑动动画效果
作者:GalenWu 发布时间:2021-09-02 10:33:12
标签:Flutter,缩放,滑动
本文实例为大家分享了Flutter Animation实现缩放和滑动动画的具体代码,供大家参考,具体内容如下
Animation对象是Flutter动画库中的一个核心类,它生成指导动画的值。
Animation对象知道动画的当前状态(例如,它是开始、停止还是向前或向后移动),但它不知道屏幕上显示的内容。
AnimationController管理Animation。
CurvedAnimation 将过程抽象为一个非线性曲线.
Tween在正在执行动画的对象所使用的数据范围之间生成值。例如,Tween可能会生成从红到蓝之间的色值,或者从0到255。
使用Listeners和StatusListeners监听动画状态改变。
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(new LogoApp());
}
class LogoApp extends StatefulWidget {
_LogoAppState createState() => new _LogoAppState();
}
class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
initState() {
super.initState();
controller = new AnimationController(
duration: const Duration(milliseconds: 10000), vsync: this);
animation = new Tween(begin: 0.0, end: 300.0).animate(controller);
controller.forward();
}
Widget build(BuildContext context) {
return new AnimatedLogo(animation: animation);
}
dispose() {
controller.dispose();
super.dispose();
}
}
class AnimatedLogo extends AnimatedWidget {
AnimatedLogo({Key key, Animation<double> animation})
: super(key: key, listenable: animation);
Widget build(BuildContext context) {
final Animation<double> animation = listenable;
return new Center(
child: new Container(
margin: new EdgeInsets.symmetric(vertical: 10.0),
height: animation.value,
width: animation.value,
child: new FlutterLogo(),
),
);
}
}
缩放功能
class ScaleAnimatedContent extends StatefulWidget {
final Widget child;
final bool show;
const ScaleAnimatedContent({Key key, this.child, this.show = false})
: super(key: key);
@override
ScaleAnimatedContentState createState() => ScaleAnimatedContentState();
}
class ScaleAnimatedContentState extends State<ScaleAnimatedContent>
with TickerProviderStateMixin {
AnimationController animationController;
Animation<double> animation;
@override
void initState() {
animationController = new AnimationController(
vsync: this,
duration: new Duration(milliseconds: 600),
);
// animationSlideUp = new Tween(begin: 0.0,end: 1.0).animate(animationController);
animation = Tween(begin: 0.0, end: 1.0).animate(animationController);
if (widget.show) {
animationController.forward();
}
super.initState();
}
@override
void didUpdateWidget(ScaleAnimatedContent oldWidget) {
if (widget != oldWidget) {
if (widget.show && !oldWidget.show) {
animationController.forward(from: 0.0);
} else if (!widget.show) {
animationController.reverse();
}
}
super.didUpdateWidget(oldWidget);
}
@override
Widget build(BuildContext context) {
return ScaleTransition(
scale: animation,
child: widget.child,
);
}
@override
void dispose() {
animationController.dispose();
super.dispose();
}
}
滑动效果
class SlideAnimatedContent extends StatefulWidget {
final Widget child;
final bool show;
const SlideAnimatedContent({Key key, this.child, this.show = false})
: super(key: key);
@override
SlideAnimatedContentState createState() => SlideAnimatedContentState();
}
class SlideAnimatedContentState extends State<SlideAnimatedContent>
with TickerProviderStateMixin {
AnimationController animationController;
Animation<Offset> animationSlideUp;
@override
void initState() {
animationController = new AnimationController(
vsync: this,
duration: new Duration(milliseconds: 600),
);
animationSlideUp = new Tween(
begin: Offset(0.0, 5.0),
end: Offset(0.0, 0.0),
).animate(CurvedAnimation(parent: animationController, curve: Curves.ease));
if (widget.show) {
animationController.forward();
}
super.initState();
}
@override
void didUpdateWidget(SlideAnimatedContent oldWidget) {
if (widget != oldWidget) {
if (widget.show && !oldWidget.show) {
animationController.forward(from: 0.0);
} else if (!widget.show) {
animationController.reverse();
}
}
super.didUpdateWidget(oldWidget);
}
@override
Widget build(BuildContext context) {
return SlideTransition(
position: animationSlideUp,
child: FadeTransition(
opacity: animationController,
child: widget.child,
),
);
}
@override
void dispose() {
animationController.dispose();
super.dispose();
}
}
来源:https://blog.csdn.net/m0_38013946/article/details/121764930
0
投稿
猜你喜欢
- 那些GC的默认值其实GC或者说JVM的参数非常非常的多,有控制内存使用的:有控制JIT的:有控制分代比例的,也有控制GC并发的:当然,大部分
- 一、程序的三种结构顺序结构分支结构循环结构二、条件语句if 语句是最有用的控制结构之一。 if … else …语句的语法:if (布尔表达
- 如下所示:#include "GeneralHashFunctions.h" unsigned int RSHash(c
- mybatis 查询返回Map<String,Object> 类型,平时没太注意怎么用,今天又遇到了总结记录一下,方便以后处理此
- 简介在多线程中解决线程安全的问题时常用到Synchronized,现在的synchronized相对于早期的synchronized做出了优
- 有段时间没有写博客了,也在努力的从传统单机开发向分布式系统过度,所以再次做一些笔记,以方便日后查看。直接进入正题吧,今天记录spring-b
- 本文实例为大家分享了Android项目实现视频播放器的具体代码,供大家参考,具体内容如下VideoView控件是播放视频用的,借助它可以完成
- sms4j 2.0 全新来袭即sms-aggregation成功加入dromara之后,很多人向我们反应了项目名称太长不好记,也太绕口, 在
- 1、对称二叉树【OJ链接】分为以下几种情况:二叉树为空,是对称二叉树二叉树不为空,其左子树或者右子树为空,不是对称二叉树二叉树不为空,左右子
- 本文实例为大家分享了shader实现基于世界坐标的贴图置换效果。效果如下:设置面板如下:可在面板上设置切换方向,与切换对象,及其切换速度。s
- 连接操作redisSpring Boot中操作redis还是需要使用相关的启动器<dependency><groupId&
- 本文实例讲述了C#计算矩阵的逆矩阵方法。分享给大家供大家参考。具体如下:1.代码思路1)对矩阵进行合法性检查:矩阵必须为方阵2)计算矩阵行列
- Maven本地仓库有对应的jar包但是报找不到问题原因第一,你本地仓库对应的包文件夹下有_remote.repositories这个文件;第
- Spring Data Jpa 自定义方法的实现最近项目中用到了Spring Data JPA,在里面我继承了一个PagingAndSort
- 一、findById(ID id)通过id进行单条查询,先看看 findById(ID id) 的源码@Overridepublic Opt
- 前言在我们做后端服务Dao层开发,特别是大数据批量插入的时候,这时候普通的ORM框架(Mybatis、hibernate、JPA)就无法满足
- 技术看点 WinForm自定义控件的使用自定义控件gif动画的播放需求及效果又来一波 C# GDI自定义控件show 。这个控件已
- CLR支持两种类型:引用类型和值类型。 引用类型总是从托管堆上分配的。 c#中的New操作符返回对象的内存地址。 引用对象的注意点: 1、内
- 在一个完整的项目中,如果每一个控制器的方法都返回不同的结果,那么对项目的维护和扩展都会很麻烦;并且现在主流的开发模式时前后端分离的模式,如果
- Java 使用IO流实现大文件的分割与合并文件分割应该算一个比较实用的功能,举例子说明吧比如说:你有一个3G的文件要从一台电脑Copy到另一