Как создать анимацию постройки в html5?

Question

[Никита Нафранец]

У меня есть туманные знания о JS,JQ и среднячок (а может и ниже) в HTML 5 и css. Моя цель создать анимацию сендвича который при каждом клике (или вытягивании в верх) растет в высоту. В голову пришло только нарисовать этот сендвич в макс высоту и сделать из него блоки, скрыть их, а потом с помощью js по очереди их открывать. Могут подсказать как лучше всего это сделать? Может флеймворк какой-нить использовать или есть уже готовые решения? Заранее спасибо.

Answer 1

[Виктор Королев]

Могу посоветовать такой алгоритм с использованием Blend4Web и Blender (простейший вариант):

1. Создать отдельные плоскости с текстурами частей сэндвича
   
2. Оставить нижний слой бутера видимым, а остальные скрыть
   
3. При щелчке мышью, открывать новый plane. (Можно усложнить и добавить анимацию)
   

И да, никакого программирования для этой задачи не требуется. Все делается в редакторе с помощью встроенных функций blend4web. Выход в виде JSON или HTML с плеером.

Не справишься - пиши, накидаю сценку сам. Все это действительно просто.

Answer 2

[Мак Алексей]

Боюсь, фреймворка для выращивания сендвича - нет.
Можно сделать анимацию слоями SVG с деформацией.
Есть вот такая библиотека для анимации SVG - snapsvg.io

Comments

[Мак Алексей]

Ах да, такое можно сделать и на PNG.