Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 26
Можно и на чистом css сделать codepen.io/chinchang/pen/xCkus
ИМХО без дисторшина как-то неполноценно.
Ваш дисторшин напомнил мне «перевод» настроек из монитора ViewSonic. Термины pincusion и trapezoid так и оставили пинкушн и трапезоид.
сам прием основан на простом передвижении фона (либо контейнера с текстурой, если нет возможности двигать фон), поэтому единственный вариант достижения лучшего результата в данном случае — предварительная подготовка текстуры.
Анимация весьма правдоподобно напоминает 3D
Вы это серьезно?
да, вполне. Т.к. она действительно всего лишь напоминает, а не заменяет 3D анимацию.
Хорошая 3D-анимация безусловно лучше и приятнее глазу, а приведенным выше трюком не удивить изощренных дизайнеров и девелоперов. Но если в программе или на странице нужно сделать простой элемент (лоадер, небольшую анимацию земного шара, заставку во время загрузки и т.д.), который не несет сильной функциональной нагрузки, то простое решение лучше минимум тем, что на него будет затрачено минимум времени при весьма неплохом результате.
Хорошая 3D-анимация безусловно лучше и приятнее глазу, а приведенным выше трюком не удивить изощренных дизайнеров и девелоперов. Но если в программе или на странице нужно сделать простой элемент (лоадер, небольшую анимацию земного шара, заставку во время загрузки и т.д.), который не несет сильной функциональной нагрузки, то простое решение лучше минимум тем, что на него будет затрачено минимум времени при весьма неплохом результате.
Мне лично эффект показался настолько отвратительным и дешевым, что имхо лушче я в прелоадере буду смотреть на статику, чем на это.
а если Вы научитесь внимательнее читать, то увидите, что статья в первую очередь описывает простой способ анимации без использования математики, и не предлагает готовое решение. И результат в первую очередь будет зависеть от подготовленных графических элементов (в первую очередь фон), а этот коммент habrahabr.ru/post/180353/#comment_6261603 это только доказывает.
то, что эффект дешевый — никто не отрицает, и это открыто подчеркивается.
то, что эффект дешевый — никто не отрицает, и это открыто подчеркивается.
Вы продемонстрировали эффект на конкретном практическом применении. А я говорю, что это применение выглядит ужасно. Статья даже названа соответственно практическому применению этого эффекта в конкретном случае, а не сферическому эффекту в вакууме.
Так что кто из нас «не умеет внимательно читать» — еще вопрос ;)
Так что кто из нас «не умеет внимательно читать» — еще вопрос ;)
Напоминает, но не сильно, без искажений нет ощущения объема.
Отрендеренная гифка будет более красиво смотреться и там даже js,css не будет.
да, это тоже вполне хорошее решение, тем более, что шар будет естественнее смотреться, а также можно и наклон оси изменить. Но лично у меня «скил» подготовки гифок развит плохо по ставнению с программированием и для себя я выберу решение более быстрое в реализации, особенно, при отсутствии дизайнера в команде.
Анимация весьма правдоподобно напоминает 3D
А ничего что когда вращается сфера то визуально полюса движутся медленней чем экватор? Без этого и без, хоть малейшего намека на объем, в виде теней и рефлекса, все кажется очень плоским.
Нельзя просто слайдить текстуру, нужна имитация эффекта вращения. Относительно просто можно имитировать вращающийся цилиндр и рисовать его грани, т.е. скомпоновать «планету» из прямоугольников, каждый из которых использует разный скейл оригинальной текстуры:
В движении
Скрытый текст
Скрытый текст
Скрытый текст
Скрытый текст
В движении
Круто! Записал решение))
попробовал повторить подобное Demo 2, но на видюшке результат лучше смотрится. Можно, конечно, попробовать сделать шаблон с прозрачными тенями для улучшения результата, но это уже выходит за грани простого «трюка» в сторону реализации целого компонента.
Спасибо за видюшку и краткое описание
Спасибо за видюшку и краткое описание
Дело не в прозрачных тенях, а в математике: надо представить себе половину N-гранного цилиндра и рассчитать параметры проекции его граней на плоскость.
В реализации этот метод будет посложнее.
До «натяжки» на n-гранный цилиндр что из себя представляет текстура? Как-то её предварительно подготавливаете или это проекция сферы (элипса и тд) на плоскость?
До «натяжки» на n-гранный цилиндр что из себя представляет текстура? Как-то её предварительно подготавливаете или это проекция сферы (элипса и тд) на плоскость?
Технически подходит почти любая текстура, как в вашем примере:
(это не совсем ваша текстура 200x100, а чуть более детальная ее версия отсюда)
На деле, лучше всего выглядят не-контрастные текстуры с ярко выраженными полярными шапками, а заодно можно в фотошопе сделать горизонтальный фильтр Spherize, чтобы ближе к шапкам была видна деформация поверхности.
(это не совсем ваша текстура 200x100, а чуть более детальная ее версия отсюда)
На деле, лучше всего выглядят не-контрастные текстуры с ярко выраженными полярными шапками, а заодно можно в фотошопе сделать горизонтальный фильтр Spherize, чтобы ближе к шапкам была видна деформация поверхности.
А что за игрушка?
Что-бы народ меньше критиковал 3Д-шность — добавьте отвлекающий контекст в демку, например скорость вращения, пропорциональную реальной для каждой из планет.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Псевдо 3D: Анимация вращения планет и других шароподобных объектов