История одной кнопки

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

Состояния кнопки

Кстати, всегда подписывайте иконки — без этого ничего не понять. Вот два примера для наглядности:

Рокетбанк: иконки хоть и всем знакомые, но что там за ними — хз

Квестион: безбашенные иконки подписаны, и вопросов сразу нет

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

Вообще, главная задача анимации — объяснять. С анимацией легче понять, почему объект сейчас здесь, а потом вдруг там; или сначала такой, а потом другой. Ну и, конечно, с ней красивее. Но важно помнить, что красота — не главное, и всегда за основу должна быть польза.

Развлечение, кстати, тоже польза. Этим и займемся.

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

Анимацию можно рисовать двумя способами:

1. покадрово, в порядке движения объектов — когда расположение конечной точки не очень важно;
2. с использованием компоновок: сначала рисуются ключевые кадры, а потом дорисовываются промежуточные — когда важно, чтобы объекты были в определенных местах в определенное время. Наш вариант.

Ключевые точки — это первый кадр с лупой и последний кадр с пупой (в виде крестика). Они должны быть на определенных местах в определенное время — лупа в начале, крест в конце. Все остальное заполняем переходами.

Насгибав порядочное количество листов, понимаем, что срисовывать это можно вечно. Долго смотрим на сетку, по которой рисовалась кнопка:

О сетках в иконках посмотрите, например, у Алексея Черенкевича

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

Забиваем на согнутые листы, и расширяем окружность по ряду Фибоначчи: он живой, простой, и (как подтвердится потом) смотрится хорошо:

Теперь подрезаем края (на самом деле рисуем дуги заново на основе окружностей, потому что Скетч еще сырой и рендерит срезы криво):

Полная раскадровка

Сохраняем в СВГ, прикручиваем на сайт, любуемся.

UPD: с января 2016 развитием сайта занимается его команда