7 + 1 способ анимировать спиннер / Хабр

Меня зовут Евгений Подивилов, я фронтенд-разработчик в команде «Лайфстайл». Я разрабатываю раздел «Развлечения». В этом разделе можно купить билеты на мероприятия или забронировать столик в ресторане.

Многие недолюбливают бесконечные индикаторы загрузки, потому что по ним не видно реального прогресса выполнения задачи. Мне кажется, вывести какой-то спиннер пользователю и уведомить, что работа идет и результат ожидается, намного лучше, чем ничего. 

Иногда спиннер вместо того, чтобы успокоить пользователя, тормозит и забирает больше ресурсов, чем сама задача. Про один такой индикатор я и расскажу.

С чего мы начинали

Однажды при открытии нескольких SPA-приложений разом топовый Макбук завыл. Мы провели расследование и выяснили, что причиной стал обычный спиннер:

Оказалось, что на него тратилось почти 10% ресурсов CPU! Мне стало интересно разобраться и все оптимизировать, и я погрузился в код.

Все замеры производились на конфигурации: Google Chrome версии 95. 0.4638.54; macOS Big Sur 11.6; MacBook Pro 15 Mid 2015, Intel Core i7 2.2Ghz, 16Gb DDR3.

Решение первое: React

Я начал с решения на React. Каждый цикл анимации вычислял значения, устанавливал их в стейт компонента, а затем использовал в render-функции. Каждые 16 мс запускались те механизмы React, за которые разработчики его так «любят». Не самое хорошее решение.

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

Цикл анимации на React

Кроме проблем с лишней работой бывают проблемы с потреблением памяти. График показывает сначала рост, а затем обрыв — освобождение неиспользуемой памяти. И такое происходит часто.

Потребление памяти на React

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

Массив colorTable хранит 10 константных значений. Его инициализация находится внутри функции анимации, поэтому мы создаем этот массив в каждом цикле, каждые 16 мс. Каждую секунду мы создаем десятки новых массивов, и это не очень хорошо.

JS — язык с автоматическим управлением памятью. Это значит, что разработчикам не надо задумываться над выделением памяти при создании чего-либо. Память выделяется автоматически, когда появляется массив, и освобождается автоматически, когда мы больше не используем его.

За процесс определения неиспользуемой памяти и ее освобождение отвечает Garbage Collector. Процесс определения неиспользуемой памяти трудозатратный для компьютера, и, чтобы минимизировать влияние на работу страницы, браузеры периодически запускают GC. Когда очень быстро создаются массивы, достигается некий предел, после которого браузер запускает GC и высвобождает всю неиспользуемую память. Потом все повторяется.

Подробнее про GC на примере Chrome можно прочитать на v8.dev.

Решение второе: SVG + JS

Сначала избавимся от React, чтобы избежать лишней работы и упростить график производительности.

Теперь на вкладке Performance цикл анимации выглядит проще, но не значительно лучше: self time задачи уменьшилось с 1,55 до 0,17 мс, но общее время снизилось только до 4,69 мс против 5,69 мс в версии с React.

Цикл анимации на SVG + JS

Проблемы с памятью уменьшились, но не исчезли. Если воспользоваться вкладкой Memory и сравнить heap snapshot до и после принудительного вызова GC, можно локализовать проблему памяти в недрах функции lerpColor, а точнее — в конкатенации строк во время формирования цвета.

Потребление памяти SVG + JS

Как и в предыдущем примере, значительную часть цикла анимации занимают задачи пересчета стилей и ре-лайаута. Наша анимация работает в рамках пайплайна отрисовки в браузерах.

С помощью JS меняем стили элемента path, что вызывает этап style. За ним вызывается layout, дальше paint и composite. Можно оптимизировать этот пайплайн и пропустить некоторые шаги, если использовать свойства, подходящие для анимаций. Например, пропустить этапы layout и paint, если анимация основана только на свойстве transform.

