#анимации — Public Fediverse posts

Геометрические фигуры в CSS-анимации

Хабр, привет! Я во фронтенде настолько давно, что учился верстать по текстовым туториалам. В начале десятых годов я и все мои знакомые фронтендеры обязательно были подписаны на рассылки, в которых авторы делились креативными штуками. По моим ощущениям, сейчас их стало меньше. Все ушли в YouTube, а теперь в ChatGPT. Но мне этот формат не подходит, поэтому я пришёл сюда, к вам. В прошлом году я создал коллекцию лоадеров . В основе анимации — базовые геометрические фигуры. Я их двигаю, преобразую из одной формы в другую и всё такое. В этой статье я хочу рассказать весь процесс создания, начиная с самых базовых моментов. Сразу предупреждаю, что в этой статье не будет «живых» вставок. Все эффекты смотрите в моей демонстрации на CodePen. Давайте посмотрим, что я вам подготовил.

https://habr.com/ru/companies/ruvds/articles/1026148/

#css #анимации #геометрические_фигуры #ruvds_статьи

Оптимизация производительности во Flutter

Производительность Flutter-приложения напрямую зависит от качества написанного кода: лишние перестроения UI, тяжёлые операции в основном потоке, неправильная работа со списками и изображениями — всё это ведёт к фризам, падению FPS и ухудшению пользовательского опыта. В данной статье мы собрали наиболее распространённые ошибки, которые снижают производительность Flutter-приложений, и показали, как их избежать на практике.

https://habr.com/ru/articles/1017468/

#Flutter #производительность #оптимизация #мобильная_разработка #Dart #rebuild #виджеты #ListView #анимации #UI

8 трендов в дизайне интерфейса без эффектов ради эффектов

Привет! Меня зовут Светлана Моторкина, я Head of Design в компании

https://habr.com/ru/companies/friflex/articles/989142/

#дизайн_интерфейса #ux #ui #глассморфизм #анимации #персонализация_контента

Слайдер с бесконечной плавной прокруткой на JavaScript

В этой статье разберем компонент, представляющий собой бесконечный плавный слайдер с автоматической прокруткой, а также добавим его замедление при наведении. Похожие блоки часто используются для информационной ленты логотипов, фотогалерии и других подобных визуальных компонентов. Приблизительный результат следующий:

https://habr.com/ru/articles/925762/

#Слайдер #Анимации #нативный_код

Верстка для ленивых: как перестать бояться CSS и начать верстать как супергерой

Развалившийся макет, сломанные кнопки и тестировщик, отправляющий бесконечные баг-репорты... Знакомая боль? Вёрстка может быть не кошмаром, а крепостью, если подойти к ней с умом. В этом гайде — проверенные принципы, которые помогут вам делать гибкую и устойчивую вёрстку, способную пережить любые изменения контента и дизайна.

https://habr.com/ru/articles/889960/

#CSS #верстка #frontend #адаптивность #семантика #оптимизация #анимации #доступность #производительность #ui_ux

Сжатие графики при помощи алгоритма LZ4

Привет, Хабр! Меня зовут Александр Крестинин, я разработчик встроенного ПО в компании Whoosh. Мы в embedded-команде не только переливаем биты из одного регистра в другой, но и решаем разные бизнес-задачи. Иногда попадаются головоломки. Однажды мы подумали, что было бы здорово выводить на экраны самокатов анимации и изображения — показывать инструкции, как пользоваться сервисом, как начать и закончить поездку, и чтобы запускать DOOM. Зачем? 1) Сделать комфортнее. Удобно видеть инструкции на большом и ярком экране перед глазами, а не нырять за ними в приложение на смартфоне. 2) Сделать безопаснее. Пользователь меньше отвлекается на телефон, крепче держится за самокат и внимательнее смотрит на всё, что вокруг. 3) Почти у всех привычных устройств уже есть экраны, которые выводят пользователям видео и картинки, а почему бы не сделать то же самое на самокате? Но тут возникает проблема. Микроконтроллер крайне ограничен в памяти и вычислительных ресурсах. Самая простая анимация занимает чрезмерно много места. А если внедрить в отрисовку алгоритмы сжатия, то вычислительная нагрузка увеличится и анимация будет сильно лагать. Расскажу, как мы нашли решение этой задачи. Прошу под кат.

https://habr.com/ru/companies/whoosh/articles/867274/

#микроконтроллеры #микроконтроллер #whoosh #lz4 #графика #изображения #анимации #сжатие_изображений #сжатие_данных #дисплей

Сжатие графики при помощи алгоритма LZ4

Привет, Хабр! Меня зовут Александр Крестинин, я разработчик встроенного ПО в компании Whoosh. Мы в embedded-команде не только переливаем биты из одного регистра в другой, но и решаем разные бизнес-задачи. Иногда попадаются головоломки. Однажды мы подумали, что было бы здорово выводить на экраны самокатов анимации и изображения — показывать инструкции, как пользоваться сервисом, как начать и закончить поездку, и чтобы запускать DOOM. Зачем? 1) Сделать комфортнее. Удобно видеть инструкции на большом и ярком экране перед глазами, а не нырять за ними в приложение на смартфоне. 2) Сделать безопаснее. Пользователь меньше отвлекается на телефон, крепче держится за самокат и внимательнее смотрит на всё, что вокруг. 3) Почти у всех привычных устройств уже есть экраны, которые выводят пользователям видео и картинки, а почему бы не сделать то же самое на самокате? Но тут возникает проблема. Микроконтроллер крайне ограничен в памяти и вычислительных ресурсах. Самая простая анимация занимает чрезмерно много места. А если внедрить в отрисовку алгоритмы сжатия, то вычислительная нагрузка увеличится и анимация будет сильно лагать. Расскажу, как мы нашли решение этой задачи. Прошу под кат.

