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

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

микродемо ^[2]

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

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

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

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

единственное но: при количестве элементов >1 возможно будет тормозить, поэтому для веб-решения лучше стоит посмотреть в сторону canvas (кроссплатформенное быстрое решение можно получить с помощью, например, pixi.js ^[3] или подобных библиотек, либо чистого 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 ^[2]
Ландшафты разных планет ^[4]
GitHub ^[5] для препорирования

Автор: ALeutsky

Источник ^[6]