jquery - техника анимации для маскировки в переменном направлении - PullRequest
0 голосов
/ 14 марта 2012

Вначале я должен сказать, что я новичок в jquery.

Я пришел из флеш-фона и пытаюсь обновить свои навыки, поэтому создаю анимацию роста в маске для дерева и получаю следующеедо сих пор: http://s46264.gridserver.com/dev/dave/tree_animation/trunk.html

Идея очевидна, я хочу, чтобы дерево росло от основания, ветвь за ветвью, чтобы сначала раскрывался ствол, а затем каждая ветвь.Я использую div со скрытыми переполнениями и анимирую свойства width и height для отображения каждого сегмента.

У меня возникли некоторые проблемы с выяснением, как анимировать ширину справа налево, а не слева направо, такя использую контейнеры, перемещенные вправо для обеих левых ветвей, чтобы изменить направление анимации (не уверен, что это лучшая практика, но это было лучшее, что я мог сделать?)

Следующий шаг - листья (я 'у меня они исчезли в конце, чтобы вы могли видеть, как они выглядят).

Моя идея состоит в том, чтобы разделить все листья на pngs и расположить их в правильном месте, тогда я хочу показать каждый из нихиндивидуально из конкретных точек происхождения (корень каждого листа, который появляется в разных местах) и раскрыть каждый лист, анимируя высоту / ширину в противоположном направлении.

Итак, несколько вопросов:

  1. Как лучше всего выполнять маскирование раскрытия объектов при возможности контролировать направление раскрытия, то есть слева направо,сверху вниз, слева внизу справа вверху и т. д.

  2. Правильно ли я делаю это?

  3. Есть лилучший способ сделать это?

  4. Должен ли я использовать jquery или html5 canvas лучше?

  5. Есть ли менее запутанный способ достижениячто я ищу?Мне кажется, что полное отсутствие маскировки и возможности управлять направлениями анимации без плавающих вещей.

Это, очевидно, было бы очень просто на временной шкале флэш-памяти, но у меня, похоже, нетте же инструменты доступны в JQuery?Я что-то упустил и как бы вы это сделали?

Спасибо, что нашли время, чтобы прочитать.Очень полон решимости сделать это с помощью стандартных инструментов!

...