betacode

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

  1. Tween
  2. Tween classes
  3. Tween constructor
  4. transform(t)
  5. lerp(t)

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

2. Tween classes

Иерархия классов:
Список потомков класса Tween:
  • AlignmentGeometryTween
  • AlignmentTween
  • BorderRadiusTween
  • BorderTween
  • BoxConstraintsTween
  • ColorTween
  • ConstantTween
  • DecorationTween
  • EdgeInsetsGeometryTween
  • EdgeInsetsTween
  • FractionalOffsetTween
  • IntTween
  • MaterialPointArcTween
  • Matrix4Tween
  • RectTween
    1. MaterialRectArcTween
    2. MaterialRectCenterArcTween
  • RelativeRectTween
  • ReverseTween
  • ShapeBorderTween
  • SizeTween
  • StepTween
  • TextStyleTween
  • ThemeDataTween
Класс Tweet<T> имеет довольно много подклассов, некоторые из которых создаются для определенных типов параметров <T>. Нарример: Класс AlignmentGeometryTween является расширением от Tween<AlignmentGeometry>, который представляет собой линейную интерполяцию между 2 AlignmentGeomery(s).

3. Tween constructor

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

4. transform(t)

TODO

5. lerp(t)

TODO

Pуководства Flutter

Show More

Pуководства Flutter

Show More

Новейшие статьи

Show More