Я во фронтенде настолько давно, что учился верстать по текстовым туториалам. В начале десятых годов я и все мои знакомые фронтендеры обязательно были подписаны на рассылки, в которых авторы делились креативными штуками.
Рубрика «анимации»
Геометрические фигуры в CSS-анимации
2026-04-28 в 9:01, admin, рубрики: css, ruvds_статьи, анимации, геометрические фигурыАнимация частиц песка для прелоадера и первая попытка в шейдеры и WebGL
2025-02-01 в 6:16, admin, рубрики: анимации, первый опыт, физика движения, физика частиц, шейдерыПривет, меня зовут Ваня! Я фронтенд-разработчик в Лиге А. и часто работаю с анимациями на клиентских проектах. В основном, использую Gsap, простые CSS-анимации или Lottie. А вот проекты, которые нужно реализовывать на WebGL встречаются редко и почти всегда задача по ним звучит необычно.
Сжатие графики при помощи алгоритма LZ4
2024-12-18 в 8:00, admin, рубрики: lz4, whoosh, анимации, графика, дисплей, изображения, микроконтроллер, микроконтроллеры, сжатие данных, сжатие изображенийСодержание
-
Введение
-
Постановка задачи
-
Дисплей
-
Процесс отрисовки изображений
-
Память
-
-
Выбор алгоритма сжатия
-
Как работает LZ4?
-
LZ4 Block format
-
LZ4 Frame format
-
-
Так сжимались данные
-
Какой формат выбрать?
-
Разработка протокола хранения данных
-
-
Результаты
Введение
Привет! Меня зовут Александр Крестинин, я разработчик встроенного ПО в компании Whoosh. Мы в embedded-команде не только переливаем биты из одного регистра в другой, но и решаем разные бизнес-задачи. Иногда попадаются головоломки.
Введение в SVG-анимации для верстальщиков
2022-05-22 в 15:35, admin, рубрики: css, javascript, JS, svg, анимации, Разработка веб-сайтов
Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой статье мы рассмотрим SVG-анимации с разных сторон, посмотрим на актуальное состояние дел, возможности и сопутствующие инструменты. Мы не будем разбирать каждое свойство и каждый хак. Слишком большой объем материала получится. Для этого есть MDN и ему подобные сайты. Задача текущей статьи — дать общее представление о том, что бывает, и от чего можно оттолкнуться, если вы решили изучать эту тему, а у вас полная каша в голове.
Spring-анимации во Vue
2020-05-03 в 12:07, admin, рубрики: javascript, spring-анимация, vue, vuejs, анимации, Компьютерная анимация, Разработка веб-сайтов, физикаПривет!
Мне давно хотелось добавлять в любые проекты Spring-анимации. Но делал я это только для React-проектов с помощью react-spring, так как не знал ничего другого.
Но наконец я решил разобраться, как оно все устроено и написать свою реализацию!
Если вы тоже хотите использовать Spring-анимации везде, заходите под кат. Там вы найдете немного теории, реализацию Spring на чистом JS и внедрение Spring-анимации во Vue с помощью компонентов и composition-api.
Руководство по сжатию скелетных анимаций
2020-03-23 в 7:05, admin, рубрики: bones, анимации, игровые анимации, Компьютерная анимация, кости, Работа с 3D-графикой, разработка игр, скелетная анимация, трехмерная анимация
Эта статья будет кратким обзором методики реализации простой схемы сжатия анимаций и некоторых связанных с ней концепций. Я ни в коем случае не являюсь специалистом в этом вопросе, но по этой теме есть очень мало информации, и она довольно фрагментарна. Если вы хотите прочитать более глубокие статьи по этой тематике, то рекомендую пройти по следующим ссылкам:
- https://nfrechette.github.io/2016/10/21/anim_compression_toc/
- https://technology.riotgames.com/news/compressing-skeletal-animation-data
- http://bitsquid.blogspot.com/2009/11/bitsquid-low-level-animation-system.html
- http://bitsquid.blogspot.com/2011/10/low-level-animation-part-2.html
Прежде чем мы начнём, стоит представить краткое введение в скелетную анимацию и некоторые её базовые понятия.
Основы анимации и сжатия
Скелетная анимация — довольно простая тема, если забыть о скиннинге. У нас есть концепция скелета, содержащего преобразования костей персонажа. Эти преобразования костей хранятся в иерархическом формате; по сути, они хранятся как дельта между своей глобальной позицией и позицией родителя. Терминология здесь сбивает с толку, потому что в игровом движке локальным часто называют пространство модели/персонажа, а глобальным — мировое пространство. В терминологии анимации локальным называется пространство родителя кости, а глобальным — или пространство персонажа, или мировое пространство, в зависимости от того, есть ли движение корневой кости; но давайте не будем об этом особо беспокоиться. Важно то, что преобразования костей хранятся локально относительно их родителей. Это имеет множество преимуществ, и особенно при смешении (блендинге): если бы при смешении двух поз кости были глобальными, то они бы линейно интерполировались в позиции, что приводило бы к увеличению и уменьшению костей и деформации персонажа.Читать полностью »
Julia и клеточные автоматы
2020-03-04 в 5:37, admin, рубрики: Julia, Алгоритмы, анимации, визуализация данных, картиночки, клеточные автоматы, машина Тьюринга, муравей лэнгтона, отличное занятие на выходные, Программирование, тьюринг-полнота
Сегодня мы отправимся в красочное путешествие по миру клеточных автоматов, попутно изучая некоторые хитрые приемы их реализации, а также попытаемся понять, что скрывается за этой красотой — любопытная игра для праздного ума или глубокая философская концепция, находящая отклики во многих моделях.
Понимаем UICollectionViewLayout на примере Photos App
2019-12-03 в 12:45, admin, рубрики: ABBYY, layout, parallax, SDK, swift, UI, uicollectionview, uicollectionviewlayout, анимации, Блог компании ABBYY, дизайн мобильных приложений, разработка мобильных приложений, разработка под iOS, скроллЗдравствуй! Меня зовут Никита, я работаю над мобильными SDK в компании ABBYY и в том числе занимаюсь UI-компонентом для сканирования и удобного просмотра многостраничных документов на смартфоне. Этот компонент сокращает время на разработку приложений на базе технологии ABBYY Mobile Capture и состоит из нескольких частей. Во-первых, камера для сканирования документов; во-вторых, экран редактора с результатами захвата (то есть автоматически сделанными фотографиями) и экран исправления границ документа.
Разработчику достаточно вызвать пару методов – и вот в его приложении уже доступна камера, которая автоматически сканирует документы. Но, помимо настроенных камер, нужно предоставить клиентам удобный доступ к результатам сканирования, т.е. автоматически сделанным фотографиям. А если клиент сканирует договор или устав, то таких фотографий может быть очень много.
В этом посте я расскажу о трудностях, которые возникли в процессе реализации экрана редактора с результатами захвата документов. Сам экран представляет из себя две UICollectionView, я их буду называть большой и маленькой. Возможности ручной корректировки границ документа и другой работы с документом я опущу, а фокус сделаю на анимациях и особенностях layout-а во время скролла. Ниже на GIF можно посмотреть, что получилось в итоге. Ссылка на репозиторий будет в конце статьи.
В качестве референсов я часто обращаю внимание на системные приложения Apple. Когда внимательно смотришь на анимации и другие интерфейсные решения их приложений, то начинаешь восхищаться их внимательным отношением к разного рода мелочам. Сейчас мы в качестве референса будем смотреть на приложение Photos (iOS 12). Я обращу ваше внимание на конкретные фичи этого приложения, а дальше мы попробуем их реализовать.
Читать полностью »
5 отличных способов анимировать React-приложения в 2019 году
2019-06-20 в 15:04, admin, рубрики: React, анимации, Блог компании Skillbox, дизайн, методы, Программирование, Разработка веб-сайтов, Учебный процесс в IT
Анимация в приложениях React — популярная и обсуждаемая тема. Дело в том, что способов ее создания очень много. Некоторые разработчики используют CSS, добавляя теги в HTML-классы. Отличный способ, его стоит применять. Но, если вы хотите работать со сложными видами анимаций, стоит уделить время изучению GreenSock, это популярная и мощная платформа. Также для создания анимаций существует масса библиотек и компонентов. Давайте поговорим о них.
Читать полностью »
Производительность анимаций на сайтах
2019-05-08 в 17:14, admin, рубрики: css, javascript, анимации, инструменты разработчика, производительность, Разработка веб-сайтов
При разработке сайтов, выходящих за рамки условного бутстрапа, рано или поздно возникают вопросы, связанные с производительностью анимаций. Особенно важными они являются в дизайнерских сайтах, вроде тех, что попадают в каталоги Awwwards, FWA, CSS Design Awards и.т.д. При этом часто задача создания анимаций и последующей оптимизации, если она будет нужна, ложится на плечи не очень опытных разработчиков, которые даже не знают с чего начать. Обычно все это выливается в тормозящие сайты, которыми невозможно пользоваться, и последующее негативное отношение ко всему классу таких проектов. В этой статье мы постараемся разобрать, где находится граница приемлемой производительности анимаций, какие узкие места часто встречаются и куда смотреть в инструментах разработчика в первую очередь.