Мне нужно анимировать изображение лифта на моей веб-странице и переместить его в заданные места на виде

Question

Хорошо, поэтому я делаю симулятор лифта. Buisness Logi c все в порядке, я использую очереди. У меня проблема с перемещением лифта с одного этажа на другой в очереди. Я использую HTML, CSS и JavaScript / Jquery. Пока что два подхода, которые я пробовал, это одушевленный метод Jquery и перевод CSS. Я пока не смог найти достойного ответа. Моя последняя попытка связана с использованием невидимых элементов в DOM, чтобы получить координаты для перемещения лифта. Я предоставлю фрагменты кода для дальнейшего объяснения.

Это изображение веб-страницы, как вы видите, мне нужно иметь возможность перемещать Лифт на любой этаж в любое время.

// Called when user selects the Start button
$('#btn-start').click(function() {
  // Start the Simulation
  let destination = $('#second-floor').offset();
        $("#elevator").animate( {right: destination.left, bottom: destination.top}, 4000, "linear", function(){console.log("Elevator finished moving")} );

  //});
});

.elevator-visual {
  width: 55%;
}

.elevator {
  position: relative;
  max-width: 10vw;
  margin-left: 6vw;
}

.floor {
  position: relative;
}

.hidden-destination {
  position: absolute;
  bottom: 10vw;
  left: 11vw;
  background: none;
  height: 5px;
  width: 5px;
}

.floor-bound {
  width: 75%;
  margin-bottom: 15vw;
}

#first-floor,
#second-floor {
  margin-bottom: 0;
}

.floor-title {
  margin: 0;
  padding: 0;
  text-align: right;
  color: #777;
  margin-right: 6vw;
}

#floor-four-lable {
  margin-top: 15vw;
}

.btn-start{
    position: static;
    border: none;
    padding: 8px 21px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    border-radius: 5%;
    font-size: 24px;
    background-color: #b77110;
    color: white;
    margin-left: 15px;
    margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Elevator Diagram -->
<div class="elevator-visual">
  <div class="floor">
    <div class="hidden-destination"></div>
    <p id="floor-four-lable" class="floor-title">Floor 4</p>
    <hr id="forth-floor" class="floor-bound" />
  </div>
  <div class="floor">
    <div class="hidden-destination"></div>
    <p class="floor-title">Floor 3</p>
    <hr id="third-floor" class="floor-bound" />
  </div>
  <div class="floor">
    <div class="hidden-destination"></div>
    <p class="floor-title">Floor 2</p>
    <hr id="second-floor" class="floor-bound" />
  </div>
  <img id="elevator" class="elevator" src="https://via.placeholder.com/150" alt="" />
  <div class="floor">
    <div class="hidden-destination"></div>
    <p class="floor-title">Floor 1</p>
    <hr id="first-floor" class="floor-bound" />
  </div>
  <button id="btn-start" class="btn-start">Start</button>
</div>

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

Вот также ссылка в хранилище, если вы хотите клонировать и открыть с помощью live-сервера: https://github.com/Amalazing/Elevator-Simulator

Спасибо за ваше время и помощь.

Answer 1

Как то так?

Просто анимируйте дно туда, куда хотите, чтобы оно go.

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

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

// Called when user selects the Start button
$('#btn-start').click(function() {
  // Start the Simulation
  let destination = $('#second-floor').offset().top;
        $("#elevator").animate( {top: destination}, 200, "linear" );

  //});
});

$('.btn-to-floor').on('click', function() {
  let floor = $(this).data('floor');
  let floors = $('.floor').length;
  // eq(floors - floor) needed to so some magic calculations (you could also just use some hardcoded id here based on data attribute. 
  let destination = $('.floor').eq(floors - floor ).find('.floor-bound').eq(0).offset().top;
        $("#elevator").animate( {top: destination}, 200, "linear");
});

.elevator-visual {
  width: 55%;
  position: relative;
}

.elevator {
  position: absolute;
  margin-left: 6vw;
  bottom: 0;
}

.floor {
  height: 180px; /* height of elevator + text + line */
}

.floor-bound {
  width: 75%;
}

.floor-title {
  margin: 0;
  padding: 0;
  text-align: right;
  color: #777;
  margin-right: 6vw;
}

.btn-start{
    position: static;
    border: none;
    padding: 8px 21px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    border-radius: 5%;
    font-size: 24px;
    background-color: #b77110;
    color: white;
    margin-left: 15px;
    margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Elevator Diagram -->
<div class="elevator-visual">
  <div class="floor">
    <p id="floor-four-lable" class="floor-title">Floor 4</p>
    <hr id="forth-floor" class="floor-bound" />
  </div>
  <div class="floor">
    <p class="floor-title">Floor 3</p>
    <hr id="third-floor" class="floor-bound" />
  </div>
  <div class="floor">
    <p class="floor-title">Floor 2</p>
    <hr id="second-floor" class="floor-bound" />
  </div>
  <div class="floor">
    <p class="floor-title">Floor 1</p>
    <hr id="first-floor" class="floor-bound" />
  </div>
  <img id="elevator" class="elevator" src="https://via.placeholder.com/150" alt="" />
</div>

<button id="btn-start" class="btn-start">Start</button>
<button class="btn-to-floor" data-floor="1">1</button>
<button class="btn-to-floor" data-floor="2">2</button>
<button class="btn-to-floor" data-floor="3">3</button>
<button class="btn-to-floor" data-floor="4">4</button>

Answer 2

Используя css 'transition и minor javascript, вы можете анимировать ваш объект (будь то img или что-то еще, я использовал текстовый span для моей демонстрации) для части вашей страницы через встроенный javascript звонки от нажатия вашей кнопки - я написал быстрое и грязное демо в нижней части этого поста для вас.

Подробнее о css переходах: https://www.w3schools.com/css/css3_transitions.asp

Примечание: я не включил механизм списка очередей, потому что это не было частью вашего вопроса ... но не должно быть слишком сложно внедрить мой пример в ваш проект - удачи.

.lift {
  position: absolute;
  transform: rotate(90deg);
  bottom: 10%;
  left: 30%;
  transition-duration: 2s;
}

.flrfour {
  position: absolute;
  bottom: 85%;
  left: 5%;
}

.flrthree {
  position: absolute;
  bottom: 60%;
  left: 5%;
}

.flrtwo {
  position: absolute;
  bottom: 35%;
  left: 5%;
}

.flrone {
  position: absolute;
  bottom: 10%;
  left: 5%;
}

.buttons {
  position: absolute;
  bottom: 5px;
  left: 50%;
}

<span class="flrfour"> floor 4 </span>

<span class="flrthree"> floor 3 </span>

<span class="flrtwo"> floor 2 </span>

<span class="flrone"> floor 1 </span>

<span id="lft" class="lift">lift</span>
<div class="buttons"><button onclick="document.getElementById('lft').style.bottom = '10%';">1</button><button onclick="document.getElementById('lft').style.bottom = '35%';">2</button><button onclick="document.getElementById('lft').style.bottom = '60%';">3</button><button
    onclick="document.getElementById('lft').style.bottom = '85%';">4</button>
</div>