flutter布局动画,flutter 布局详解,必知必会
Flutter动画 --- 平移/旋转/缩放/渐变
在Flutter中Widget动画的核心类有下面这些:
创新互联建站网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队,负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作,以确保网站外观精美、成都网站设计、网站建设易于使用并且具有良好的响应性。
Animation:动画库中的一个核心类,它生成指导动画的值;
CurvedAnimation:将动画过程抽象为一个非线性曲线;
AnimationController:用来管理管理动画,常用的方法有forward():启动动画;reverse({double from}:倒放动画;reset():重置动画,将其设置到动画的开始位置;stop({ bool canceled = true }):停止动画。
Tween:AnimationController对象的范围从0.0到1.0。如果您需要不同的范围或不同的数据类型,则可以使用Tween来配置动画以生成不同的范围或数据类型的值。
Flutter 之 流式布局(Wrap、Flow)
流式布局在移动端是非常常见的,比如商品列表,瀑布流、标签页等等
Flutter 中提供了两种流式布局Wrap和Flow
Wrap可以进行水平方向或者垂直方向上的布局,在一行或者一列现实不完所有的widgets的时候,能够根据当前宽度或者高度自动换行。
alignment 不管设置什么属性都不能调整第一行的位置
包裹一个Container来看,当前Wrap没有占满全屏
把Container占满全屏才表现下面效果
我们一般很少会使用Flow,因为其过于复杂,需要自己实现子组件的位置转换,所以在很多场景下首先要考虑的是Wrap是否满足需求。Flow主要用于一些需要自定义布局策略或性能要求较高(如动画中)的场景。
Flutter 仿抖音效果 (二) 界面布局
Flutter 仿抖音效果 (一) 全屏点爱星
Flutter 仿抖音效果 (二) 界面布局
[Flutter 仿抖音效果 (三) 视频播放列表] ( )
项目地址: 持续效果更新
1.基本的布局是简单的,外层通过Stack作为根
2.左边点赞的控件组通过Align进行统一布局
3.顶部控件组通过Positioned进行布局,设置顶部距离,其实也可以用align,我们多使用几种来习惯flutter的布局
4.底部同样使用Positioned,设置底部距离
5.子页面的左右滑动使用PageView,一开始我们要从推荐开始左滑到关注,可以使用reverse属性,不需要更多额外的操作
1.pageController监听
刷新顶部的下划线时,我们一样使用StreamController刷新,这样效率比setstate高很多
2.歌曲名走马灯效果
这个效果看起来挺麻烦的其实实现起来超级的简单用最普通的ListView就能快速的实现
首页listview里面套入的是最简单的container+text
listview添加一个ScrollController做为滑动的控制
使用一个定时器,把listview滑到最大的位置之后,在滑回去
先通过scroController.position.maxScrollExtent获取最大位置,
然后通过scroController.animateTo进行滑动,因为我设置一次循环的时间是3000毫秒,所以滑过去和滑回来的时间各占一般 new Duration(milliseconds: (time * 0.5).toInt()),还有就是歌名没有大于最大宽度时候其实我们不需要进行滑动,所以判断maxScrollExtent是否大于0来确定是否进行滑动动画
flutter-动画
1.动画原理:在一段时间内快速的多次改变UI外观,由于人眼会产生视觉暂留所以最终看到的就是一个连续的动画。
UI的一次改变称为一个动画帧,对应一次屏幕刷新。
FPS:帧率,每秒的动画帧数。
flutter动画分为两类:
常见动画模式:
是一个抽象类,主要的功能是保存动画的值和状态。常用的一个Animation类是Animation double ,是一个在一段时间内依次生成一个区间之间的值的类,可以是线性或者曲线或者其他。
可以生成除double之外的其他类型值,如:Animation Color 或 Animation Size 。
是一个动画控制器,控制动画的播放状态,在屏幕刷新的每一帧,就会生成一个新的值。
包含动画的启动forward()、停止stop() 、反向播放 reverse()等方法,在给定的时间段内线性的生成从0.0到1.0(默认区间)的数字。
curve:描述动画的曲线过程。
curvedAnimation:指定动画的曲线。
常用Curve:
继承自Animatable T ,表示的就是一个 Animation 对象的取值范围,只需要设置开始和结束的边界值(值也支持泛型)。 它唯一的工作就是定义输入范围到输出范围的映射。
例如,Tween可能会生成从红到蓝之间的色值,或者从0到255。
Tween.animate:返回一个Animation。
映射过程:
1). Tween.animation通过传入 aniamtionController 获得一个_AnimatedEvaluation 类型的 animation 对象(基类为 Animation), 并且将 aniamtionController 和 Tween 对象传入了 _AnimatedEvaluation 对象。
2). animation.value方法即是调用 _evaluatable.evaluate(parent)方法, 而 _evaluatable 和 parent 分别为 Tween 对象和 AnimationController 对象。
3). 这里的 animation 其实就是前面的 AnimationController 对象, transform 方法里面的 animation.value则就是 AnimationController 线性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我们可以看到这个 0.0~1.0 的值被映射到了 begin 和 end 范围内了。
接收一个TickerProvider类型的对象,它的主要职责是创建Ticker。
防止屏幕外动画消耗资源。
[图片上传失败...(image-115b94-1636441483468)]
过程:
回调:
不使用addListener()和setState()来给widget添加动画。
使用AnimatedWidget,将widget分离出来,创建一个可重用动画的widget,AnimatedWidget中会自动调用addListener()和setState()
AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
如何渲染过渡,把渲染过程也抽象出来:
AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。
MaterialPageRoute:平台风格一致的路由切换动画
CupertinoPageRoute:左右切换风格
自定义:PageRouteBuilder
1.要创建交织动画,需要使用多个动画对象(Animation)。
2.一个AnimationController控制所有的动画对象。
3.给每一个动画对象指定时间间隔(Interval)
可以同时对其新、旧子元素添加显示、隐藏动画.
当AnimatedSwitcher的child发生变化时(类型或Key不同),旧child会执行隐藏动画,新child会执行执行显示动画。
希望大家支持一下,感谢
Flutter 之 动画1
对动画系统而言,为了实现动画,它需要做三件事儿:1.确定画面变化的规律;2.根据这个规律,设定动画周期,启动动画;3.定期获取当前动画的值,不断地微调、重绘画面。
这三件事情对应到 Flutter 中,就是 Animation、AnimationController 与 Listener:
1.Animation 是 Flutter 动画库中的核心类,会根据预定规则,在单位时间内持续输出动画的当前状态。Animation 知道当前动画的状态(比如,动画是否开始、停止、前进或者后退,以及动画的当前值),但却不知道这些状态究竟应用在哪个组件对象上。换句话说,Animation 仅仅是用来提供动画数据,而不负责动画的渲染。
2.AnimationController 用于管理 Animation,可以用来设置动画的时长、启动动画、暂停动画、反转动画等。
3.Listener 是 Animation 的回调函数,用来监听动画的进度变化,我们需要在这个回调函数中,根据动画的当前值重新渲染组件,实现动画的渲染。
class NormalAnimateWidget extends StatefulWidget {
@override
StatecreateState()=_NormalAnimateState();
}
class _NormalAnimateState extends Statewith SingleTickerProviderStateMixin{
AnimationController?controller;
Animation?animation;
@override
void initState() {
// TODO: implement initState
super.initState();
/*
* AnimationController
AnimationController用于控制动画,它包含动画的启动forward()、停止stop() 、反向播放 reverse()等方法。
* AnimationController会在动画的每一帧,就会生成一个新的值。
* 默认情况下,AnimationController在给定的时间段内线性的生成从 0.0 到1.0(默认区间)的数字。
* */
/*Ticker
当创建一个AnimationController时,需要传递一个vsync参数,
它接收一个TickerProvider类型的对象,它的主要职责是创建Ticker,定义如下:
abstract class TickerProvider {
//通过一个回调创建一个Ticker
Ticker createTicker(TickerCallback onTick);
}
Flutter 应用在启动时都会绑定一个SchedulerBinding,
通过SchedulerBinding可以给每一次屏幕刷新添加回调,
而Ticker就是通过SchedulerBinding来添加屏幕刷新回调,这样一来,
每次屏幕刷新都会调用TickerCallback。
使用Ticker(而不是Timer)来驱动动画会防止屏幕外动画(动画的UI不在当前屏幕时,如锁屏时)
消耗不必要的资源,因为Flutter中屏幕刷新时会通知到绑定的SchedulerBinding,
而Ticker是受SchedulerBinding驱动的,
由于锁屏后屏幕会停止刷新,所以Ticker就不会再触发。
*/
// 创建动画周期为1秒的AnimationController对象
controller =AnimationController(
vsync:this, duration:const Duration(milliseconds:3000));
/*
* Curve
* 动画过程可以是匀速的、匀加速的或者先加速后减速等。
* Flutter中通过Curve(曲线)来描述动画过程,
* 我们把匀速动画称为线性的(Curves.linear),而非匀速动画称为非线性的。
* 我们可以通过CurvedAnimation来指定动画的曲线,如:
final CurvedAnimation curve =
CurvedAnimation(parent: controller, curve: Curves.easeIn);
*
Curves曲线 动画过程
linear 匀速的
decelerate 匀减速
ease 开始加速,后面减速
easeIn 开始慢,后面快
easeOut 开始快,后面慢
easeInOut 开始慢,然后加速,最后再减速
*
* 当然我们也可以创建自己Curve,例如我们定义一个正弦曲线:
class ShakeCurve extends Curve {
@override
double transform(double t) {
return math.sin(t * math.PI * 2);
}
}
* */
final CurvedAnimation curve =CurvedAnimation(
parent:controller!, curve:Curves.linear);
/*
* Animation
*Animation是一个抽象类,它本身和UI渲染没有任何关系,
* 而它主要的功能是保存动画的插值和状态;其中一个比较常用的Animation类是Animation。
* Animation对象是一个在一段时间内依次生成一个区间(Tween)之间值的类。
* Animation对象在整个动画执行过程中输出的值可以是线性的、曲线的、一个步进函数或者任何其他曲线函数等等,
* 这由Curve来决定。 根据Animation对象的控制方式,
* 动画可以正向运行(从起始状态开始,到终止状态结束),
* 也可以反向运行,甚至可以在中间切换方向。
* Animation还可以生成除double之外的其他类型值
* ,如:Animation 或Animation。
* 在动画的每一帧中,我们可以通过Animation对象的value属性获取动画的当前状态值。
#动画通知
我们可以通过Animation来监听动画每一帧以及执行状态的变化,Animation有如下两个方法:
addListener();它可以用于给Animation添加帧监听器,
* 在每一帧都会被调用。
* 帧监听器中最常见的行为是改变状态后调用setState()来触发UI重建。
addStatusListener();
* 它可以给Animation添加“动画状态改变”监听器;
* 动画开始、结束、正向或反向(见AnimationStatus定义)时会调用状态改变的监听器。
* */
// 创建从50到200线性变化的Animation对象
// 普通动画需要手动监听动画状态,刷新UI
animation =Tween(begin:10.0, end:200.0).animate(curve)
..addListener(()=setState((){}));
/*
* Tween
* 默认情况下,AnimationController对象值的范围是[0.0,1.0]。
* 如果我们需要构建UI的动画值在不同的范围或不同的数据类型,
* 则可以使用Tween来添加映射以生成不同的范围或数据类型的值。
*Tween构造函数需要begin和end两个参数。
* Tween的唯一职责就是定义从输入范围到输出范围的映射。
* 输入范围通常为[0.0,1.0],但这不是必须的,我们可以自定义需要的范围。
* */
// 启动动画
controller!.repeat(reverse:true);
//
// 第二段
// animation!.addStatusListener((status) {
// if (status == AnimationStatus.completed) {
// controller!.reverse();// 动画结束时反向执行
// } else if (status == AnimationStatus.dismissed) {
// controller!.forward();// 动画反向执行完毕时,重新执行
// }
// });
// controller!.forward();// 启动动画
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
body:Center(
child:Container(
width:animation!.value,// 将动画的值赋给 widget 的宽高
height:animation!.value,//
child:FlutterLogo(),
)
)
)
);
}
@override
void dispose() {
// 释放资源
controller!.dispose();
super.dispose();
}
}
当前名称:flutter布局动画,flutter 布局详解,必知必会
标题URL:http://pwwzsj.com/article/hocscg.html