Flutter动画 3 - Animation动画组

于 2025-01-17 07:50:08 发布
阅读量766 收藏 15
点赞数 14
文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2501_90253220/article/details/145196533
版权

_animation = Tween(begin: 0, end: 50).animate(_animationController)
…addListener(() {
setState(() {});
});
_colorAnimationController = AnimationController(duration: Duration(milliseconds: 600), vsync: this);
_colorAnimation = ColorTween(begin: Colors.orangeAccent, end: Colors.redAccent).animate(_colorAnimationController)
…addListener(() {
setState(() {});
});

最后,我们只需要监听位移动画完成状态之后执行颜色动画即可,具体代码如下所示.

_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_colorAnimationController.forward();
};
});

整体Demo代码如下所示.

class _FlutterAnimationWidgetState extends State with TickerProviderStateMixin {
AnimationController _animationController;
Animation _animation;
AnimationController _colorAnimationController;
Animation _colorAnimation;

@override
void initState() {
super.initState();
_animationController = AnimationController(duration: Duration(milliseconds: 300), vsync: this);
_animation = Tween(begin: 0, end: 50).animate(_animationController)
…addListener(() {
setState(() {});
});
_colorAnimationController = AnimationController(duration: Duration(milliseconds: 600), vsync: this);
_colorAnimation = ColorTween(begin: Colors.orangeAccent, end: Colors.redAccent).animate(_colorAnimationController)
…addListener(() {
setState(() {});
});
_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_colorAnimationController.forward();
};
});
}

void startEasyAnimation() {
_animationController.forward();
}

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

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 200,
height: 50,
color: _colorAnimation.value,
margin: EdgeInsets.only(top: _animation.value),
),
FlatButton(
onPressed: startEasyAnimation,
child: Text(
“点击执行最简单动画”,
style: TextStyle(color: Colors.black38),
),
),
],
),
),
);
}
}

Interval时间间隔法

上面的状态监听需要一个动画过程就写一个Controller,而且基本上还要每一个Controller都监听执行完成然后再去启动下一个Controller.如果一个动画过程有十几个,自己想想都是脑瓜子嗡嗡的.所以接下来我们就来介绍第二种方案 - Interval时间间隔法 .

Interval时间间隔法 的整体思路是一个动画Controller控制所有动画的执行.然后每一个动画只需要确认自己在整个动画的时间比重即可.

首先,声明一个动画Controller和多个动画.

AnimationController _animationController;
Animation _animation;
Animation _colorAnimation;

然后初始化AnimationController,AnimationController的动画时间(duration)要设置成所有动画的总时长,例如这里我设定为600毫秒(_animation时长:300毫秒,_colorAnimation时长:300毫秒).

_animationController = AnimationController(duration: Duration(milliseconds: 600), vsync: this);

接下来就是初始化两个Animation,Tween对象调用animate()函数不再是直接传入上面的AnimationController,而是传入一个CurvedAnimation 对象.CurvedAnimation构建过程中需要传入两个参数一个是 parent ,用于指定AnimationController. 另外一个是 curve,用于指定动画曲线函数.我们可以使用常用的动画曲线函数,也可以自己生成,这里我们就自己生成.指定动画执行的时间区间.

// CurvedAnimation的构建方法
CurvedAnimation({
required this.parent,
required this.curve,
this.reverseCurve,
}) : assert(parent != null),
assert(curve != null) {
_updateCurveDirection(parent.status);
parent.addStatusListener(_updateCurveDirection);
}

由于两个动画时间长度是对分的,每一个都是300毫秒,所以 curve 参数中的值就分别是 Interval(0.0, 0.5) 、Interval(0.5, 1.0),两个Animation的初始化过程如下所示.

_animation = Tween(begin: 0, end: 50).animate(
CurvedAnimation(
parent: _animationController,
curve: Interval(0.0, 0.5),
),
)…addListener(() {
setState(() {});
});

_colorAnimation = ColorTween(begin: Colors.orangeAccent, end: Colors.redAccent).animate(
CurvedAnimation(
parent: _animationController,
curve: Interval(0.5, 1.0),
),
)…addListener(() {
setState(() {});
});

整体Demo代码如下所示.

