Как оживить шар, путешествующий по заранее заданным путям в HTML5, Javascript и CSS?

Question

мой босс попросил меня создать анимационную программу HTML5, Javascript и CSS, в которой несколько шаров движутся с постоянной скоростью по заранее определенным изогнутым траекториям.Предопределенные пути, вероятно, будут прописывать английское слово (в рукописном написании).Когда мяч попадает в точку пересечения двух или более путей, программа должна отобразить речевой пузырь с текстом или графикой.Программа должна работать в IE8, FF, Chrome, Safari, ipad safari, iphone safari, браузере Android и браузере Black Berry.

Кто-нибудь знает, как мне начать?Доступны ли мне какие-либо из этих вариантов?

• среда разработки, которая помогает мне создавать анимацию, соответствующую моему проекту?

• уже существующее программное обеспечениечто я могу перепроектировать?

Любые предложения о том, как мне реализовать этот проект, было бы здорово

приятно иметь функцию - когда мяч прибывает вточка пересечения, она случайным образом выбирает одну из точек

Answer 1

Я бы предложил использовать библиотеку Javascript, такую ​​как Raphael, для такого рода вещей.

Raphael позволяет рисовать элементы в браузере и анимировать их.

Есть примеры сложных анимацийдоступно на домашней странице Raphael (включая примеры анимации по заранее заданному пути).

На самом деле это очень простая в использовании графическая библиотека, и лучше всего она работает даже в более старых версиях IE.(еще в IE6).Он использует SVG для своей графики, за исключением старых IE, где он использует VML.

Надеюсь, что помогает.

[EDIT]

Кстати, у Raphael 2.0 естьбыл выпущен сегодня.Убедитесь, что вы загрузили последнюю версию, когда загрузили.

Answer 2

Вы можете посмотреть некоторые примеры на http://jsanim.com/, которые могут вам помочь.

Answer 3

SixRevisions недавно опубликовал статью со списком 10 фреймворков JavaScript . В этом списке есть некоторые заметные упущения, но по большей части они рассматриваются в разделе комментариев. У меня не было времени проверить их все, но мне действительно нравится Рафаэль

Возможно, стоит упомянуть о новом бета-продукте Adobe: Adobe Edge , который, по-видимому, предоставляет флэш-интерфейс для создания анимации html5 / js