Как сделать анимацию в js туда и обратно?

Question

Nora @noradrenaline

JavaScript

Как сделать анимацию в js туда и обратно?

Как сделать так, чтобы самолет летал туда и обратно?
Код в одну сторону написан,а вот как в другую не пойму

<code lang="css">
<style>
      img{
        position:absolute;
        width: 220px;
        transform: scale(-1,1);
      }
    </style>
</code>
  </head>
  <body>
    <img src="/img/самолет.png" id="plane" alt="">
<code lang="javascript">
    <script>
      let plane = document.getElementById("plane");
      let n = 0;
      function movePlane(){
        n = n + 1;
        plane.style.left = n+"px";
      }
      setInterval(movePlane, 10);
    </script>
</code>
  </body>
</html>

noradrzo.beget.tech/plane.html

Вопрос задан более трёх лет назад
321 просмотр

12 комментариев

Подписаться 1 Средний 12 комментариев

Вадим @MrDecoy Куратор тега JavaScript

Ну, для начала, Вы понимаете что делает код?

Написано более трёх лет назад
Nora @noradrenaline Автор вопроса

Вадим, да, но я не могу понять как задать цикл через булевую переменную, которая будет указывать на направление самолёт туда и обратно
у меня самолет не летит туда и обратно, он либо летит до конца, разворачивается и не летит, либо вообще никуда не двигается

Написано более трёх лет назад
Вадим @MrDecoy Куратор тега JavaScript

Nora, ну смотрите, самолёт "летит" вправо за счёт инкремента(+1) к его позиции слева.
n = n + 1;

Соответственно, чтобы он летел влево, нужно.. отнимать от позиции слева.

Написано более трёх лет назад
Nora @noradrenaline Автор вопроса
Вадим, то есть надо так?

}else if n=n-1; plane.style.transform="scale(1,1)"; plane.style.left=n+"px";

или нет?
Написано более трёх лет назад
Вадим @MrDecoy Куратор тега JavaScript

Nora, в целом, да. Если истина, то прибавляет, если ложь, то отнимаем и меняем направление(трансформер)

Написано более трёх лет назад
Nora @noradrenaline Автор вопроса

Вадим, я пыталась так прописать и самолет вообще никуда не летит тогда(

Написано более трёх лет назад
Вадим @MrDecoy Куратор тега JavaScript

Nora, так сделайте конкретную демку, и чётко укажите что Вы сделали так и так, мысли такие и такие, но вот почему то не работает.
Иначе выглядит как "памагите, у мегя лапки".
А сейчас можно лишь гадать почему у Вас не работало.

Написано более трёх лет назад

Nora @noradrenaline Автор вопроса

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
<code lang="css">
    <style>
      img{
        position:absolute;
        width: 220px;
        transform: scale(-1,1);
      }
    </style>
</code>
  </head>
  <body>
    <img src="/img/самолет.png" id="plane" alt="">
<code lang="javascript">
    <script>
      let plane = document.getElementById("plane");
      let n = 0;
      function movePlane(){
        n = n + 1;
        plane.style.left = n+"px";
     }
      setInterval(movePlane, 10);
    }else if
        n=n-1;
        plane.style.transform="scale(1,1)";
        plane.style.left=n+"px";
    }
     setInterval(movePlane, 10);
    </script>
</code>
  </body>
</html>

Написано более трёх лет назад

Nora @noradrenaline Автор вопроса

вот ссылка, если что
noradrzo.beget.tech/dr.html

Написано более трёх лет назад
Алексей Дубровин @alekcena
Nora, У вас в коде есть конструкция else if - которая переводиться на русский иначе если.
1)Эта конструкция ставиться когда в коде есть конструкция if
2)У неё так же как и у if должны быть переданы параметры

if(true){} else if(true){} else{}

Просто нужно дебажить код.
С помощью конструкции сonsole.log(elem) - Где elem это то что вы хотите посмотреть в консоли.
Написано более трёх лет назад
Вадим @MrDecoy Куратор тега JavaScript

вот ссылка, если что
noradrzo.beget.tech/dr.html

И если Вы откроете консоль, то увидите, что там есть сообщение об ошибке в синтаксисе. То есть написанный код - нарушает правила языка и не является работающим.

Изучите основы

В частности:
Отладка
Функции
Условия

Написано более трёх лет назад

Nora @noradrenaline Автор вопроса

<script>
      let plane = document.getElementById("plane");
      let n = 0;
      function movePlane(){
      if (true){
        n = n + 1;
        plane.style.transform="scale(-1,1)";
        plane.style.left = n+"px";
        console.lof(n+1)
    }
      setInterval(movePlane, 10);
    if (false){
        n=n-1;
        plane.style.transform="scale(1,1)";
        plane.style.left=n+"px";
        console.lof(n-1)
    }
     setInterval(movePlane, 10);
     }
    </script>

Консоль показала, что ошибок нет, но самолет не летит
Не понимаю где ошибка

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

6 комментариев

Nora @noradrenaline Автор вопроса

