Cодержание
Руководство Flutter Tween
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
В 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:
- 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(s).
Tween<T extends dynamic>(
{T? begin,
T? end}
)
TODO
TODO
TODO
