оживить самолет через экран - PullRequest
Новая
       22

оживить самолет через экран

0 голосов
/ 18 марта 2019

Я пытаюсь анимировать плоскость поперек экрана - с левой стороны - обратно с правой стороны.Как я могу достичь этого в непрерывном цикле?Таким образом, он бесконечно летит по экрану, выходя из левой части и возвращаясь обратно с правой стороны.

Мой код: 

        html,
        body {
          width: 100%;
          height: 100%;
          margin: 0;
        }

        #animate { 
    position: relative; 
    background-image: url(https://www.turbotobias.dk/wp-content/uploads/2019/03/Fly-med-banner-TurboTobias-Graphics2.svg);
     width: 500px;
     height: 500px;
    }

     <div id="animate"></div>

$(document).ready(function(e) {
    width = "+=" + $(document).width();
    $("#animate").animate({
    left: width
  }, 5000, function() {
    // Animation complete.
  });
});

Фрагмент кода

Ответы [ 2 ]

3 голосов
/ 18 марта 2019

Вы можете создать цикл путем рекурсивного вызова метода, который выполняет анимацию. Приведенный ниже фрагмент начинается с перемещения плоскости от экрана вправо на ширину страницы. Затем он анимируется на отрицательную ширину изображения. Когда это сделано, он ждет 2 секунды, прежде чем рекурсивно вызвать тот же метод. 

function animatePlane ( $plane, pageWidth ) {
  $plane.css('left', pageWidth);
  $plane.animate({
    left: $plane.width() * -1
  }, 5000, function(){
    setTimeout(function(){
      animatePlane($plane, pageWidth);
    }, 2000);
  });
}

$(document).ready(function() {
  animatePlane($('#animate'), $(document).width());
});
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#animate {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://www.turbotobias.dk/wp-content/uploads/2019/03/Fly-med-banner-TurboTobias-Graphics2.svg);
  width: 663px;
  height: 168px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="animate"></div>

Решение только для CSS 

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#animate {
  position: absolute;
  top: 0;
  left: 100vw;
  background-image: url(https://www.turbotobias.dk/wp-content/uploads/2019/03/Fly-med-banner-TurboTobias-Graphics2.svg);
  width: 663px;
  height: 168px;
  
  animation: slideLeft 5s 2s infinite;
}

@keyframes slideLeft {
  from { left: 100vw; }
  to { transform: translateX(-200vw); }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="animate"></div>

Версия css, использующая ключевые кадры в сочетании со свойством animation для установки анимации. Он запускает изображение за пределами экрана, ожидает 2 секунды между анимациями и продолжительность составляет 5 секунд.

0 голосов
/ 18 марта 2019

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

Для анимации используйте ключевые кадры с левым сдвигом от 0 до 100% для обоих изображений. Затем сместите одно из изображений на ширину экрана минус ширина изображения, чтобы создать эффект обтекания.

Если вас не волнует эффект обтекания, вы можете просто изменить значение от -500px до 100%, и он будет проходить циклично с использованием только 1 плоскости. 

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.plane {
  position: absolute;
  background-image: url(https://www.turbotobias.dk/wp-content/uploads/2019/03/Fly-med-banner-TurboTobias-Graphics2.svg);
  width: 500px;
  height: 500px;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#plane1 {
  animation-name: fly;
}

#plane2 {
  animation-name: fly;
  margin-left: -100%;
}

@keyframes fly {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}
<div id="plane1" class="plane"></div>
<div id="plane2" class="plane"></div>
...