Я пытаюсь создать движущиеся источники света с трейлами для веб-сайта / приложения HTML5, предназначенного для iPad 2. Интересно, какой лучший способ сделать это и является ли использование HTML5 жизнеспособным вообще.Я выбрал HTML5, потому что его проще и дешевле разрабатывать и развертывать, чем нативные приложения для iOS с Objective C. Конечно, если окажется, что HTML5 просто не обеспечивает достаточной производительности, мне, возможно, придется проглотить горькую таблетку.
В любом случае, чтобы дать вам представление о том, о чем я говорю, это то, что я до сих пор получил:
снимок экрана http://devdali.no -ip.org / mathias / test-lights / screenshots / 1.jpg
Или вы можете увидеть это в действии здесь (работает только в браузерах на основе webkit).
Сначала я попытался использовать холст HTML5 и рисовать радиальные градиенты какчастицы похожим образом вы видите выше.Это работало, но частота кадров была ужасной даже на моем настольном компьютере!
Так что после небольшого чтения я обнаружил, что преобразования CSS3 могут быть аппаратно ускорены, поэтому я создаю версию, которую вы видите выше.Каждая "частица" представляет собой изображение размером 64x64 png.Для каждого источника света есть «головной» источник света (один img), за которым следует тропа, состоящая из 115 элементов img.Каждый элемент img трансформируется с использованием «translate3d» (а также масштаба и поворота).Также непрозрачность каждого элемента регулируется динамически.
Делая это таким образом, вы обеспечили гораздо лучшую частоту кадров на моем компьютере, но я сомневаюсь, что iPad 2 справится с этим.
Буду признателен, если кто-нибудь даст мне несколько советов о том, как улучшитьпроизводительность в целом и с учетом целевой платформы.
Спасибо за любую помощь заранее!