Как эффективно анимировать 120 изображений?

Question

Имеется 120 изображений, которые представляют собой 360-градусные круглые снимки витрины продукта, каждое из которых находится на расстоянии 3 градуса, размером 320 x 320 пикселей.Непрерывное отображение изображений даст эффект вращения продукта перед пользователем.

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

Если OpenGL не является опцией, каков рекомендуемый способ эффективной обработки этого вида анимации?Спасибо!

Answer 1

Я не совсем понимаю ваш пользовательский интерфейс, но вот мое предположение:

• Ваш пользовательский интерфейс представляет собой круг, содержащий множество изображений, и все они находятся на одном экране.Я думаю, что вы можете показать миниатюры изображений (50x50-80x80) в круге, и вы можете хранить все миниатюры в памяти без особых проблем.При таком размере каждый из них составляет около 8 КБ.120 x 9 ~ 1 МБ памяти

• Когда вы анимируете изображение, вы можете сначала загрузить миниатюру, а затем загрузить большое изображение на заднем плане.Это создаст некоторые эффекты, которые пользователь увидит некоторые изображения не ясно, а затем увидеть его ясно.Это также поможет, когда пользователи касаются некоторых, чтобы перейти к определенному изображению.По крайней мере, вам есть что показать.

• Вы можете сэкономить память и проблему с загрузкой, изменив размер большого изображения до 75-80% от размера 320x320.Это сэкономит вам немного времени для загрузки изображений и не сильно повлияет на качество изображения.Все зависит и от вашего приложения.

• Вы можете попробовать использовать энергичную загрузку.Вы можете загружать изображения вперед, прежде чем вы на самом деле их анимировать.Вы можете иметь массив для хранения 3-5 изображений (размер 320 x 320 невелик, поэтому 5 из них будут иметь размер 500-1000 КБ).Когда вы показываете первое изображение, вы начинаете загружать 4-е изображение перед рукой.

Answer 2

Я бы сделал копии всех 120 изображений в низком разрешении, возможно, размером 80x80.Все 120 должны поместиться в кеш текстуры GPU.Загрузите все 120 изображений в 120 закадровых изображений, увеличенных до 320x320.Анимируйте эти 120 изображений, показывая по одному изображению за раз.Всякий раз, когда анимация останавливается, быстро замените последнее изображение еще одним представлением с соответствующим полным разрешением 320x320 копий.Всякий раз, когда пользователь начинает анимацию, переключайтесь обратно к низкому набору изображений.

Это работает, потому что глаз не может видеть изменяющиеся объекты (иллюзию движения) с тем же разрешением, что и статическое изображениев зависимости от темпа анимации конечно.

Answer 3

Как насчет UIWebView + HTML5?

Посмотрите на витрину с яблоками: http://www.apple.com/html5/showcase/threesixty/

Answer 4

Если вы хотите действительно сжать это и иметь плавное воспроизведение на мобильном устройстве, вы должны сохранить его как фильм, а затем использовать AVPlayer AVFoundation, чтобы иметь пользовательское воспроизведение.Вы можете установить его примерно на любой кадр или изменить скорость воспроизведения вперед или назад и выполнить цикл, чтобы сделать его бесшовным.Вы можете, например, настроить его, чтобы изменить местоположение или скорость воспроизведения в фильме на основе пролистывания.Это более сложная настройка, чем MPMoviePlayer, но она вполне настраиваема.