class _FlutterAnimationWidgetState extends State with TickerProviderStateMixin {
AnimationController _animationController;
Animation _animation;
Animation _colorAnimation;

@override
void initState() {
super.initState();
_animationController = AnimationController(duration: Duration(milliseconds: 600), vsync: this);
_animation = Tween(begin: 0, end: 50).animate(
CurvedAnimation(
parent: _animationController,
curve: Interval(0.0, 0.5),
),
)…addListener(() {
setState(() {});
});
_colorAnimation = ColorTween(begin: Colors.orangeAccent, end: Colors.redAccent).animate(
CurvedAnimation(
parent: _animationController,
curve: Interval(0.5, 1.0),
),
)…addListener(() {
setState(() {});
});
}

void startEasyAnimation() {
_animationController.forward();
}

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

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 200,
height: 50,
color: _colorAnimation.value,
margin: EdgeInsets.only(top: _animation.value),
),
FlatButton(
onPressed: startEasyAnimation,
child: Text(
“点击执行最简单动画”,
style: TextStyle(color: Colors.black38),
),
),
],
),
),
);
}
}

TweenSequence动画序列法

上面的两种方案虽然能解决动画组的问题,但是都太过于繁琐,那么有没有一种比较优雅的方案呢?这就需要使用到 TweenSequence 和 TweenSequenceItem 这两个类了. 其中 TweenSequence 是动画组类,TweenSequenceItem 则是用来定义每一个动画的具体实现的类.但是TweenSequence 和 TweenSequenceItem也不是尽善尽美的,它最大的问题就是前后变化的属性值类型必须是一致的.

下面,我们仍然以改变Margin为例, 先让视图组件往上移动50,再让视图 来看看如何使用 TweenSequence 和 TweenSequenceItem 来实现这个动画.

首先,我们声明一个 动画控制器AnimationController 和 动画Animation.

AnimationController _animationController;
Animation _animation;

仍然以两者的动画总时长为600毫秒,所以我们需要实现AnimationController,如下所示.

_animationController = AnimationController(duration: Duration(milliseconds: 600), vsync: this);

然后,我们通过 TweenSequence 和 TweenSequenceItem 这两个类对 动画Animation 进行实现.

实现两个 TweenSequenceItem, TweenSequenceItem中的 weight 属性是来设定动画执行的时间权重.也就是在整个动画过程,当前动画执行时长占总时长的比例.例如下面 第一个动画插值占的时间比例为 50/(50 + 100). 第二个动画插值占的时间比例为 100/(50 + 100) .

TweenSequenceItem downMarginItem = TweenSequenceItem(
tween: Tween(begin: 1.0, end: 50.0),
weight: 50,
);
TweenSequenceItem upMarginItem = TweenSequenceItem(
tween: Tween(begin: 50.0, end: 100.0),
weight: 100,
);

然后创建一个动画插值组,把上面两个动画插值放入组中.

TweenSequence tweenSequence = TweenSequence([
downMarginItem,
upMarginItem,
]);

最后,生成动画就OK了.

_animation = tweenSequence.animate(_animationController);
_animation.addListener(() {
setState(() {});
});

当然了,上面的三步可以缩写成一步代码来实现,我只是进行了分解代码来说明每一个代码.

// 缩写代码
_animation = TweenSequence([
TweenSequenceItem(
tween: Tween(begin: 0.0, end: 50.0),
weight: 50,
),
TweenSequenceItem(
tween: Tween(begin: 50.0, end: 100.0),
weight: 100,
),
]).animate(_animationController)
…addListener(() {
setState(() {});
});

整体代码如下所示.

class _FlutterAnimationWidgetState extends State with TickerProviderStateMixin {
AnimationController _animationController;
Animation _animation;

@override
void initState() {
super.initState();
_animationController = AnimationController(duration: Duration(milliseconds: 600), vsync: this);
TweenSequenceItem downMarginItem = TweenSequenceItem(
tween: Tween(begin: 1.0, end: 50.0),
weight: 50,
);
TweenSequenceItem upMarginItem = TweenSequenceItem(
tween: Tween(begin: 50.0, end: 100.0),
weight: 100,
);
TweenSequence tweenSequence = TweenSequence([
downMarginItem,
upMarginItem,
]);
_animation = tweenSequence.animate(_animationController);
_animation.addListener(() {
setState(() {});
});
}

void startEasyAnimation() {
_animationController.forward();
}

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

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 200,
height: 50,
color: Colors.orangeAccent,
margin: EdgeInsets.only(top: _animation.value),
),
FlatButton(
onPressed: startEasyAnimation,
child: Text(
“点击执行最简单动画”,
style: TextStyle(color: Colors.black38),
),
),
],
),
),
);
}
}

