Покажите, где солнце на небе в реальном времени - как? - PullRequest
Новая
       13

Покажите, где солнце на небе в реальном времени - как?

0 голосов
/ 23 февраля 2019

Я использую функцию из mourner / suncalc , которая позволяет мне получить текущую позицию нашего солнца.С помощью getPosition() я хочу создать анимацию на изображении или с использованием чистого CSS (конечно, масштабируемого до различных разрешений экрана и ориентаций), где вы можете видеть, где сейчас находится солнце, в режиме реального времени на странице.Совершенно ненужная функция, но забавная функция :) На изображении ниже показано, как я думаю.

enter image description here

Как я уже сказал, я буду использоватьgetPosition() функция от функции скорбящего, которая печатает азимут и высоту солнца.Проблема, с которой я сейчас сталкиваюсь, заключается в том, чтобы каким-то образом преобразовать эти данные в проценты или пиксели, чтобы солнце на моем примере изображения выше двигалось вдоль круглой линии (и да, солнце должно быть заблокировано прямой линией, имитирующей землю),имитируя реальное положение на небе в реальной жизни.

Данные по азимуту выглядят как -0.7000179547193575, а высота над уровнем моря выглядит так: -0.699671080144066 (в зависимости от текущего положения солнца, где я сейчас нахожусь).

Как мне это сделать?Могу ли я сделать это с помощью чистого CSS или я должен сделать это с изображениями?

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Я не знаю точную формулу, но вот идея, как вы можете создать это с помощью CSS, тогда вам просто нужно настроить различные значения. 

var sun = document.querySelector('.sun');

function update() {
  var x = Math.random() * 180;
  var y = Math.random() * 40;
  sun.style.transform="rotateX("+y+"deg) rotate("+x+"deg)"
}
.container {
  width:300px;
  height:150px;
  margin:auto;
  overflow:hidden;
  border:1px solid;
}
.sun {
  margin:20px;
  padding-top:calc(100% - 40px);
  position:relative;
  border-radius:50%;
  border:1px solid grey;
  transform:rotateX(20deg) rotate(20deg);
  background:
    linear-gradient(red,red) center/100% 1px;
  background-repeat:no-repeat;
  transition:1s;
}
.sun:before {
  content:"";
  position:absolute;
  top:calc(50% - 20px);
  left:-20px;
  width:40px;
  height:40px;
  background:yellow;
  border-radius:50%;
}
<div class="container">
<div class="sun">

</div>
</div>
<button onclick="update()">update</button>

Используя приведенный ниже код, вам просто нужно преобразовать ваши значения в градусы, чтобы повернуть элемент sun и поместить солнце направильное место.

0 голосов
/ 23 февраля 2019

Вы можете изменить значения CSS с помощью JavaScript , я не вижу другого способа 

    /* yes this JS code */
    const
      MvSun = document.getElementById('Mv-Sun'),
      Sun   = document.getElementById('sun')
    ;

    MvSun.onclick = function() {
      Sun.style.left = '200px';
    }
    #celestial-vault {
      position: relative;
      width: 400px;
      height: 300px;
      background-color: skyblue;
      display: block;
    }

    #sun {
      position: absolute;
      top: 10px;
      left: 20px;
      background-color:yellow;
      width:20px;
      height:20px;
      border-radius: 10px;
      display: block;
    }
  <div id="celestial-vault">
      <div id="sun"></div>
  </div>

  <button id="Mv-Sun">move sun</button>
...