Как сделать анимацию в 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

Вопрос задан более двух лет назад
301 просмотр

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

Средний
Эффект наложения блоков?
- 1 подписчик
- 10 часов назад
- 77 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 10 часов назад
- 44 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 10 часов назад
- 26 просмотров
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 1 подписчик
- 15 часов назад
- 53 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- вчера
- 67 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Существуют ли браузерные реализации WebView для AJAX и Fetch?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
JavaScript

Простой
Как обрабатывать пользовательский запрос больше не показывать конкретный попап?
- 1 подписчик
- 22 апр.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- 22 апр.
- 591 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Запуск установки приложения PWA при загрузке страницы?
- 2 подписчика
- 21 апр.
- 216 просмотров
0

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Создать бота

24 апр. 2024, в 09:32

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

Требуется выполнить анимацию в 3D

24 апр. 2024, в 09:27

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

Поднять сайт

24 апр. 2024, в 09:20

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

Ну, для начала, Вы понимаете что делает код?
Вадим, да, но я не могу понять как задать цикл через булевую переменную, которая будет указывать на направление самолёт туда и обратно
у меня самолет не летит туда и обратно, он либо летит до конца, разворачивается и не летит, либо вообще никуда не двигается
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 туда и обратно?

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

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

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