betacode

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

View more Tutorials:

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- Tween

В Flutter, класс Tween пытается имитировать "линейную интерполяцию" (linear interpolation). Поэтому, прежде чем поговорить об этом, нам нужно прояснить понятие интерполяции и линейной интерполяции.
Интерполяция - это процесс оценки неизвестных точек данных между известными точками данных.
Для упрощения взгляните на иллюстрацию ниже. Розовая кривая включает в себя фактические точки данных, но мы знаем только несколько фактических точек данных (красным цветом). Вопрос в том, как мы можем оценить другие точки?
Метод линейной интерполяции Newton говорит о том, что соедините точки с возрастающими координатами X, чтобы создать полилинии (синие), и вы сможете оценить другие точки данных.
Согласно приведенному выше рисунку, - это точка на полилинии (синяя), оцененная методом линейной интерполяции, а 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:
  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).

3- Tween constructor


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

4- transform(t)

TODO

5- lerp(t)

TODO

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.