flutter游戏动画,flutter game

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Flutter上线项目实战——Vap视频动画

透明视频动画是目前比较流行的实现动画的一种, 大厂也相继开源自己的框架，最终我们选中腾讯vap ，它支持了Android、IOS、Web，为我们封装flutter_vap提供了天然的便利，并且它提供了将帧图片生成带alpha通道视频的工具，这简直太赞了。

VAP（Video Animation Player）是企鹅电竞开发，用于播放酷炫动画的实现方案。

video for youtube

video for qiniu

apk download

github

相关问答

Q1: Flutter-PositionedTransition位置变化动画

1） PositionedTransition 是AnimatedWidget的子类，跟AnimatedBuilder一样。主要是为了在使用动画的过程中减少不必要的Widget对象的创建工作，提高效率。

2）该类持有了一个AnimationRelativeRect的引用rect

3）在build构建widget的时候使用了动画rect.value，在这里这个value就是RelativeRect对象。

那么这个RelativeRect对象是什么呢？在回答这个问题之前先来看看官方文档给的例子，通过这个视频可以看出PositionedTranstion是用来干嘛的。

width="560" height="315" src=" " allowfullscreen=""

显而易见，PositionedTranstion通过一个特定的动画AnimationRelativeRect将Widget的位置从动画的生命周期的起始位置移到结束位置。而这个位置信息就是RelativeRect来表示，Relative相对的意思，相对谁？相对于某个Widget，而不是相对于坐标原点。 RelativeRect 有四个属性：

所以如果我们想让一个widget的位置（上下左右）距离RelativeRect都是100的话，就要这么写：

Q2: TweenAnimationBuilder 说明

当我们想创建一个自定义的隐式动画时，我们可以使用TweenAnimationBuilder.

中文说明

假设你想创建一个基础的动画，这个动画不会永远重复。它仅仅是一个组件或则一个组件树。Flutter有一个惯例，将其隐式动画小部件命名为AnimatedFoo。

tween 设置动画的值。开始xxx 结束xxx

builder: 第一个参数是BuildContext,第二个是value取决于你要设置的动画数据。第三个参数子组件，用于优化.

同时还可以设置运动曲线 curve。

onEnd监听，可以在动画完成时，进行下一步动作

设置子Widget参数时潜在性能的优化。意思是说

builder中的child可以提前构建。以参数的方式传递尽力啊。flutter会自动唯一的小部件是什么，它将会需要逐帧重建新的内容。而不是其实图像的本身。（如果时小的组件，没啥必要，但是如果是巨大的动画。作用应该会很明显）

Q3: 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会执行执行显示动画。

希望大家支持一下，感谢

Q4: flutter怎么加入2d骨骼动画？