История одной кнопки
Недавно понадобилось сделать кнопку-переключатель на странице результатов поиска авиабилетов Депо. Кнопка простая: показывает и скрывает форму поиска, чтобы, например, поменять даты вылета или город маршрута без возвращения на главную.
Кстати, всегда подписывайте иконки — без этого ничего не понять. Вот два примера для наглядности:
Так вот, продолжаем. Кнопка нарисована, прикручена, форму поиска показывает и скрывает. Ну да, стандартная такая кнопка. Сделаем чуть повеселее — добавим анимацию.
Вообще, главная задача анимации — объяснять. С анимацией легче понять, почему объект сейчас здесь, а потом вдруг там; или сначала такой, а потом другой. Ну и, конечно, с ней красивее. Но важно помнить, что красота — не главное, и всегда за основу должна быть польза.
Развлечение, кстати, тоже польза. Этим и займемся.
У нас есть два состояния. Усложнять не будем, используем самый простой анимационный эффект — переход одного состояния в другое. Посгибаем блокнотный лист, чтобы понять, как можно окружность растянуть в линию.
Анимацию можно рисовать двумя способами:
- покадрово, в порядке движения объектов — когда расположение конечной точки не очень важно;
- с использованием компоновок: сначала рисуются ключевые кадры, а потом дорисовываются промежуточные — когда важно, чтобы объекты были в определенных местах в определенное время. Наш вариант.
Ключевые точки — это первый кадр с лупой и последний кадр с пупой (в виде крестика). Они должны быть на определенных местах в определенное время — лупа в начале, крест в конце. Все остальное заполняем переходами.
Насгибав порядочное количество листов, понимаем, что срисовывать это можно вечно. Долго смотрим на сетку, по которой рисовалась кнопка:
Придумываем, что окружность лупы должна расширяться из ПНУ, обрезаясь границами сеточного круга.
Забиваем на согнутые листы, и расширяем окружность по ряду Фибоначчи: он живой, простой, и (как подтвердится потом) смотрится хорошо:
Теперь подрезаем края (на самом деле рисуем дуги заново на основе окружностей, потому что Скетч еще сырой и рендерит срезы криво):
Сохраняем в СВГ, прикручиваем на сайт, любуемся.
UPD: с января 2016 развитием сайта занимается его команда