предисловие
Реализация пользовательского интерфейса и взаимодействия является важным навыком для крупных разработчиков интерфейса, а также является ключом к освоению разработки Flutter; изучая Flutter, я понял несколько интересных эффектов пользовательского интерфейса, которые часто встречаются на стороне клиента. родные колеса, Однако кроссплатформенность Flutter несравнима с родными, не говоря уже о его не слабой производительности. В этой статье в основном представлена библиотека спецэффектов Flutter.flutter_effectsОсновная ситуация и использование;
Введение в проект
flutter_effects: он состоит из нескольких проектов пакетов Flutter. Цель состоит в том, чтобы использовать чистый Flutter для достижения интересных эффектов пользовательского интерфейса и поддержки работы Android и ios. Проект находится только в зачаточном состоянии, и вы можете вносить предложения и отзывы. Если у вас есть хорошие идеи, Добро пожаловать, чтобы выдвинуть требование или участвовать вместе;
Возможности, которые были реализованы:
| Типы | Поддержка дочерних виджетов | Примечание |
|---|---|---|
| Разное масштабирование слов | текст | Поддерживаются только символы, форматированный текст не поддерживается |
| пограничные линии | все | - |
| радужный шрифт | текст | В настоящее время поддерживается только текст, ожидается форматированный текст. |
| взрыв частиц | все | Поддерживает все виджеты, включая изображения |
| сильно разбил | все | - |
| скретч-карта | все | Передний план нужно нарисовать холстом |
| Больше возможностей | - | В разработке. . . |
Введение
Разное масштабирование слов
void initState() {
super.initState();
sentences = [
"What is design?",
"Design is not just",
"what it looks like and feels like.",
"Design is how it works. \n- Steve Jobs",
"Older people",
"sit down and ask,",
"'What is it?'",
"but the boy asks,",
"What can I do with it?. \n- Steve Jobs",
"Swift",
"Objective-C",
"iPhone",
"iPad",
"Mac Mini",
"MacBook Pro",
"Mac Pro",
"爱老婆",
"老婆和女儿"
];
}
DiffScaleText(
text: sentences[diffScaleNext % sentences.length],
textStyle: TextStyle(fontSize: 20, color: Colors.blue),
)
DiffScaleText временно поддерживает только китайские и английские символы, но не поддерживает смайлики и форматированный текст; параметр text управляет отображаемым текстом, и для обновления следующего нужно только изменить текст, а затем перестроить, нет необходимости вручную сохранять исторический текст;
пограничные линии
LineBorderText(
child: Text(
"Border Effect",
style: TextStyle(fontSize: 20),
),
autoAnim: true)
LineBorderText поддерживает любой виджет в качестве дочернего, а параметр autoAnim определяет, следует ли автоматически выполнять анимацию при ее создании;
радужный шрифт
RainbowText(colors: [
Color(0xFFFF2B22),
Color(0xFFFF7F22),
Color(0xFFEDFF22),
Color(0xFF22FF22),
Color(0xFF22F4FF),
Color(0xFF5400F7),
], text: "Welcome to BBT", loop: true)
RainbowText временно поддерживает преобразование цвета текста, а цикл параметров определяет, следует ли циклически повторять анимацию;
взрыв частиц
ExplosionWidget(
tag: "Explosion Text",
child: Container(
alignment: Alignment.center,
color: Colors.blueAccent,
child: Text(
"Explosion Text",
style: TextStyle(
fontSize: 20,
color: Colors.red,
fontWeight: FontWeight.bold),
)))
ExplosionWidget поддерживает любой тип виджета в качестве дочернего.Обратите внимание, что тег параметра указывает на уникальность дочернего элемента.Если дочерний элемент изменен, тег необходимо изменить, иначе перестроение не будет выполнять эффект взрыва;
сильно разбил
AnvilEffectWidget(child: Text(
"👉AnvilEffect👈",
style: TextStyle(color: Colors.white, fontSize: 20),
)
AnvilEffectWidget поддерживает любой тип виджета как дочерний;
скретч-карта
ScratchCardWidget(
strokeWidth: 20,
threshold: 0.5,
foreground: (canvas, size, offset) {
if (_image != null) {
double scale;
double dx = 0;
double dy = 0;
if (_image.width * size.height >
size.width * _image.height) {
scale = size.height / _image.height;
dx = (size.width - _image.width * scale) / 2;
} else {
scale = size.width / _image.width;
dy = (size.height - _image.height * scale) / 2;
}
canvas.save();
canvas.translate(dx, dy);
canvas.scale(scale, scale);
canvas.drawImage(_image, Offset(0, 0), new Paint());
canvas.restore();
} else {
canvas.drawRect(
Rect.fromLTWH(0, 0, size.width, size.height),
Paint()
..color = Colors.grey);
}
},
child: Container(
color: Colors.blueAccent,
alignment: Alignment.center,
child: Image.asset(
"assets/images/icon_sm_sigin_status_three.png",
fit: BoxFit.scaleDown, height: 20,),
))
ScratchCardWidget имеет много параметров, смотрите их по порядку:
- strokeWidth : ширина касания руки;
- threshold : активирует порог для очистки наложения переднего плана, логика кода заключается в вычислении доли полностью прозрачных пикселей;
- передний план : это тип функции, предназначенный для рисования наложения переднего плана, который представляет собой покрытие скретч-карты;
- дочерний : это содержимое скретч-карты, поддерживает любой виджет в качестве дочернего;
- (холст, размер, смещение){}: тип функции, соответствующий переднему плану, который поддерживает рисование покрытия переднего плана холстом;
Дополнительные эффекты будут постоянно обновляться, обратите вниманиеflutter_effects;
следующие шаги
- Оптимизация существующих функций: Текущая функция была изгнана в свободное время в свободное время в течение недели, и неизбежно, что есть неуместные вещи. Это не вопрос многих вещей, а утонченность. Оптимизация производительности и вызовы API могут быть более важными;
- Отправить в dart pub: отправка в паб, безусловно, проста в использовании.Перед этим необходимо сделать новое разделение модуля, которое может быть разделено на несколько пакетов для отправки;
- Введение событий: в настоящее время это не умный способ запускать анимацию в форме перестроения;
- Внедрить больше функций: есть хорошие результаты, хотелось бы попробовать;
Спасибо:
Эффект взрыва частиц:Github.com/tyrant git / e ...
Крутой текстовый вид:GitHub.com/hanks-specialization/h…
Спасибо авторам нативной библиотеки реализации hanks и tyrantgit, спасибо!
Добавить Автора Связь:woo woo Краткое описание.com/afraid/multi-test 5 от 4 до 1…
Подробнее
В 2019 году ведущие производители Android столкнулись с проблемами, связанными с утечками
Анализ принципа сжатия изображений PNG -- слезы Диаози
Android-приложение для похудения по новой осанке - Android App Bundle
Али: Почему мне запрещено определять SimpleDateFormat как статический тип?
Наконец, если вас больше интересуют технологии, обратите внимание на мой публичный аккаунт в WeChat: Terminal R&D Department, id: codeGooger, давайте продвигать технологии вместе.