Сделать такую анимацию только на transform, кажется, не получится? «Чтобы сделать анимацию быстрой, нужно все писать на Canvas!» — подумал я.

Решение третье: Canvas

Перепишем все на Canvas. У него нет элементов и стилей. Меняя что-то, мы отрисовываем это на холсте без лишних этапов. Немного низкоуровнево, но мы же хотим лучшей производительности!

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

Цикл анимации на Canvas

Недостаток решения, как и предыдущих, — оно выполняется в главном потоке. JS — однопоточный язык, и когда в главном потоке выполняется задача, до ее окончания мы перейдем к другим задачам. Если пришла тяжелая и блокирующая задача, то обновление состояния индикатора просто не выполнится и пользователь может заметить подтормаживание анимации, а то и полную остановку.

Есть возможность распараллелить выполнение задач через web workers. Но в них нет доступа к DOM, а значит, мы не сможем менять состояния элементов. И я решил избавиться от JS. 

Решение четвертое: SVG + CSS

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

Результаты улучшились, но проблема с фризами анимации осталась. Не все свойства CSS анимируются в отдельном потоке. В CSS можно анимировать с высокой производительностью только два свойства — transform и opacity. Зато с памятью теперь проблем нет.

Цикл анимации на SVG + CSSПотребление памяти на SVG + CSS

Решение пятое: SVG

Я отказался от JS, получится ли отказаться и от CSS?

SMIL — это Synchronized Multimedia Integration Language, такой HTML для анимаций. Можно запрограммировать анимации в виде разметки с помощью набора тегов и атрибутов. Можно изменить код так, что вся анимация будет только в SVG-файле.

Без JS. Без CSS. Работает практически везде, кроме IE. Такую анимацию можно подключить с помощью тега <img> или свойства background-image. Но блокировка основного треда по-прежнему блокирует нашу анимацию.

Решение шестое: Video

Видео кажется отличной идеей и имеет ряд преимуществ:

• расчеты всех этапов анимации выполняются заранее и «зашиваются» в видео,

• поддерживается всеми браузерами,

• существуют аппаратные оптимизации для некоторых видео кодеков.

Все, что нам нужно — записать небольшой ролик и циклически воспроизводить его.

<video autoplay loop muted playsinline>
  <source src="spinner.mov" type='video/mp4; codecs="hvc1"' />
  <source src="spinner.webm" type="video/webm" />
</video>

Но есть и несколько минусов:

• нужен прозрачный фон. Даже если не надо поддерживать IE 11, все равно нужно минимум два варианта видео: с кодеком VP9 — для Chrome и HEVC — для Safari;

• менять размеры видео без потери в качестве не получится. Значит, нужно несколько видеофайлов под каждый размер спиннера;

• перезапуск видео выполняется в основном потоке, хотя само видео выполняется в отдельном. Спиннер будет крутиться, пока не проиграет один цикл анимации.

Решение седьмое: CSS

Но если подумать, что такое видео? Набор кадров, которые очень быстро переключаются. Что, если использовать именно это качество в CSS?

Звучит как бред, но раз я решил пробовать все варианты, то почему бы и нет. С помощью черной магии ffmpeg разложил видео покадрово, а с image magic собрал атлас из полученных кадров. Главное, чтобы фон был прозрачным. С помощью простых и быстрых CSS-трансформаций я менял кадры:

Сработало! Даже при условии, что основной поток занят JS. Да, по-прежнему есть проблемы с ресайзом, но их можно решить с помощью нескольких атласов. Мы даже можем подгружать атлас на сайт с использованием lazy-атрибута. <sarcasm>Кажется, я нашел идеальное решение.</sarcasm> 

Выводы

Кроме разных способов анимации я хотел показать, что в большинстве случаев нам достаточно простых, но быстрых решений. Даже создатели популярной библиотеки компонентов material-ui пошли по пути сокращения потребления ресурсов и в пользу UX.

