Заполнить виджет градиентом, изображением или гифкой с помощью ShaderMask / Хабр | Веб-студия Nat.od.ua
Заполнить виджет градиентом, изображением или гифкой с помощью ShaderMask / Хабр
Один из наиболее популярных способов сделать элемент UI выразительным и аутентичным состоит в том, чтобы заполнить его картинкой, градиентом или анимированной гифкой.
Ниже приведен пример реализации данных эффектов на Flutter. Представленный подход будет работать с любым виджетом на всех поддерживаемых платформах. В качестве примера мы будем заполнять графикой Text.
План
Реализация будет идти по сценарию, предложенному командой разработчиков Flutter в серии видео “Widget of the Week”.
Основные шаги для заполнения текста графикой:
Создать TextChild виджет для отображения текста.
Создать Shader с нашей кастомной графикой.
Применить Shader к TextChild с помощью ShaderMask.
Widget buildBeautifulText() {
// 1. Create text child
final textChild = TextChild();
// 2. Create shader
final shaderCallback = createShader();
// 3. Apply shader to text child
return ShaderMask(
blendMode: BlendMode.srcIn,
shaderCallback: shaderCallback,
child: textChild,
);
}Кейс 1. Шейдер градиента
Заполнить виджет градиентом достаточно легко, и при удачном применении данного эффекта можно получить весьма впечатляющие результаты. Для реализации нам потребуется описать желаемый градиент и попросить его создать шейдер. Полученный шейдер можно сразу применить к дочернему виджету, используя ShaderMask.
// Create gradient shader
ShaderCallback gradientShader() {
// Define linear gradient
const gradient = LinearGradient(
colors: ,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
tileMode: TileMode.mirror,
);
// Create shader
final shaderCallback = gradient.createShader;
return shaderCallback;
}
// Build text with gradient shader
Widget buildBeautifulText() {
// 1. Create text child
final textChild = TextChild();
// 2. Create shader callback
final shaderCallback = gradientShader();
// 3. Apply shader to text child
return ShaderMask(
blendMode: BlendMode.srcIn,
shaderCallback: shaderCallback,
child: textChild,
);
}
В примере мы использовали линейный градиент от красного к синему. Процесс можно также повторить с градиентами любого типа (Linear, Radial, Sweep).
Полный код для данного кейса можно посмотреть и запустить через DartPad.
Кейс 2. Шейдер изображения
В Flutter есть класс ImageShader, который позволяет создавать шейдеры для изображений. Для этого необходимо передать ему данные изображения.
Шаг 1. Создать ImageProvider
Мы будем использовать ImageProvider, чтобы получить данные изображения из любого доступного источника (сеть, assets, файл, память). ImageProvider поддерживает форматы JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP и WBMP.
// 1. Create ImageProvider
// JPEG
const jpegProvider = NetworkImage(
‘https://picsum.photos/1000’,
);
// Animated GIF
const gifProvider = NetworkImage(
‘https://media.giphy.com/media/5VKbvrjxpVJCM/giphy.gif’,
);
Шаг 2. Создать ImageShader для изображения
ImageProvider поставляет нам экземпляры класса Image из пакета dart:ui, которые мы можем передать в ImageShader, чтобы создать ShaderCallback. Данный колбэк создает шейдер с учетом границ поверхности, к которой он будет применен.
Мы заполним графикой весь прямоугольник. В этом процессе будем использовать преобразования матрицы Matrix4, чтобы изменить размер и отцентровать изображение.
Можно пойти альтернативным путем и вместо изменений матрицы изменить TileMode. Режимы mirror и repeat должны хорошо себя проявить при работе с повторяющимися узорами.
Код этого шага можно изменить, чтобы настроить сочетания Matrix4 и TileMode для реализации своего уникального дизайна.
// 2. Create image shader for given Rect size
ShaderCallback createImageShader(ui.Image image) {
shaderCalback(Rect bounds) {
// Calculate scale for X and Y sides
final scaleX = bounds.width / image.width;
final scaleY = bounds.height / image.height;
final scale = max(scaleX, scaleY);
// Calculate offset to center resized image
final scaledImageWidth = image.width * scale;
final sacledImageHeight = image.height * scale;
final offset = Offset(
(scaledImageWidth – bounds.width) / 2,
(sacledImageHeight – bounds.height) / 2,
);
final matrix = Matrix4.identity()
// Scale image
..scale(scale, scale)
// Center horizontally and vertically
..leftTranslate(
-offset.dx,
-offset.dy,
);
// Image shader
return ImageShader(
image,
TileMode.decal,
TileMode.decal,
matrix.storage,
);
}
Шаг 3. Подписаться на ImageStream
При использовании ImageProvider у нас есть возможность подписаться на ImageStream, который отслеживает текущий кадр изображения. Подписка на данный поток позволит нам реагировать на изменения изображения, которые происходят в результате анимаций или изменений исходного ресурса изображения.
Документация Flutter уже содержит код использования ImageStream в виджете. Нам остается лишь изменить его метод build и добавить поле child для дочернего виджета.
Добавляем поле child:
// See MyImage class from Flutter docs
// https://api.flutter.dev/flutter/painting/ImageProvider-class.html
class ImageShaderBuilder extends StatefulWidget {
const ImageShaderBuilder({
super.key,
required this.imageProvider,
// Add child widget
required this.child,
});
// Add child widget
final Widget child;
final ImageProvider imageProvider;
@override
State
}
Изменяем метод build:
// See MyImage class from Flutter docs
// https://api.flutter.dev/flutter/painting/ImageProvider-class.html
class _ImageShaderBuilderState extends State
// Keep the source code
// Change only build method
@override
Widget build(BuildContext context) {
final image = _imageInfo?.image;
// No image for shader -> show child
if (image == null) {
return widget.child;
}
final shaderCallback = createImageShader(image);
// Apply shader to the child
return ShaderMask(
blendMode: BlendMode.srcIn,
shaderCallback: shaderCallback,
child: widget.child,
);
}
}
Шаг 4. Использовать шейдер изображения
Теперь мы можем использовать ImageShaderBuilder для реализации ярких и запоминающихся пользовательских интерфейсов.
Widget buildBeautifulText() {
// 1. Create text child
const textChild = TextChild();
// 2. Create ImageProvider
const imageProvider = NetworkImage(
‘https://media.giphy.com/media/5VKbvrjxpVJCM/giphy.gif’,
);
// 3. Apply shader to text child
return const ImageShaderBuilder(
imageProvider: imageProvider,
child: textChild,
);
}
Полный код для данного кейса можно посмотреть и запустить через DartPad.
Заключение
Благодарю за чтение!
Не стесняйтесь писать внизу свои мысли, предложения и пожелания по поводу данной статьи. Я буду рад учесть их в своих следующих публикациях, а также отвечу на любые вопросы в комментариях.
Ставьте лайки, если статья оказалась полезна.
Об авторе
Имя: Иван Мосягин (LinkedIn)
Компания: Shark Company (LinkedIn)
Должность: Flutter Developer
Эффективная работа со строками в JavaScript / Хабр | Веб-студия Nat.od.ua
Эффективная работа со строками в JavaScript / Хабр
Все что отображает браузер кроме картинок и видео это строки, поэтому грамотная работа с ними может значительно увеличить скорость работы веб-приложений как на стороне клиента так и на стороне сервера.
Что нужно знать о строках с позиции эффективности их использования? Во первых, строки относятся к примитивным типам данных. Во вторых, значения примитивных (простых) типов данных, в отличии от составных, таких как массивы и структуры не изменяемы. Это значит, что если вы присвоили значение переменной строкового типа один раз, то в дальнейшем эту строку изменить невозможно. Однако такое утверждение может удивить. Что это значит на практике? Если, например, выполнить этот код:
let hello = “Hello”;
hello += ” world”;
console.log(hello);
то в консоли однозначно появится Hello world, то есть строковая переменная hello изменила свое значение. Как строковая переменная может быть неизменяемой и измениться одновременно?
Дело в том, что интерпретатор языка в случае со строками не добавляет одну строку к другой напрямую. Вместо этого, он создает третью строку в памяти, затем копирует обе строки “Hello” и ” world” в эту новую строку и перенаправляет переменную “hello” чтобы она указывала на эту новую строку. Соответственно, значение новой строки устанавливается один раз, а значения первых двух не изменяются и таким образом правило неизменяемости строк выполняется.
Вот как процесс объединения строк выглядит полностью:
Как вы думаете, что в этом процессе плохого? Это крайне не эффективный алгоритм. Он выполняет больше действий чем необходимо и использует в два раза больше памяти чтобы хранить одну и ту же строку. Конечно это не является проблемой если нужно просто объединить две строки. Проблемы могут появиться при необходимости строить большие строки. Например, если нужно динамически создать HTML-текст страницы из массива данных, поступающих из внешнего источника используя цикл по этому массиву. В этом случае, вся создаваемая строка будет полностью копироваться в новую на каждой итерации цикла. Рассмотрим простой пример такого цикла:
let str = “Hello”;
console.log(“START”,new Date().toUTCString());
for (let index=0;index<100000000;index++) { str += "!"; } console.log("END",new Date().toUTCString()); console.log(str.length);
Этот код создает строку “Hello” и затем добавляет к ней строку “!” сто миллионов раз. В реальных приложениях вместо “!” могут быть реальные данные из внешнего массива. Также, этот код выводит текущее время до начала цикла и после него. Таким образом можно узнать сколько времени требуется на выполнение этого кода. В завершении он выводит длину итоговой строки. Когда я запустил это в Google Chrome, то получил следующий вывод в консоли:
Данная операции выполнилась за 1 минуту 26 секунд и выдала корректную длину строки. Однако, когда я запустил это на другом компьютере, этот код убил текущую вкладку в браузере и вывел вот такое:
После рассмотрения того как работает объединение строк несложно понять почему браузер мог рухнуть. Этот алгоритм совершенно не эффективен. Этот цикл создает новые строки размером от одного символа до ста миллионов символов на каждой итерации цикла сто миллионов раз. В этой ситуации даже сложно сразу представить, сколько для этого может потребоваться памяти. В одном случае операция может завершиться успешно, в другом случае нет. Это зависит от количества доступной памяти и от того как работает сборщик мусора в конкретной реализации движка JavaScript, на котором этот код запускается, то есть насколько быстро он успевает очищать временно созданные строки по ходу цикла.
Увидев все это возникает желание исправить ситуацию и добавлять строку к строке напрямую. В других языках программирования, в таких как Java или Go существуют вспомогательные объекты StringBuilder или StringBuffer, которые именно это и делают. Они позволяют конструировать строки через изменяемые типы данных, такие как массивы. Однако в JavaScript этого нет, но идею несложно реализовать самостоятельно, что и будет сделано далее.
Вернемся к началу и запишем строку “hello” следующим образом:
let hello = ;
Переменная hello это не строка, а массив со строкой. Массивы изменяемы и если выполнить:
hello.push(” world”);
то произойдет именно то что написано и больше ничего: строка ” world” добавится в массив после строки “Hello” и массив будет содержать следующее:
Таким образом можно добавлять любое количество строк и Javascript будет выполнять лишь одну операцию для каждого добавления. Однако в конце, чтобы получить строку, придется объединить массив с помощью операции join:
hello = hello.join(“”);
console.log(hello);
Этот код объединил массив в строку и вывел “Hello world” в консоль. Конечно в момент операции “join” происходит то же самое что и при объединении строк: создается новая строка, в нее копируются все элементы массива и затем эта строка присваивается переменной “hello”. Однако это происходит всего один раз, а не каждый раз при добавлении новой строки.
Такой способ позволяет значительно ускорить конструирования строк в цикле. Перепишем пример с циклом через массив:
let str = ;
console.log(“START”,new Date().toUTCString());
for (let index=0;index<100000000;index++) { str.push("!"); } str = str.join(""); console.log("END",new Date().toUTCString()); console.log(str.length);
Получилось на одну строчку больше. Когда я запустил этот код на том же компьютере, где рухнул браузер, то получил следующий вывод:
Результат был достигнут за 8 секунд, что в 10 раз быстрее чем при обычном объединении строк.
Это является примером того, что иногда изменив три строки кода можно значительно увеличить производительность обработки данных. В реальной жизни, я столкнулся с ситуацией когда владелец web-сайта из-за медленной загрузки строки сначала кэшировал данные на CloudFlare, а потом на полном серьезе планировал переходить на AWS для увеличения пропускной способности и балансировки нагрузки. Однако нужно было просто провести code review для фронтенда.
Вы можете использовать этот метод для конструирования строк из массивов внешних данных, размер которых не известен. Просто добавляйте строки в массив, а в самом конце объединяйте этот массив в строку.
То что было сделано можно рассматривать как базовую реализацию StringBuilder для Javascript с одной лишь функцией – добавление подстроки. В качестве домашней работы можете оформить это в виде класса с разными функциями для работы с подстроками, такими как “добавить”, “изменить”, “удалить” и “преобразовать в строку”.
При добавлении элементов в массив важно помнить о существующих ограничениях на количество элементов массива, так как если их не учитывать, то можно столкнуться с ошибкой “RangeError: invalid array range”. Подробнее об ограничениях можно узнать здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_array_length . Поэтому если количество строк, которые нужно добавлять в цикле превышает эти ограничения, то придется периодически сбрасывать массив во временные строковые буферы и потом эти буферы объединять.
Приведенный в начале алгоритм объединения строк в Javascript не претендует на академическую точность по некоторым причинам. Разные реализации движков Javascript могут использовать различные оптимизации по работе со строками и механизмы работы с памятью могут отличаться. Однако не стоит расчитывать на то что ваш код всегда будет запускаться в таких движках. Например, в последней версии Google Chrome на момент написания этого текста объединение строк работало так, как показано на скриншотах выше. Поэтому целью данной статьи является показать как работать со строками эффективнее независимо от того, как это реализовано по умолчанию.
Существуют и более эффективные алгоритмы работы со строками, основанные не только на массивах. Наиболее быстрый из них построен на структуре данных Rope. Она используется для ускорения вставки и удаления подстрок в огромных строках. Подробнее о самой структуре можно прочитать в Википедии: https://en.wikipedia.org/wiki/Rope_(data_structure) . Также думаю не сложно будет найти описания на русском языке. Это несколько сложнее для понимания и использования чем метод описанный в этой статье, однако можно воспользоваться одной из готовых библиотек, которые реализуют Rope на JavaScript:
https://github.com/component/rope
https://github.com/josephg/jumprope
Спасибо, надеюсь это поможет вам в работе. Если есть вопросы или дополнения, пишите в комментариях.
Typescript в hh.ru / Хабр | Веб-студия Nat.od.ua
Typescript в hh.ru / Хабр
Привет! Меня зовут Владислав Коротун, я — ведущий фронтенд-разработчик в одной из продуктовых команд hh.ru. Сегодня я расскажу о том, как мы затащили TypeScript в наши проекты.
Мир Дикого Запада
Многие из нас пришли в профессию, когда фронтенд готовился на PHP, а затем оживлялся с помощью jQuery. Это был настоящий Дикий Запад: каждый писал, как хотел, не было линтеров, препроцессоров, шаблонизаторов, не было даже вебпака! И ничего — справлялись. На адептов типизированных языков мы смотрели как на тоталитарную секту: ну очевидно же, что ребята попусту тратят время, описывая разные типы и интерфейсы. Однако с тех пор прошло много времени, фронтенд изменился, а вслед за ним изменились и мы.
В те далёкие годы, когда jQuery правил балом, я очень любил Javascript за его простоту и невероятную гибкость, которая была возможна благодаря его прототипной природе.
Пришла в голову гениальная идея нового контрола или анимации — бегом за комп, создаешь новый HTML-файл, добавляешь jQuery с CDN, создаешь блок
Чёрная магия трансформов, или об оптимизации анимаций на CSS / Хабр | Веб-студия Nat.od.ua
Чёрная магия трансформов, или об оптимизации анимаций на CSS / Хабр
Иногда Frontend-разработчики сталкиваются с тем, что для оптимизации производительности нужно написать волшебное свойство translateZ(0) или will-change. Тогда анимации перестанут зависать, ничего не будет лагать и мир станет чуть ярче. ✨
Привет! Меня зовут Даша, я Creative Frontend-разработчик в Red Collar. В статье расскажу, как улучшить производительность страницы путём выноса элементов на композитные слои, какие CSS-свойства для этого использовать и как делать это разумно.
Порядок отрисовки анимации изнутри
Предположим, стоит задача «сделать параллакс». Первая мысль — менять свойство top при скролле. Тогда у нас получается примерно такой код:
const scroll = () => {
percent = window.scrollY / height;
squareArray.forEach((square, i) => {
square.style.top = (i * 20 * percent) + ‘px’;
})
}
Полный пример смотрите тут.
Выглядит неплохо. Но если элементов будет не 10, а 200, страница начнёт тормозить. Причём, иногда анимация работает как нужно в Chrome, но подтормаживает в Firefox. Почему так происходит?
На каждый кадр анимации браузер проходит следующие шаги:
Пересчитывает размеры и позиции элементов на CPU (пересчёт геометрии или layout).
Заполняет элементы цветами, меняет видимость. В общем, работа с тем, что влияет на визуал (отрисовка или paint).
Размещает элементы относительно друг друга (композиция или composite), выносит все в GPU и показывает на экране.
То есть, анимация хорошо отрабатывает в Chrome, потому что его движок потребляет достаточно памяти, чтобы все быстро пересчитать, в отличии от FireFox.
Оптимальные свойства для отрисовки: transform + will-change
Самый ресурсозатратный шаг — процесс отрисовки (paint). В нашем примере отрисовка запускается на каждом элементе при каждой смене кадра. Не верьте мне, посмотрите сами, включив настройку «paint flashing» в Chrome.
Как включить Paint flashing
Результат:
Процесс перерисовки фрагментов анимации в браузере
Получается, когда страница зависает, браузер просто не успевает достаточно быстро пройти шаги 1-3. Если при анимации будем двигать только сам элемент, то браузер пропускает первые 2 шага и сразу перейдет к композиции. Подберем свойства, которые:
никак не влияют на поток документа и не зависят от него;
не требуют отрисовки.
CSS-свойство, подходящее под эти требования, — transform. Оно выделит элемент на отдельный слой и будет затрагивать только композицию.
Переделаем наш код и уберем top:
const scroll = () => {
percent = window.scrollY / height;
squareArray.forEach((square, i) => {
square.style.transform = `translate3d(0, ${i * 20 * percent}px, 0)`
})
}
Также добавим will-change в css, чтобы еще до начала анимации браузер знал, что именно мы будем менять и не производил лишних вычислений:
.elem { will-change: transform; }
Полный пример смотрите тут.
Получаем решение, которое вообще не затрагивает отрисовку — к чему и стремились!
Где лучше не использовать will-change
Итак, мы улучшили производительность страницы путём выноса элементов на композитные слои. Теперь рассмотрим недостатки использования will-change.
Свойство нельзя использовать на всех элемента подряд, обсудим почему. Дело в том, что will-change выносит элемент на отдельный композитный слой, при создании которого выделяется память на GPU (graphics processing unit). Много слоев = большие затраты. Десктоп может и справится, но вот мобильная версия нет: в анимации будет заметно «моргание» или другие артефакты. А может и вообще произойти краш страницы (опаньки!).
Помимо случаев, когда мы вручную выносим что-то на композитный слой, есть и ситуации, в которых браузер делает это сам:
когда имеются дочерние элементы со свойствами transform, opacity (меньше 1), mask, filter, reflection;
когда дочерние элементы скрыты через overflow;
когда композитный слой перекрывается элементом с большим z-index;
при 3D-трансформациях (translate3d, translateZ, perspective и т.д.);
в анимации transform и opacity через Element.animate(), CSS Transitions, Animations;
в элементах