Описание небольшого трюка по анимации вращения планет или других шарообразных штуковин. На написание этой статьи меня натолкнула статья Сфера из двух треугольников (стоит почитать). А сам трюк основан на весьма простом способе создания в 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);
т.е. нужно сделать выборку всех элементов и сдвинуть у них фоновое изображение.
Итог
- Математики нет
- Трюк легко реализовывается под многие платформы
- Анимация весьма правдоподобно напоминает 3D
Ссылки
Demo
Ландшафты разных планет
GitHub для препарирования