Надеюсь, смогу помочь кому-то убедить коллег, дизайнеров или бизнес потратить ресурсы на что-то более важное, чем вычурные индикаторы загрузки.

Решения рабочие, но использовать их в продакшене крайне сомнительно. Для обычного спиннера слишком много затрат. В итоге нам удалось убедить дизайнеров и бизнес, что будет лучше заменить наш вычурный индикатор на что-то попроще. Например, такое:

Результаты профилирования решений

• Решение первое: React

• Решение второе: SVG + JS

• Решение третье: Canvas

• Решение четвертое: SVG + CSS

• Решение пятое: SVG

5 популярных симуляторов спиннера для вашего смартфона и планшета

9 июня 2017 iOS Android

Спиннеры завоевали большую популярность по всему миру. Но если у вас нет настоящего спиннера — ничего страшного, ведь разработчики игр уже создали множество симуляторов вертушек для смартфонов и планшетов.

1. Fidget Spinner

Fidget Spinner от компании Ketchapp на протяжении последних недель находится в топе бесплатных приложений App Store. За короткий срок игру загрузили более 7 миллионов раз. Можно с уверенностью сказать, что сейчас это самый популярный симулятор спиннера для iOS. Также доступна версия для Android.

Fidget Spinner вводит в игру соревновательный элемент: у вас есть возможность покрутить спиннер лишь пять раз, за которые вертушка должна совершить максимальное число оборотов. Чем больше оборотов будет, тем больше жетонов вы получите. За жетоны покупаются улучшения и бустеры. Разумеется, внешний вид спиннеров можно изменять и настраивать.

Некоторые пользователи критикуют Fidget Spinner за привнесение соревновательного элемента, но другие находят эту игру очень увлекательной и затягивающей.

appbox fallback https://play.google.com/store/apps/details?id=com.ketchapp.fingerspinner&hl=ru&gl=ru

appbox fallback https://apps.apple.com/ru/app/1236104279

2. Fidget Hand Spinner

В Fidget Hand Spinner зарабатываемые очки играют гораздо меньше значения: вы можете их полностью игнорировать и просто крутить спиннер в своё удовольствие. Кроме того, здесь виртуальная игрушка ведёт себя более естественно и подчиняется законам физики.

В конце раунда вы увидите результаты, которыми сможете поделиться со знакомыми. Вы также можете бросить вызов своим друзьям. Игра доступна для iOS и Android.

appbox fallback https://apps. apple.com/ru/app/1225134960

3. Fidget Spinner от Words Mobile

Fidget Spinner от компании Words Mobile предлагает пользователям компромисс. Здесь вы можете выбрать между свободным режимом и ограниченными по времени соревновательными раундами.

Для любителей игр в стиле Flappy Bird также доступен режим подбрасывания, в котором вы не должны допустить, чтобы летающий по экрану спиннер упал. Прикасайтесь к игрушке и поддерживайте её в воздухе.

Постепенно вы будете прокачивать свой уровень и открывать новые скины для спиннеров.

Загрузить

Цена: Бесплатно

4. Fidget Spinner Simulator

Fidget Spinner Simulator для Android предлагает игрокам спиннеры с реалистичными текстурами и режимом бесконечного вращения.

А в остальном — всё то же самое: крутите спиннер, зарабатываете очки и открываете улучшения.

5. Fidget Hand Spinner Toy

Разработчики Fidget Hand Spinner Toy для iOS сосредоточились на главном — на процессе вращения спиннера и его успокаивающем воздействии. В этой игре нет ни баллов, ни бустеров, ни таблиц рейтингов. Вы просто вращаете спиннер.

appbox fallback https://apps.apple.com/ru/app/1241899116

Разумеется, есть ещё множество других симуляторов спиннеров. Если ваша любимая игра не вошла в этот список, обязательно расскажите о ней в комментариях.

В то время как повальное увлечение спиннерами становится глобальным, его изобретатель изо всех сил пытается свести концы с концами | Игрушки

