Псевдо 3D: Анимация вращения планет и других шароподобных объектов

Описание небольшого трюка по анимации вращения планет или других шарообразных штуковин. На написание этой статьи меня натолкнула статья Сфера из двух треугольников (стоит почитать). А сам трюк основан на весьма простом способе создания в Photoshop псевдо-объемной картинки из плоской, который описан под катом.

микродемо

Как это делается в Photoshop (микро-урок):

• подбираем нужную текстуру
• вырезаем из неё кружок
• добавляем затемнение или осветление "по вкусу" через свойства слоя (я буду использовать осветление, а более реалистичные результаты получаются при комбинации разных теней)

Чтобы долго не заморачиваться с реализацией (т.к. это уже второстепенный момент), буду использовать js+css+html. Описанный выше "урок" для Photoshop для веб-страницы будет выглядеть так:

• подбираем бесконечную текстуру, повторяющуюся по вертикали (или по горизонтали, или в обоих направлениях)
• устанавливаем эту текстуру в виде фона
• изменяем положение фона с помощью js через фиксированные промежутки времени

также можно решить эту задачу, используя canvas (кроссплатформенное быстрое решение можно получить с помощью, например, pixi.js или подобных библиотек, либо чистого js + canvas).

Решение

Как выглядит стиль:
.planet2d { background: repeat-x 0 0 url(earthmap-h100.jpg); border: 1px solid #999; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; box-shadow: inset 0 0 10px rgba(255,255,255,0.9); height: 100px; width: 100px; } .planet2d.moon { background-image: url(moon-h100.jpg); } .planet2d.jupiter { background-image: url(jupiter-h100.jpg); } .planet2d.venus { background-image: url(venus-h100.jpg); } .planet2d.mercury { background-image: url(mercury-h100.jpg); } .planet2d.io { background-image: url(io-h100.jpg); }
т.е. нужно установить начальное состояние фона, потом округлить блок (здесь я просто использую border-radius, но можно использовать картинку-шаблон с вырезанным кругом внутри, при этом, в этот шаблон можно включить и тени, таким образом достигнув более крутого результата) и сделать тень, затем задать размеры блока - вот и всё. А потом описаны стили для разных планет.

JavaScript-кода не больше:
(function (w) { w.Planet2D = function (interval) { interval = interval // 40; var j = 0; setInterval(function () { var els = document.querySelectorAll(".planet2d"); j--; for (var i = 0; i < els.length; i++) { els[i].style.backgroundPosition = j + "px 0px"; } }, interval); } })(window);
т.е. нужно сделать выборку всех элементов и сдвинуть у них фоновое изображение.

Итог

1. Математики нет
2. Трюк легко реализовывается под многие платформы
3. Анимация весьма правдоподобно напоминает 3D

Ссылки

Demo
Ландшафты разных планет
GitHub для препарирования

Ссылки по теме

• Купить программное обеспечение на itshop