https://habr.com/ru/companies/whoosh/articles/867274/

#микроконтроллеры #микроконтроллер #whoosh #lz4 #графика #изображения #анимации #сжатие_изображений #сжатие_данных #дисплей

Сжатие графики при помощи алгоритма LZ4

Привет, Хабр! Меня зовут Александр Крестинин, я разработчик встроенного ПО в компании Whoosh. Мы в embedded-команде не только переливаем биты из одного регистра в другой, но и решаем разные бизнес-задачи. Иногда попадаются головоломки. Однажды мы подумали, что было бы здорово выводить на экраны самокатов анимации и изображения — показывать инструкции, как пользоваться сервисом, как начать и закончить поездку, и чтобы запускать DOOM. Зачем? 1) Сделать комфортнее. Удобно видеть инструкции на большом и ярком экране перед глазами, а не нырять за ними в приложение на смартфоне. 2) Сделать безопаснее. Пользователь меньше отвлекается на телефон, крепче держится за самокат и внимательнее смотрит на всё, что вокруг. 3) Почти у всех привычных устройств уже есть экраны, которые выводят пользователям видео и картинки, а почему бы не сделать то же самое на самокате? Но тут возникает проблема. Микроконтроллер крайне ограничен в памяти и вычислительных ресурсах. Самая простая анимация занимает чрезмерно много места. А если внедрить в отрисовку алгоритмы сжатия, то вычислительная нагрузка увеличится и анимация будет сильно лагать. Расскажу, как мы нашли решение этой задачи. Прошу под кат.

https://habr.com/ru/companies/whoosh/articles/867274/

#микроконтроллеры #микроконтроллер #whoosh #lz4 #графика #изображения #анимации #сжатие_изображений #сжатие_данных #дисплей

Сжатие графики при помощи алгоритма LZ4

Привет, Хабр! Меня зовут Александр Крестинин, я разработчик встроенного ПО в компании Whoosh. Мы в embedded-команде не только переливаем биты из одного регистра в другой, но и решаем разные бизнес-задачи. Иногда попадаются головоломки. Однажды мы подумали, что было бы здорово выводить на экраны самокатов анимации и изображения — показывать инструкции, как пользоваться сервисом, как начать и закончить поездку, и чтобы запускать DOOM. Зачем? 1) Сделать комфортнее. Удобно видеть инструкции на большом и ярком экране перед глазами, а не нырять за ними в приложение на смартфоне. 2) Сделать безопаснее. Пользователь меньше отвлекается на телефон, крепче держится за самокат и внимательнее смотрит на всё, что вокруг. 3) Почти у всех привычных устройств уже есть экраны, которые выводят пользователям видео и картинки, а почему бы не сделать то же самое на самокате? Но тут возникает проблема. Микроконтроллер крайне ограничен в памяти и вычислительных ресурсах. Самая простая анимация занимает чрезмерно много места. А если внедрить в отрисовку алгоритмы сжатия, то вычислительная нагрузка увеличится и анимация будет сильно лагать. Расскажу, как мы нашли решение этой задачи. Прошу под кат.

https://habr.com/ru/companies/whoosh/articles/867274/

#микроконтроллеры #микроконтроллер #whoosh #lz4 #графика #изображения #анимации #сжатие_изображений #сжатие_данных #дисплей

[Перевод] Анимации CSS, основанные на времени

Демонстрация анимаций В моем предыдущем посте Time Uniform For CSS Animation я рассказал о способе создания CSS-анимации с использованием тиков вместо ключевых кадров. Он был ограничен в применении, поскольку в CSS отсутствовала возможность выполнять сложные математические вычисления. После долгих лет ожидания в CSS теперь поддерживается достаточное количество математических функций, в частности, mod() , round() и тригонометрические функции . Пришло время вернуться к анимации, основанной на времени, надеюсь, на этот раз она будет более полезной.

https://habr.com/ru/articles/815293/

#Анимации #css #html #вебразработка #вебдизайн #анимации_css

Диалоги, анимации, озвучка, нейросети

Я инди разработчик, у игры еще нет названия. Больше информации можно получить в предыдущих статьях. Воплощаю мечту, создавая игру Воплощаю мечту, создавая игру. Часть 2-я. В статье я расскажу свой небольшой опыт работы с диалогами и озвучкой с применением нейросети. Результат меня расстроил. Будут представлены примеры как это выглядит непосредственно в разрабатываемой игре.

https://habr.com/ru/articles/814851/

#разработка_игр #моя_история #советы #unrealengine #ue5 #диалоги #анимации #нейросети #нейросеть #ai