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

Для морфинга поиска мы используем несколько эффектов, которые анимируют размеры поисковой строки, размер шрифта и некоторые другие элементы. 

Иногда мы задаёмся вопросом, как упаковать все эти возможные действия, которые у нас есть в один конкретный UI. Для кнопок выпадающего меню есть, конечно, много всяческих возможностей. Другая идея заключается в использовании взаимодействия при перетаскивании элемента. Сегодня мы хотим поделиться с вами некоторыми идеями такого рода взаимодействий. Идея состоит в том, чтобы позволить перетаскивать некий элемент, а затем показать некую droppable область, которая бы отвечала за определённые действия. Это сэкономит много места в UI и даст интересную динамику взаимодействий.

Область применения может быть самой различной, например:  категоризации и организации контента.

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

Обратите внимание, что это данные примеры были протестированы в последних версиях браузеров.

Также обратите внимание, что IE11, похоже, не поддерживает vieport единицы в Calc (), которые мы используем для некоторых анимаций.

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

Для анимации SVG, мы используем Snap.svg - отличная JavaScript SVG библиотека для современных браузеров.