动画组实现总结
Flutter 动画组件那么多，记不住不会用怎么办？我都给你整理好了，收藏吧
Flutter 跨平台技术研究
04-30 455
前言 Flutter 自带的基础动画组件有几十个那么多，包括通用的动画构建类、特定的动画效果类以及封装好的动画组件。本篇整理了 Flutter 的隐式动画组件，方便各位 Flutter 爱好者（搬砖者）随时查看和使用。
Flutter进阶教程：打造动感界面的Tween动画秘籍
最新发布
理论都是虚的，代码才是王道。
06-14 129
在Flutter中，Tween（插值器）是动画的核心概念之一，它定义了一个从起始值到结束值的平滑过渡过程。简而言之，Tween负责计算动画在每一帧的中间值，确保动画平滑且连续。Flutter提供了多种Tween类，如ColorTween等，分别用于处理数值、颜色等属性的变化。通过上述示例，我们不仅学习了如何在Flutter中使用Tween动画函数来创建基本的动画效果，还理解了动画控制器和的工作原理。
Flutter 动画
xiangxiongfly
12-09 1725
Flutter对动画系统进行抽象、封装，使我们可以方便的进行动画开发。AnimationController类： 缩放动画 透明度动画 旋转动画 循环执行动画 Tween 负责两种状态之间的过渡转换。 ColorTween 本质也是由实现的。 平移动画 Curve Flutter中的Curve类似于Android中的Interpolator差值器，控制动画变化的速率，可分为：匀速、加速、减速等速率。 自定义Curve 动画混合使用 多动画同时执行 同时变大变色效果： 多动画依次执行 先变大再
Flutter开发之——动画—Tween
xcbyaya的博客
04-17 1181
/变化过程动画变量//动画控制器//动画开始和结束值//作用对象Container(child: Text(“点我变大”),三 示例。
Flutter中动画的实现
老猿的自留地
03-08 1237
动画三要素控制动画的三要素：Animation、Tween、和AnmaitionControllerAnimation： 产生的值的序列，有CurveAnimation等子类，， 可以将值赋值给Widget的宽高或其他属性，进而控制widget发生变化Tween：可以定义值的变化范围， 继承自，每个类都有begin和end两个属性，同时有CurveTween等子类，可以定义值在begin和end间的变化方式。
Flutter系列控件之动画Animation笔记
yangxiaoxi09的博客
10-15 316
我们可以将理解为Animation的助手，使用它可以简化我们对动画的使用，在为widget添加动画的学习中我们不难发现，在不使用的情况下需要手动调用动画的并在回调中添加setState才能看到动画效果，将为我们简化这一操作。在下面的重构示例中，LogoApp现在继承自而不是。在绘制时使用动画的当前值。LogoApp仍然管理着和Tween。),
flutter-login-animation:应用登录以提高我在扑动中的动画制作能力
04-17
$ git clone https://github.com/C0bal/flutter-login-animation && cd flutter-login-animation 请按照以下步骤 # Open the project $ Go to Android Studio # Run app $ Open project folder and run the ...
flutter-animation-side-menu
04-14
这个过程中，你需要掌握Flutter的动画系统，包括Tween、AnimationController和AnimatedBuilder的使用，以及如何在StatefulWidget中管理动画状态。此外，设计和实现动态菜单的过程中，还会涉及布局、状态管理和用户...
flutter-login-home-animation
05-12
一个新的开源Flutter项目，使开发人员能够快速开始使用Flutter动画和应用程序开发。 这是显示我创建的Flutter应用程序的GIF。 这是我在上的UI设计的重建版本。 该项目包含Flutter Animation的基本功能，这些功能是...
flutter-piggy-treeview：扑动的常见树视图
02-04
`animationCurve`则可以设置动画曲线，例如EaseInOut、EaseIn、EaseOut等，使得动画更流畅自然。此外，还有`isExpanded`属性控制节点默认是否展开，以及`onNodeTap`监听器用于响应节点的点击事件。 在样式方面，...
flutter_sequence_animation:轻松编排多个动画
04-29
flutter_sequence_animation 特征 无需使用间隔并计算动画总时间的百分比。 对具有多个动画的同一个变量进行动画处理！ 您只需要一个AnimationController 直观易用的界面 安装 dependencies: flutter_sequence_animation: "^4.0.0-nullsafety" 然后 $ flutter packages get 然后 import 'package:flutter_sequence_animation/flutter_sequence_animation.dart'; 演示版 代码 从交错的动画例子是207行。 此程序包的相同动画是128行。 它也更容易阅读和编辑。 您可以指定一系列动画对象，如下所示： sequenceAnimation = new SequenceAnimationBuild
【Flutter 实战】动画序列、共享动画、路由动画
ting2909的博客
08-27 292
动画序列 Flutter中组合动画使用Interval，Interval继承自Curve，用法如下： Animation _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation( parent: _animationController, curve: Interval(0.5, 1.0))); 表示_sizeAnimation动画从0.5（一半）开始到结束，如果动画时长为6秒，_sizeAnimation则从第3秒开
Flutter开发之——动画，移动终端软件开发
m0_66264798的博客
02-16 2239
vsync: this, lowerBound: 0, upperBound: 1, duration: Duration(milliseconds: 1000), ) //动画开始和结束值 animation=Tween(begin: 100,end: 300).animate(_controller); //作用对象 Container( height: animation.value, width: animation.value, color: Colors.red, alignment: Alig
Flutter动画 2 - Animation、Tween 详解
得不到的永远是骚栋.
05-08 1002
简述 在 Flutter动画 1 - 实现一个最简单的动画 中,我们只使用到AnimationController就实现了一个简单的动画,但是如果映射的值复杂多变,或者想让值映射成颜色等等,这时候单个AnimationController就不能实现我们的需求了,这时候就需要使用到 Tween 以及 Animation. 其实在 Flutter动画 1 中, 我也是用了取巧的方案,对于AnimationController,我们要尽量保持它的单一职责性,他就是来管理动画的执行,过程等,它不应该管控每一个..
Flutter Animation 动画
github_36850997的博客
04-13 499
在Flutter 中，做动画离不开这么一个类，那就是这个类如往常一样，也是一个抽象类。整个animation.dart 文件只有两百多行代码，其中包含了大量的注释。这句话应该就可以看出Tween 的重要性了。一 Animation了解一下这个类中的方法吧。
Flutter 动画（显式动画、隐式动画、Hero动画、页面转场动画、交错动画）
Lan_Se_Tian_Ma的博客
02-16 2086
当前案例 Flutter SDK版本：3.13.2。
Flutter动画基础教程
08-25
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的用户界面。本课程以理论+实例的方式带领大家学习动画的基础理论及各种动画特效的编写。 本次课程包含以下内容：动画基本概念动画的本质帧与FPS插值器/估值器动画类型动画相关核心类Animation介绍AnimationController动画管理类CurvedAnimation非线性动画Tween补间值生成类动画事件监听及控制流程Listeners和StatusListeners动画监听动画控制流程动画示例字体放大动画缓动动画遮罩动画数字变化动画图表动画AnimatedOpacity实现渐变效果Hero实现页面切换动画
Flutter系列八：Flutter动画的使用
lcl130的专栏
04-08 866
动画能提高用户的使用体验，使APP更流畅。那么在Flutter中如何实现动画以及选择使用什么样的动画呢？ 开门见山，我们直接上图： 绘制依赖的动画 绘制依赖的动画是指我们用动画库没法直接实现的动画，这时候有两种实现方式： 用Canvas不断绘制形成动画(CustomPainter或者自定义RenderObjectWidget)； 使用设计师提供的动画文件，然后结合三方库来使用(Lottie或者Flare等)。 Lottie lottie-flutter借鉴自Lottie，使用方法很也很简单。 添
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值