1. Tween
在 Flutter 中,Tween 类尝试模拟“线性插值”。所以在讲之前,我们需要先搞清楚插值和线性插值的概念。
插值是估计落在已知数据点之间的未知数据点的过程。
为简化起见,请看下图。粉色曲线包括实际数据点,但我们只知道几个实际数据点(红色)。问题是,我们如何估计其他点?
Newton 的线性插值方法说连接具有递增 X 坐标的点以创建折线(蓝色),您可以估计其他数据点。
根据上图,P是曲折线上的一个点(蓝色),通过线性插值法估计,P*是实际数据点。显然,有一点错误。
Tweet<T>
回到 Tweet <T>
类,它使用 2 个已知数据点(起点和终点)模拟线性插值。在这种情况下,折线只是一条直线。
const Offset(
double dx,
double dy
)
像往常一样,我们从一个简单的例子开始:带有参数 <T>
的 Tweet<T>
是偏移类型。在 0 到 1 的时间段内,物体从位置 P0 (2.10) 到位置 P1 (20.4) 以直线稳定移动。可以在任何给定时间计算这个对象的位置。
Tween<Offset> tween = Tween<Offset>(begin: Offset(2, 10), end: Offset(20,4));
var times = [0.0, 0.25, 0.5, 0.75, 1.0];
for(var t in times) {
Offset point = tween.transform(t);
print("t = " + t.toString() +". x/y = " + point.dx.toString() +"/" + point.dy.toString());
}
上面示例代码输出结果如下 -
I/flutter (22119): t = 0.0. x/y = 2.0/10.0
I/flutter (22119): t = 0.25. x/y = 6.5/8.5
I/flutter (22119): t = 0.5. x/y = 11.0/7.0
I/flutter (22119): t = 0.75. x/y = 15.5/5.5
I/flutter (22119): t = 1.0. x/y = 20.0/4.0
因此,只要提供 2 个数据点,Tweet<T>
就会估计很多其他数据点,它们可以用作动画过程中的不同状态。
2. Tween类
Tween类的层次结构:
Tween 类的后代列表:
AlignmentGeometryTween
AlignmentTween
BorderRadiusTween
BorderTween
BoxConstraintsTween
ColorTween
ConstantTween
DecorationTween
EdgeInsetsGeometryTween
EdgeInsetsTween
FractionalOffsetTween
IntTween
MaterialPointArcTween
Matrix4Tween
RectTween
MaterialRectArcTween
MaterialRectCenterArcTween
RelativeRectTween
ReverseTween
ShapeBorderTween
SizeTween
StepTween
TextStyleTween
ThemeDataTween
Tweet<T>
类有很多子类,其中一些是为特定类型的 <T>
参数创建的。示例:AlignmentGeometryTween
类从 Tween<AlignmentGeometry>
扩展,它是 2 个 AlignmentGeomery 之间的线性插值。
3. Tween构造函数
Tween<T extends dynamic>(
{T? begin,
T? end}
)