Muszę animować obraz windy na mojej stronie internetowej i przenieść go do zaprogramowanych lokalizacji w widoku

Question

W porządku, więc robię symulator windy. Logika biznesowa wszystkiego jest w porządku, używam kolejek. Problem, który mam, to przenoszenie windy z jednego piętra na drugie w kolejce. Używam HTML, CSS i JavaScript / Jquery. Do tej pory dwa podejścia, które wypróbowałem, to animowana metoda Jquery i translacja CSS. Nie udało mi się jeszcze znaleźć przyzwoitej odpowiedzi. Moja ostatnia próba dotyczyła użycia niewidocznych elementów w DOM, aby mieć współrzędne, do których należy przenieść windę. Podam fragmenty kodu do dalszych wyjaśnień.

Current Elevator implementation

To jest zdjęcie strony internetowej, jak widzisz, muszę mieć możliwość w dowolnym momencie wjechać windą na dowolne piętro.

// 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>

Jak widać w JS, przełączam niektóre klasy po naciśnięciu przycisku start, następnie pobieram informacje o miejscu docelowym z góry kolejki i w tej chwili utknąłem na animacji windy (moja ostatnia próba wygląda głupi lol), aby móc wejść na dowolne piętro.

Tutaj jest również link do repozytorium, jeśli chcesz sklonować i otworzyć na serwerze live: https: / /github.com/Amalazing/Elevator-Simulator

Dziękuję za poświęcony czas i pomoc.

javascript jquery html css

-3

LAN_scape 10 marzec 2020, 10:08

Answer 1

Używając przejścia css i drobnego javascript możesz animować swój obiekt (czy to jest img, czy co masz, użyłem rozpiętości tekstowej w moim demo) do części swojej strony za pomocą wbudowanych wywołań javascript z przycisku onclick - I Napisałem dla Ciebie szybkie i brudne demo na dole tego posta.

Więcej o przejściach css: https://www.w3schools.com/css/css3_transitions.asp

Uwaga: nie zamieściłem mechanizmu listy kolejek, ponieważ nie było to częścią twojego pytania ... ale nie powinno być zbyt trudne wdrożenie mojego przykładu do twojego projektu - powodzenia.

.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>

1

Beavatron Prime 10 marzec 2020, 12:13

Answer 2

Coś takiego?

Po prostu animuj dno, gdziekolwiek chcesz.

Użyłem tutaj stałych wartości px dla wysokości, aby łatwiej było zrozumieć, co się dzieje (przynajmniej mam nadzieję, że jest łatwiej)

Otrzymuję przesunięcie (tylko najwyższą wartość) z elementu, do którego chcę animować. Następnie ustawiam najwyższą wartość windy tak, aby odpowiadała najwyższej wartości miejsca docelowego.

// 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>

2

cloned 10 marzec 2020, 09:30

Muszę animować obraz windy na mojej stronie internetowej i przenieść go do zaprogramowanych lokalizacji w widoku

2 odpowiedzi

Podobne pytania

Nowe pytania