Сколько изображений нужно, чтобы создать JavaScript-эффект вращения изображения на 360 градусов?

Question

Я просматривал некоторые демонстрации на Apple, демонстрирующие классные демонстрации HTML5, CSS3 и JavaScript, и я был заинтригован этой , своего рода программой просмотра 360 градусов.

Мне было интересно узнать много фотографий, которые, как вы думаете, мне нужно будет попробовать повторить. Сами Apple на странице написали several, но это не очень наглядно.

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

Спасибо.

Answer 1

Они не указывают, потому что нет реального ответа. Если вы хотите, чтобы это было супер-гладким, 360 изображений было бы хорошо. Apple использовала 72. Вы можете использовать любое число от 2 до 72 до 360 до бесконечности, чтобы технически получить эффект, так что вам нужно знать, сколько стоит работа и насколько плавным является эффект.

Извините.

Answer 2

Из визуального, а не технического ... Плавность вращения - это фактор, на который вы хотите посмотреть, сколько изображений вам нужно.Размер, если объект и уровень детализации помогают в ответе, тогда у вас есть пропускная способность.20 изображений - минимум, 40 - хорошая рекомендация, но 72 выглядят великолепно.Помните, что если это фотография, каждое изображение добавляет больше работы и сложности.

Вот диаграмма, которая помогает продемонстрировать количество изображений.http://www.photospherix.com/matrix.html

Answer 3

Вам нужно several, это настолько же наглядно, насколько это возможно.

Но обратите внимание на одну вещь. Если вы загрузите их в определенном порядке, вы можете получить прогрессивный эффект.

Например, сначала загрузить «север» и «юг». Затем «восток» и «запад». Затем «северо-запад», «юго-запад», «северо-восток» и «юго-восток» и т. Д., Таким образом, вы можете получить более 72 изображений, но пользователю не придется ждать, чтобы получить плавно прогрессирующий опыт.

Обратите внимание, что в этом случае вы будете загружать их в степени двух.

1-я загрузка (после того, как одно изображение уже есть): 1 изображение (противоположное)
2-я загрузка: 2 изображения (стороны)
3-я загрузка: 4 изображения
4-я загрузка: 8 изображений
...
8-я загрузка: 128 изображений.

Обратите внимание, что вы не будете использовать градусы так легко. (им просто нужно было поделить на 5, 360/5 = 72)
Для расчета того, какое изображение имеет заданную степень, вы должны использовать интерполяцию.
Итак, сначала вы должны интерполировать 360 градусов до 2 (изображения), затем до 4, затем 8 ..., чтобы узнать, какое изображение выбрать, исходя из того, что у вас есть

Простое объяснение интерполяции: здесь .

Answer 4

Зависит от точности вращения, который вы хотите.

Не существует фиксированного номера.

В этом конкретном примере они используют 72.

изображения можно найти на http://developer.apple.com/safaridemos/showcase/threesixty/images/optimized/Seq_v04_640x378_72.jpg

замените последнюю 72 часть URL-адреса с 01 на 72 , чтобы получить все изображения.

Answer 5

В демоверсии используется 72 изображения.

^{Кстати, демо-версия, похоже, просто обновляет атрибут src изображения.}

Answer 6

Демоверсию можно скачать здесь Поиграйте с этим, я считаю, 24 - это хорошее число, но оно зависит от того, сколько вращающихся видов вы планируете создать.

http://lukedurrant.com/2011/08/apples-360-rotating-ipod-html-5-source-code-download/