Он летит задом обратно,а нужно, чтобы носом летел(

Написано более трёх лет назад

Azasemey @Azasemey

Странно, у меня разворачивается. Можешь попробовать так :

function movePlane(){     
            if(n < maxTravel  && direction === 0)  {    
            n++;
            plane.style.left = `${n}px`; 
            }else {
                direction = 1;
                n--
                plane.style.left = `${n}px`
                plane.classList.add('reverse')
            };
            if(n<0){
                direction = 0;
                plane.classList.remove('reverse') 
            }
          };
          setInterval(movePlane,   5);

Написано более трёх лет назад

Nora @noradrenaline Автор вопроса

то же самое, все равно задом летит обратно (

Написано более трёх лет назад

Azasemey @Azasemey

Мой косяк, я в html добавил класс новый, а сюда скинул только скриптовую часть

<code lang="css">
    <style>
          img{
            position:absolute;
            width: 220px;
            transform: scale(-1,1) ;
          }
          .reverse{
            transform: scale(1,1);
          }
        </style>
    </code>
      </head>
      <body>
        <img src="/img/самолет.png" id="plane" alt="">
    <code lang="javascript">
        <script>
          const plane = document.getElementById("plane");
          let n = 0;
          const maxTravel = window.outerWidth-plane.offsetWidth;
          let direction = 0;
          plane.style.left = "";
         function movePlane(){     
            if(n < maxTravel  && direction === 0)  {    
            n++;
            plane.style.left = `${n}px`; 
            }else {
                direction = 1;
                n--
                plane.style.left = `${n}px`
                plane.classList.add('reverse')
            };
            if(n<0){
                direction = 0;
                plane.classList.remove('reverse') 
            }
          };
          setInterval(movePlane,   5);
        </script>
    </code>
      </body>
    </html>

Написано более трёх лет назад

Nora @noradrenaline Автор вопроса

А как решить с помощью цикла через булевую переменную? через true и false

Написано более трёх лет назад
Azasemey @Azasemey

В самих if / else условия ставятся так чтобы было либо true либо false. Циклы мне кажется тут не сработают. Но может у меня просто знаний не хватает

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 2 часа назад
- 28 просмотров
0

ответов
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 8 часов назад
- 69 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 часа назад
- 521 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- вчера
- 68 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- вчера
- 40 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- вчера
- 34 просмотра
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- 20 нояб.
- 146 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- 20 нояб.
- 184 просмотра
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 86 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 53 просмотра
0

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Необходимо поменять пароль в WINDOWS

24 нояб. 2024, в 03:11

500 руб./за проект

Требуется консультация по UX-дизайну казино

24 нояб. 2024, в 01:35

5000 руб./за проект

Расширение для браузера

24 нояб. 2024, в 01:24

500 руб./за проект

Ну, для начала, Вы понимаете что делает код?
Вадим, да, но я не могу понять как задать цикл через булевую переменную, которая будет указывать на направление самолёт туда и обратно
у меня самолет не летит туда и обратно, он либо летит до конца, разворачивается и не летит, либо вообще никуда не двигается
Nora, ну смотрите, самолёт "летит" вправо за счёт инкремента(+1) к его позиции слева.
n = n + 1;

Соответственно, чтобы он летел влево, нужно.. отнимать от позиции слева.
Вадим, то есть надо так?

}else if n=n-1; plane.style.transform="scale(1,1)"; plane.style.left=n+"px";

или нет?
Nora, в целом, да. Если истина, то прибавляет, если ложь, то отнимаем и меняем направление(трансформер)
Вадим, я пыталась так прописать и самолет вообще никуда не летит тогда(
Nora, так сделайте конкретную демку, и чётко укажите что Вы сделали так и так, мысли такие и такие, но вот почему то не работает.
Иначе выглядит как "памагите, у мегя лапки".
А сейчас можно лишь гадать почему у Вас не работало.
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <code lang="css"> <style> img{ position:absolute; width: 220px; transform: scale(-1,1); } </style> </code> </head> <body> <img src="/img/самолет.png" id="plane" alt=""> <code lang="javascript"> <script> let plane = document.getElementById("plane"); let n = 0; function movePlane(){ n = n + 1; plane.style.left = n+"px"; } setInterval(movePlane, 10); }else if n=n-1; plane.style.transform="scale(1,1)"; plane.style.left=n+"px"; } setInterval(movePlane, 10); </script> </code> </body> </html>
вот ссылка, если что
noradrzo.beget.tech/dr.html
Nora, У вас в коде есть конструкция else if - которая переводиться на русский иначе если.
1)Эта конструкция ставиться когда в коде есть конструкция if
2)У неё так же как и у if должны быть переданы параметры

if(true){} else if(true){} else{}

Просто нужно дебажить код.
С помощью конструкции сonsole.log(elem) - Где elem это то что вы хотите посмотреть в консоли.
вот ссылка, если что
noradrzo.beget.tech/dr.html

И если Вы откроете консоль, то увидите, что там есть сообщение об ошибке в синтаксисе. То есть написанный код - нарушает правила языка и не является работающим.

Изучите основы

В частности:
Отладка
Функции
Условия
<script> let plane = document.getElementById("plane"); let n = 0; function movePlane(){ if (true){ n = n + 1; plane.style.transform="scale(-1,1)"; plane.style.left = n+"px"; console.lof(n+1) } setInterval(movePlane, 10); if (false){ n=n-1; plane.style.transform="scale(1,1)"; plane.style.left=n+"px"; console.lof(n-1) } setInterval(movePlane, 10); } </script>

Консоль показала, что ошибок нет, но самолет не летит
Не понимаю где ошибка

Answer 1 · 2021-07-06 10:14:26

<script>
          const plane = document.getElementById("plane");
          let n = 0;
          const maxTravel = window.outerWidth-plane.offsetWidth;
          let direction = 0;
          plane.style.left = "";
         function movePlane(){     
            if(n < maxTravel  && direction === 0)  {    
            n++;
            plane.style.left = `${n}px`; 
            plane.classList.remove('reverse') 
            }else {
                direction = 1;
                n--
                plane.style.left = `${n}px`
                plane.classList.add('reverse')
            };
            if(n<0){
                direction = 0;
            }
          };
          setInterval(movePlane,   5);
        </script>

честно не уверен что это правильное решение, но работает xD

Как сделать анимацию в js туда и обратно?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт