189 8069 5689
透明视频动画是目前比较流行的实现动画的一种, 大厂也相继开源自己的框架，最终我们选中 腾讯vap ，它支持了Android、IOS、Web，为我们封装flutter_vap提供了天然的便利，并且它提供了将帧图片生成带alpha通道视频的工具，这简直太赞了。
成都创新互联专注于天元企业网站建设,响应式网站建设,商城网站制作。天元网站建设公司,为天元等地区提供建站服务。全流程按需求定制网站，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务
VAP（Video Animation Player）是企鹅电竞开发，用于播放酷炫动画的实现方案。
video for youtube
video for qiniu
apk download
github
对动画系统而言，为了实现动画，它需要做三件事儿：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();
}
}
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会执行执行显示动画。
希望大家支持一下，感谢
APP 启动页在国内是最常见也是必备的场景，其中启动页在 iOS 上算是强制性的要求，其实配置启动页挺简单，因为在 Flutter 里现在只需要：
一般只要配置无误并且图片尺寸匹配，基本上就不会有什么问题， 那既然这样，还有什么需要适配的呢？
事实上大部分时候 iOS 是不会有什么问题， 因为 LaunchScreen.storyboard 的流程本就是 iOS 官方用来做应用启动的过渡；而对于 Andorid 而言，直到 12 之前 windowBackground 这种其实只能算“民间”野路子 ，所以对于 Andorid 来说，这其中就涉及到一个点：
所以下面主要介绍 Flutter 在 Android 上为了这个启动图做了哪些骚操作～
在已经忘记版本的“远古时期” ， FlutterActivity 还在 io.flutter.app.FlutterActivity 路径下的时候，那时启动页的逻辑相对简单，主要是通过 App 的 AndroidManifest 文件里是否配置了 SplashScreenUntilFirstFrame 来进行判断。
在 FlutterActivity 内部 FlutterView 被创建的时候，会通过读取 meta-data 来判断是否需要使用 createLaunchView 逻辑 ：
是不是很简单，那就会有人疑问为什么要这样做？我直接配置 Activity 的 android:windowBackground 不就完成了吗？
这就是上面提到的时间差问题， 因为启动页到 Flutter 渲染完第一帧画面中间，会出现概率出现黑屏的情况，所以才需要这个行为来实现过渡 。
经历了“远古时代”之后， FlutterActivity 来到了 io.flutter.embedding.android.FlutterActivity ， 在到 2.5 版本发布之前，Flutter 又针对这个启动过程做了不少调整和优化，其中主要就是 SplashScreen 。
自从开始进入 embedding 阶段后， FlutterActivity 主要用于实现了一个叫 Host 的 interface ，其中和我们有关系的就是 provideSplashScreen 。
默认情况下它会从 AndroidManifest 文件里是否配置了 SplashScreenDrawable 来进行判断 。
默认情况下当 AndroidManifest 文件里配置了 SplashScreenDrawable ，那么这个 Drawable 就会在 FlutterActivity 创建 FlutterView 时被构建成 DrawableSplashScreen 。
DrawableSplashScreen 其实就是一个实现了 io.flutter.embedding.android.SplashScreen 接口的类，它的作用就是：
之后 FlutterActivity 内会创建出 FlutterSplashView ，它是个 FrameLayout。
FlutterSplashView 将 FlutterView 和 ImageView 添加到一起， 然后通过 transitionToFlutter 的方法来执行动画，最后动画结束时通过 onTransitionComplete 移除 splashScreenView 。
所以整体逻辑就是：
当然这里也是分状态：
当然这个阶段的 FlutterActivity 也可以通过 override provideSplashScreen 方法来自定义 SplashScreen 。
看到没有，做了这么多其实也就是为了弥补启动页和 Flutter 渲染之间， 另外还有一个优化，叫 NormalTheme 。
通过该配置 NormalTheme ，在 Activity 启动时，就会首先执行 switchLaunchThemeForNormalTheme(); 方法将主题从 LaunchTheme 切换到 NormalTheme 。
大概配置完就是如下样子， 前面分析那么多其实就是为了告诉你，如果出现问题了，你可以从哪个地方去找到对应的点 。
讲了那么多， Flutter 2.5 之后 provideSplashScreen 和 io.flutter.embedding.android.SplashScreenDrawable 就被弃用了，惊不喜惊喜，意不意外，开不开心 ？
通过源码你会发现，当你设置了 splashScreen 的时候，会看到一个 log 警告：
为什么会弃用？
其实这个提议是在 这个 issue 上，然后通过 这个 pr 完成调整。
大概意思就是： 原本的设计搞复杂了，用 OnPreDrawListener 更精准，而且不需要为了后面 Andorid12 的启动支持做其他兼容，只需要给 FlutterActivity 等类增加接口开关即可 。
也就是2.5之后 Flutter 使用 ViewTreeObserver.OnPreDrawListener 来实现延迟直到加载出 Flutter 的第一帧。
为什么说默认情况？ 因为这个行为在 FlutterActivity 里，是在 getRenderMode() == RenderMode.surface 才会被调用，而 RenderMode 又和 BackgroundMode 有关心 。
所以在 2.5 版本后， FlutterActivity 内部创建完 FlutterView 后就会执行一个 delayFirstAndroidViewDraw 的操作。
这里主要注意一个参数： isFlutterUiDisplayed 。
当 Flutter 被完成展示的时候， isFlutterUiDisplayed 就会被设置为 true。
所以当 Flutter 没有执行完成之前， FlutterView 的 onPreDraw 就会一直返回 false ，这也是 Flutter 2.5 开始之后适配启动页的新调整。
看了这么多，大概可以看到其实开源项目的推进并不是一帆风顺的，没有什么是一开始就是最优解，而是经过多方尝试和交流，才有了现在的版本，事实上开源项目里，类似这样的经历数不胜数：
当我们想创建一个自定义的隐式动画时，我们可以使用TweenAnimationBuilder.
中文说明
假设你想创建一个基础的动画，这个动画不会永远重复。它仅仅是一个组件或则一个组件树。Flutter有一个惯例，将其隐式动画小部件命名为AnimatedFoo。
tween 设置动画的值。开始xxx 结束xxx
builder: 第一个参数是BuildContext,第二个是value取决于你要设置的动画数据。第三个参数子组件，用于优化.
同时还可以设置运动曲线 curve。
onEnd监听，可以在动画完成时，进行下一步动作
设置子Widget参数时潜在性能的优化。意思是说
builder中的child可以提前构建。以参数的方式传递尽力啊。flutter会自动唯一的小部件是什么，它将会需要逐帧重建新的内容。而不是其实图像的本身。（如果时小的组件，没啥必要，但是如果是巨大的动画。作用应该会很明显）