Изобретатель оригинального спиннера — вездесущей новой игрушки, которая быстро стала модной на игровых площадках по всему миру — Кэтрин Хеттингер должна наслаждаться светской жизнью.

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

Хеттингер владела патентом на прядильщики для пальцев в течение восьми лет, но отказалась от него в 2005 году, потому что не могла позволить себе плату за продление в размере 400 долларов (310 фунтов стерлингов).

«У меня просто не было денег. Это очень просто», — сказала она.

Спиннеры размером с ладонь состоят из шарикоподшипника, который находится в пластиковом устройстве с тремя зубцами, которое затем можно щелкать и вращать. Некоторые школы в Великобритании и США запретили устройства, но некоторые учителя считают, что они могут помочь детям сконцентрироваться, особенно детям с СДВГ.

Кэтрин Хеттингер, создательница спиннера, со своей внучкой Хлоей. Фото: Ричард Ласкомб

Теперь, когда производители и розничные продавцы, которые продают современные версии игрушек, получают огромную прибыль, 62-летняя Хеттингер сокращает свой крошечный дом до более дешевой квартиры, задаваясь вопросом, получить ли ее отключенный телефон линия восстановлена, и выяснить, как позволить себе «автомобиль, который действительно работает».

«Быть ​​изобретателем непросто», — сказала она The Guardian во время интервью в кофейне недалеко от своего дома в Винтер-Парке, историческом пригороде к востоку от Орландо.

«Только около 3% изобретений приносят прибыль. Я видел, как другие изобретатели закладывали свои дома и много теряли. Вы берете соседей по комнате, вы получаете помощь от друзей и семьи. Это трудно.»

Хеттингер признает, что если бы она могла позволить себе сохранить патент, она, вероятно, сейчас сидела бы на значительном состоянии. «У меня не было бы никаких проблем. Это было бы хорошо», — сказала она.

Но хотя она присоединяется к известному списку других, включая Тима Бернерса-Ли, основателя всемирной паутины, и изобретателя ховерборда Шейна Чена, которые случайно или намеренно не смогли лично заработать на своих творениях, изменивших мир, Хеттингер настаивает. что она не огорчена упущенной возможностью, а вместо этого «воодушевлена» внезапной популярностью прядильщиков.

«Несколько человек спрашивали меня: «Вы действительно сошли с ума?» Но мне просто приятно, что то, что я разработала, это то, что люди понимают и действительно работают для них», — сказала она.

«В современной жизни очень много обстоятельств, когда ты заперт, тебе тесно, и нам нужно такое, чтобы снять стресс. Это также весело. Это то, что касается культуры, когда все начинают этим заниматься, все в порядке».

Ее взгляды не разделяют все большее число школ, которые запрещают детям приносить или использовать спиннеры, потому что они отвлекают внимание. Но Хеттингер сказала, что ей приятно, что в других обстоятельствах школы сочли эти устройства полезными. «Я знаю учителя с особыми потребностями, который использовал его с аутичными детьми, и это действительно помогло им успокоиться», — сказала она.

Хеттингер говорит, что происхождение спиннера связано с «одним ужасным летом» в начале 1990-х годов, когда она страдала от миастении, аутоиммунного заболевания, вызывающего мышечную слабость, а также ухаживала за своей дочерью Сарой, которой сейчас 30 лет.

«Я вообще не могла собирать ее игрушки или играть с ней, поэтому я начала собирать вещи вместе с газетами и скотчем, а затем с другими вещами», — сказала она. «Это было даже не прототипирование, это было какое-то подобие чего-то, она начинала играть с этим по-другому, я переделывал это».

После нескольких переделок появилась базовая немеханическая версия спиннера. «Мы как бы совместно изобрели его — она могла его крутить, и я мог его крутить, и вот как это было задумано», — добавила она.

