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

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

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 часа назад
- 33 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как сделать ширину блока по ширине контента?
- 1 подписчик
- 8 часов назад
- 45 просмотров
1

ответ
JavaScript

Простой
Как найти и сгруппировать элементы с одинаковым классом?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как скроллить определенный блок Div?
- 1 подписчик
- вчера
- 134 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как написать текст на окружности и посчитать точки?
- 1 подписчик
- 26 дек.
- 96 просмотров
0

ответов
JavaScript

Средний
Как остановить весь скрипт js при выполнении условия tampermonkey?
- 1 подписчик
- 26 дек.
- 82 просмотра
2

ответа
JavaScript

Средний
.stopPropagation() на самом деле не останавливает распространение события?
- 1 подписчик
- 26 дек.
- 124 просмотра
1

ответ
JavaScript

Простой
Нужно ли проверять импорт модуля js на повторную загрузку?
- 1 подписчик
- 26 дек.
- 59 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у меня не может найти URL_TO_BOT?
- 1 подписчик
- 25 дек.
- 57 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 25 дек.
- 64 просмотра
2

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

Исправить ошибки в консольном интерфейсе с применением C# и NET

28 дек. 2024, в 22:21

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

Сделать бота

28 дек. 2024, в 21:56

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

Доработка Битрикс

28 дек. 2024, в 18:50

1200 руб./в час

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

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

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

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