Трептене и 3D

Flutter и 3D

Какво ще стане, ако искам да покажа нещо в 3D? Хммм…

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

Предпоставка…

Създаденото приложение е за Flutter Desktop… В случай, че не сте запознати с него, ние ви покриваме, следвайте статията тук

Започнете...

Тази статия се фокусира върху следните джаджи:

• Трансформиране
• Преход на завъртане

Трансформиране...

Според официалната документация на Flutter,

„Джаджа, която прилага трансформация, преди да нарисува детето си.“

Това е важна джаджа, ако се стремите към 3D трансформация...

Нашият код с помощта на Transform Widget,

Параметри за Transform Widget:

• подравняване: Подравняване на началото (Нашият случай FractionalOffset.centerLeft)
• трансформиране: Матрица за трансформиране...
• дете: Притурка, на която се извършва трансформация

Преобразуване на матрицата...

Transform взема 3D „матрица на трансформация“, която е „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,

Анимира въртенето на джаджа.

Това е дъщерната джаджа за нашата 3D трансформация...

Параметри за RotationTransition Widget:

• завои: анимация (нашият контролер за анимация на случай)
• дете: Джаджа, на която се извършва завъртане...

Забележка: Тъй като вашите завои се нуждаят от контролер, следователно приспособлението трябва да бъде приспособление за състояние с контролер за анимация...

Изображението за слънчевата система се завърта с помощта на контролера за анимация, също така анимацията се поддържа в режим на повторение с продължителност от 50 секунди (за един цикъл на анимация)….

Как изглежда 3D ефекта:

Анимациите се забавят...

Това може да се постигне с помощта на (timeDilation)

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

Това свойство присъства вътре в пакета

import 'package:flutter/scheduler.dart';

Статии, свързани с Flutter Desktop:

Изходният код за урока тук…