Каков самый быстрый по производительности способ спрайтовой анимации на странице?

     

    Only registered users can participate in poll. Log in, please.

    Каков самый быстрый по производительности способ спрайтовой анимации на странице?

    • 38.0%С помощью Flash79
    • 33.6%Создать анимированные gif-картинки со спрайтами и показывать по мере необходимости70
    • 28.4%Создать картинки для каждого кадра и анимировать из JS59

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 50

      0
      Я в раздумьях =)
      Нужно выбрать способ технической реализации спрайтовой анимации для своего проекта.
      На странице будет от 1 до 20-25 спрайтов одновременно. Они могут перемещаться, менять состояния.
        0
        P.S. Если можете аргументировать выбор — комментьте плз, очень мне поможет. Спасибо =)
          0
          P.P.S. Скорость загрузки картинок не учитывается, учитывается только непосредственно нагрузка на машину для отображения спрайтов.
        +1
        Глупый вопрос. JS отпадает, тормозит сильно. Gif даст некачественную анимацию, особенно если есть прозрачность.
          0
          Я написал простейшую демку, не заметил вообще никакой нагрузки от покадрового спрайта на JS. Поэтому и задался вопросом… Сегодня собираюсь написать полноценное демо, приближенное к реальной ситуации (много спрайтов, перемещение, смена состояний).
          Правда в Actionscript я полный нуб, соответственно сравнить с флэшем будет проблематично.
            0
            20-25 спрайтов, которые меняются 5 раз в секунду через JS. А потом посмотрите на нагрузку процессора :) и что будет если прокрутить страницу, не подтормаживает? :)
              0
              Примерно такую демку и напишу, поглядим что выйдет.
              Прокручивать страницу там будет не нужно.
              А у вас есть опыт разработки подобного на Flash? Поделитесь опытом? )
                0
                Как ни крути, а flash производительнее, опыта нет, я не flash-разработчик.
                  +1
                  Смотрел аналогичные проекты целиком на flash — загрузка одного ядра процессора на 100% — хотя может дело в том, что у меня линух.
                    0
                    Было бы интересно узнать зачем столько анимированных частей на странице
                      0
                      Игровой проект.
                        0
                        Очень много факторов влияет на производительность:
                        1.частота изменения картинки.
                        2.размер анимированных частей.
                        Я как-то смотрел проект майл.ру с игрой, мобы тоже анимированные, их много, сетка 50 на 50 где-то, на флеше не тормозило.
                          0
                          У меня размер моба будет примерно 50х75, сетка гексагональная, на весь верхний фрейм.
                          Частота — 5-8 кадров в сек.
                            0
                            Попробуй размножить www.otanistudio.com/swt/sprite_explosions/ готовую анимацию на 25 объектов :)
                              0
                              Это кстати тот самый вариант что предложил smmurf ниже.
                                0
                                Вариант со спавном бесконечного количества спрайтов

                                У меня на хроме до спавна ~2000 спрайтов нет тормозов.

                                Более осмысленный пример

                                Спрайтов 15-30, все анимированные и перемещающиеся; FPS ~19.44 (50мс задержка между обновлением).
                                  0
                                  Точно так же, 30 без тормозов, значит сейчас ситуация лучше с js-анимацией. Я просто недавно открыл проанимированную спрайтами вращающуюся стрелку и она с завидной частотой подтормаживала, а тут нет.
                                    0
                                    Реализация просто красивая, спасибо нижеоткомментившим =)
                                    И действительно быстрая.
                                    Хотя в опере9 и ие6 в десятки раз медленнее чем в хроме, что впрочем не удивительно.
                        0
                        C флешем можно добиться хорошей производительности, даже если объектов будет много. Основной момент — отрисовывать все в битмапы либо в фотошопе, либо руками через класс Bitmap. Основная причина тормозов во флеше — нагрузка на процессор из-за просчета большого количества векторной анимации. С растром всё проще.
                          0
                          Меня интересует именно кросс-платформенный способ.
                          Флэш и на маке и на линухе безбожно тормозит и глючит.
              0
              Не исключено, что подходящим решением будет использование одного изображения и смещение его, как фона элемента, на каждый кадр.
              Однако вам стоит измерить производительность именно в вашем случае.
                0
                Мне нужна именно полноценная анимация, т.е. несколько чередующихся кадров (объект ходит, объект атакует, объект умирает и т.п.). Простое перемещение тут не подойдет.
                • UFO just landed and posted this here
                  • UFO just landed and posted this here
                    • UFO just landed and posted this here
                      0
                      Да да, ниже это уже было расписано. Помоему это действительно самый быстрый вариант.
                  0
                  Ну я как раз имею в виду просто склеить все кадры (которые бы все равно были сделаны отдельными изображениями) — шаги, атаку и т. д., и смещать фон, чтобы в нужный момент времени отображался нужный кадр. Спрайт будет большим, ясное дело, но в плане производительности возможен выигрыш.
                    0
                    Интересная идея. хотя из-за недостатка опыта слабо себе представляю как показывать только кусок картинки.
                      +2
                      Используете элемент (например, div) со строго заданными размерами одного кадра, фоном к нему кладете спрайт, и с помощью background-position подвигаете так, чтобы отобразился нужный кадр.
                      Если требуется IE 6 и полупрозрачность — будет немного сложнее, но вполне реализуемо.
                        0
                        Спасибо за идею, буду пробовать и такой вариант.
                          0
                          Практика показывает, что вариант с overflow: hidden и изменением координат слоя в контейнере работает чуть быстрее и плавнее, чем background-position.
                            0
                            Можете чуть подробнее расписать? )
                            Или ссылку на RTFM )
                              +1
                              Задаете обертке относительное позиционирование, кладете в нее картинку (img) если не нужен AlphaImageLoader или блок с фоном (если нужен AlphaImageLoader), обертке также задается overflow: hidden, а сам элемент внутри смещается с помощью абсолютного (или относительного) позиционирования, все, что за пределами обертки — обрезается.
                                0
                                Я думаю что лучше будет отказаться от поддержки IE6, т.к. как я понимаю, вариант без AlphaImageLoader будет быстрее.
                                  0
                                  Хотя ничто не мешает в зависимости от браузера использовать разные варианты.
                                    0
                                    Во всех браузерах, кроме IE 6 оба варианта будут работать одинаково, потому что им фильтры не нужны.
                                    В IE 6 вариант с фильтром кое-как работать будет, без фильтра — не будет прозрачности, но в зависимости от условий анимации тормоза могут быть настолько сильными, что поддерживать это будет бессмысленно.
                                      0
                                      Прозрачность однозначно нужна.
                                      Вопрос в том насколько это будет тормозить на ИЕ6 на современной машине.
                                        0
                                        Это сильно зависит от…
                                        Надо реализовать в условиях, приближенных к реальным, и посмотреть.
                                        Скажется количество элементов на странице и количество других элементов с AlphaImageLoader’ом, а также другие особенности конкретной страницы, тут ничего заранее предугадать не получится.
                                0
                                Возможно, кстати, что так действительно будет лучше.
                                Просто количество элементов в разметке мне хотелось оставить наименьшим -)
                                Впрочем, так у нас появляется один лишний элемент, взамен чего — возможность использовать AlphaImageLoader и абсолютное позиционирование, которое потенциально должно быть наиболее быстрым.
                            0
                            Простите, туплю, вы же сами и ответили — использовать как фон элемента нужного размера.
                            • UFO just landed and posted this here
                                0
                                Гляньте выше в ответе на коммент jeje, дал ссылки, реализовал по этой схеме, работает шустро =)
                                Спасибо за совет.
                                0
                                Где вариант «зависит от анимации»? Везде есть и свои плюсы и свои минусы.
                                  0
                                  я выше, в ответе на коммент jeje, описал подробнее анимацию.
                                    0
                                    Игровая анимация?.. Флеш однозначно. Там и аппаратное ускорение и много-много разной оптимизации
                                  0
                                  Всем спасибо за конструктивные комментарии, даже не задумывался о варианте, предложенном smmurf и BaBL, буду делать демку и смотреть на результаты.
                                  Если интересно — покажу потом.
                                    0
                                    Если интерфейс будет завязан на Javascript, и связь кадров анимации со скриптами будет прямая, то выбор, на мой взгляд, очевиден. Я как-то реализовывал игровое поле, которое само состояло из ~15 слоев, плюс спрайты с анимацией, которые работали через матрешки, контролируемые Javascript. Причем сами спрайты тоже были многослойные — т.е. поверх анимированного слоя был еще один, тоже анимируемый. Проще говоря, было много анимаций и наложенных друг на друга слоев. Все управлялось Javascript, причем одним глобальным таймером анимации (а не каждой анимации свой таймер). Работало все это дело с нормальной скоростью, везде, кроме ie
                                      0
                                      Да, я тоже собираюсь использовать один глобальный таймер для анимации.
                                        0
                                        … кроме ie версии 6 и ниже, поскольку использовался png24-fix, который сильно сажает производительность. В chrome работало практически идеально, в других браузерах — практически неразличимые подтормаживания.

                                        Кстати есть еще вариант с svg/vml графикой, или использованием canvas. Оба эти варианта работают чуть быстрее (с растровой графикой, перемещением и анимацией), чем просто матрешки. Однако эти решения нетривиальны, имеют свои ограничения, а canvas, к тому же, работает не во всех браузерах.

                                        Но специфика проекта была такая, что графика была «под 8-битку» и анимации были дерганные «by design». Так что если нужна красочная, плавная анимация, то лучше посмотреть в сторону плагинов (flash, silverlight и т.д. и т.п.).
                                        0
                                        Если дело идет о создании игр, то может это поможет. JS фреймворк для создания игр. www.effectgames.com/

                                        Only users with full accounts can post comments. Log in, please.