Флаттер и 3D

Флаттер и 3D

Что, если я хочу отобразить что-то в 3D? Хм…

Все в одном ресурсе Flutter: https://flatteredwithflutter.com/flutter-and-3d/

Предварительные требования…

Созданное приложение предназначено для Flutter Desktop… Если вы новичок в нем, мы вам поможем, прочтите статью здесь

Начинать…

В этой статье основное внимание уделяется следующим виджетам:

• Преобразовать
• RotationTransition

Преобразовать…

Согласно официальной документации Flutter,

«Виджет, который применяет преобразование перед рисованием своего дочернего элемента».

Это важный виджет, если вы стремитесь к трехмерному преобразованию…

Наш код с использованием Transform Widget,

Параметры для виджета преобразования:

• alignment: выравнивание начала координат (в нашем случае FractionalOffset.centerLeft)
• преобразовать: матрица для преобразования…
• дочерний: виджет, в котором происходит преобразование.

Преобразовать матрицу…

Преобразование принимает трехмерную матрицу преобразования, которая является Matrix4.

Шаги:

1. Создайте матрицу:

Начните с единичной матрицы и примените к ней преобразования.

Matrix4.identity()

2. Установите перспективу:

По статье Flutter

Перспектива заставляет объекты, находящиеся дальше, казаться меньше. Установка для строки 3 и столбца 2 матрицы значения 0,001 уменьшает масштаб в зависимости от расстояния до них.

Теперь мы знаем,

setEntry(3, 2, 0.0011)

3 означает строку 3, 2 означает столбец 2

Число 0,0011: число перспективы… Это число может быть достигнуто только путем игры…

В нашем случае 0,0011 (подходит)…

3. Установите вращение / наклон оси….

..rotateX(_offset.dy)
..rotateY(_offset.dx),

rotateX и rotateY принимают в качестве параметров угол. В нашем случае мы определили смещение как:

Offset _offset = Offset(0.3, -0.9);

Опять же, эти ценности были достигнуты путем игры….

4. Укажите дочерний элемент: RotationTransition в нашем случае.

RotationTransition…

Согласно официальной документации Flutter,

Анимирует вращение виджета.

Это дочерний виджет для нашего трехмерного преобразования…

Параметры для виджета RotationTransition:

• повороты: анимация (в нашем случае контроллер анимации)
• дочерний: виджет, в котором происходит вращение…

Примечание. Поскольку для ваших поворотов нужен контроллер, следовательно, виджет должен быть виджетом с отслеживанием состояния, имеющим контроллер анимации….

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

Как выглядит 3D-эффект:

Замедление анимации…

Этого можно добиться с помощью (timeDilation)

timeDilation = 2.0; // Will slow down animations by a factor of two

Это свойство присутствует внутри пакета

import 'package:flutter/scheduler.dart';

Статьи, связанные с Flutter Desktop:

Исходный код учебника здесь…