Руководство Flutter Tween

В Flutter, класс Tween пытается имитировать "линейную интерполяцию" (linear interpolation). Поэтому, прежде чем поговорить об этом, нам нужно прояснить понятие интерполяции и линейной интерполяции.

Интерполяция - это процесс оценки неизвестных точек данных между известными точками данных.

Для упрощения взгляните на иллюстрацию ниже. Розовая кривая включает в себя фактические точки данных, но мы знаем только несколько фактических точек данных (красным цветом). Вопрос в том, как мы можем оценить другие точки?

Метод линейной интерполяции Newton говорит о том, что соедините точки с возрастающими координатами X, чтобы создать полилинии (синие), и вы сможете оценить другие точки данных.

Согласно приведенному выше рисунку, P - это точка на полилинии (синяя), оцененная методом линейной интерполяции, а P* - фактическая точка данных. Очевидно, здесь есть небольшая ошибка (error).

Tweet<T>

Возвращаясь к классу Tweet<T>, он имитирует линейную интерполяцию с 2 известными точками данных (начальная и конечная точки). В этом случае полилинии - это только прямая линия.

const Offset(
    double dx,
    double dy
)

Как обычно, мы начинаем с простого примера: Tweet<T> с параметром <T> - тип Offset. В интервале времени от 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());
}

Output:

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> оценит множество других точек данных, они могут быть использованы в качестве разных состояний в процессе анимации.

Иерархия классов:

Список потомков класса Tween:

1. AlignmentGeometryTween
2. AlignmentTween
3. BorderRadiusTween
4. BorderTween
5. BoxConstraintsTween
6. ColorTween
7. ConstantTween
8. DecorationTween
9. EdgeInsetsGeometryTween
10. EdgeInsetsTween
11. FractionalOffsetTween
12. IntTween
13. MaterialPointArcTween
14. Matrix4Tween
15. RectTween
    1. MaterialRectArcTween
    2. MaterialRectCenterArcTween
16. RelativeRectTween
17. ReverseTween
18. ShapeBorderTween
19. SizeTween
20. StepTween
21. TextStyleTween
22. ThemeDataTween

Класс Tweet<T> имеет довольно много подклассов, некоторые из которых создаются для определенных типов параметров <T>. Нарример: Класс AlignmentGeometryTween является расширением  от Tween<AlignmentGeometry>, который представляет собой линейную интерполяцию между 2 AlignmentGeomery(s).

Tween<T extends dynamic>(
  {T? begin,
  T? end}
)

TODO

TODO

TODO