Хеттингер, которая провела свое детство в Талсе, штат Оклахома, провела следующие несколько лет, выставляя и продавая обновленные версии своего дизайна на ярмарках декоративно-прикладного искусства по всей Флориде. «Проект был отличный, я практически безубыточна, продала единицы и протестировала его на паре тысяч человек», — сказала она.

Она также прилетела со своей дочерью в Вашингтон, округ Колумбия, на встречу с американским ведомством по патентам и товарным знакам и получила патент на свой дизайн в 1997 году. Хеттингера постигло разочарование.

Гигант по производству игрушек Hasbro, который тестировал дизайн, решил не приступать к производству, фактически оставив проект зачахнуть и в конечном итоге умереть с истечением срока действия патента в 2005 году.

«Я технарь, я не человек, который заключает многомиллионные сделки», — сказал Хеттингер. «Если бы тогда были деньги или у меня был венчурный капиталист, все было бы по-другому».

Не испугавшись, Хеттингер в настоящее время работает инженером по контракту, чтобы получать доход, одновременно помогая консультировать других на собраниях совета изобретателей центральной Флориды, а также планирует производить и продавать свой оригинальный дизайн спиннера, если апелляция на Kickstarter сможет собрать достаточно средств.

Все могло бы сложиться не совсем так, если бы она сохранила патент на спиннер и обеспечила себе финансовое будущее, но Хеттингер настаивает, что сожалеет только об одном: «Возможно, я бы больше занималась изобретениями», — сказала она.

История Fidget Spinners

Воспитание детей

Хотя вы, возможно, слышали о спиннерах только в этом году, в 2017 году, они существуют с 1990-х годов. В последнее время спиннеры попали в руки многих детей по всему миру, вы даже можете поискать трюки на YouTube, чтобы найти новые способы наслаждаться этими маленькими игрушками. Дело в том, что фиджет-спиннеры изначально создавались не только для развлечения и развлечения, но и для других целей.0055 сегодня я делюсь историей прядильщиков, чтобы познакомить вас с основами истории этих ныне популярных продуктов.

 

История спиннеров

Еще в 1990-х годах спиннеры были созданы с использованием небольших подшипников и различных материалов, таких как медь, латунь, нержавеющая сталь и даже пластик. Эти маленькие подшипники помогали спиннеру довольно быстро вращаться в разных направлениях и считались полезными для здоровья детей, которые страдают от беспокойства или симптомов СДВГ. Кэтрин Хеттингер, инженер-химик по образованию, — первая, кто придумал эту игрушку-крутилку в 1993.

Идея этой вращающейся игрушки пришла в голову Екатерине, чтобы помочь детям справиться со своими эмоциями, и, в свою очередь, была создана «вертящаяся игрушка». Хотя это, возможно, было направляющим видением Кэтрин, некоторые говорят, что настоящее видение возникло из-за ее собственных проблем со здоровьем, из-за которых она не могла играть с дочерью традиционными способами.

Первоначально проданные на художественных ярмарках во Флориде и изготовленные в ее доме, Кэтрин действительно была первым человеком, который создал спиннеры.

Хотя есть некоторые аргументы в пользу того, что История прядильщиков Fidget Spinner не имеет прямого отношения к вращающейся игрушке, которую Кэтрин Хеттингер запатентовала в 19 году.93 к сегодняшнему спиннеру, некоторые могут утверждать, что она действительно была оригинальным умом, стоящим за этой популярной в настоящее время игрушкой. Поскольку патент на игрушки такого типа вызывает много споров, а формулировка патента неясна, нет никаких сомнений в том, что игрушка типа прядильщика существует намного дольше, чем предполагал средний потребитель.

Говорят, что эта игрушка помогает детям и взрослым, которые страдают от беспокойства, аутизма или СДВГ . Хотя некоторые утверждают, что польза спиннеров для здоровья не доказана, во всем мире есть родители, которые твердо убеждены в том, что эти спиннеры действительно изменили жизнь их непоседливых детей.