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

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

микродемо

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

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

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

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

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

Решение

Как выглядит стиль:

.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 для препорирования