Как делать такой вид анимации (метаморфозы) на css/js в html5?

Question

[Oleg Shevelev]

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

На данном примере видим как изменяются:

• кнопка в график
  
• график в другую кнопку
  
• кнопка в селектор с прокруткой
  

При этом контуры плавно меняют свои очертания не классической (линейной) анимацией.


Использовать планирую в html5 сайтах, не в мобильной разработке, хотя и для неё будет материал полезен.

Answer 1

[xmoonlight]

Явно что SVG + создание динамических полигонов на основе динамики движения при трансформации. Т.е. явно используется библиотека для построения такого интерфейса.
greensock.com/morphSVG
noeticforce.com/Javascript-libraries-for-svg-animation

Comments

[Oleg Shevelev]

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

Answer 2

[A K]

Используйте SVG.
Наглядный пример.

Comments

[Oleg Shevelev]

Интересный вариант, но больно напряжный. Спасибо.

[A K]

Oleg Shevelev: пожалуйста. Идеально подходит под вашу задачу: +кликабельность, +графики(любой формы, любого цвета,.. - полная стилизация), +анимации, +динамичность.

[Oleg Shevelev]

Symphony: только хотелось бы поменьше прописывать кучу точек и поменьше полагаться на магический animate... плюс SVG не везде удобно встраивать, иной раз хочется чистый DOM. Но как вариант да, можно подумать о том что бы всю страницу сделать "одностраничником" на SVG.

[A K]

Oleg Shevelev: >>> "одностраничником" на SVG. — вы ошибайтесь, svg будет использоваться лишь для построения графика, одного прямоугольника и двух кнопок. Для всего остального используйте HTML.