0

Есть блок, при нажатии он начинает двигаться: сначала прямо, а потом должен спускаться вниз по дуге. Я не понимаю, как сделать этот круговой спуск вниз. У меня получается, что координаты элемента меняются не по синусоиде, а просто линейно.

Пример кода ниже.

Вопросы:

  1. Как записать это все в одну анимацию?
  2. Как исправить задержки в тех местах, где не стоит delay?
  3. Как сделать нелинейное изменение положения элемента по осям Х и У?

$('.ring').click(function() {

  $(this).delay(1500).animate({
      left: 200,
    },
    800);
  $('.ring').delay(1500).animate({
      left: 400,
    },
    800);
  $('.ring').delay(1500).animate({
      left: 500,
    },
    800);
  $('.ring').animate({
      left: 580,
      top: 105,
    },
    800);
  $('.ring').animate({
      left: 500,
      top: 185,
    },
    500);
  $('.ring').animate({
      left: 400,
    },
    500);

});
.ring {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: red;
  left: 25px;
  top: 25px;
  box-shadow: 0 0 8px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="ring">
</div>

6
  • тут тупо математические формулы применять надо. Примерчик 18 фев 2016 в 17:47
  • знал бы я как ее встроить нашел вот эту: function circ(timeFraction) { return 1 - Math.sin(Math.acos(timeFraction)) } - подходит но как встроить не знаю
    – engenes
    18 фев 2016 в 17:49
  • используйте options.step в этом варианте jQuery.animate - api.jquery.com/animate/#animate-properties-options
    – user176262
    18 фев 2016 в 17:57
  • функция function circ возвращает одно значения, для движения вам необходимо два значения. 18 фев 2016 в 18:02
  • да мне бы понять как это все работать должно
    – engenes
    18 фев 2016 в 18:04

1 ответ 1

1

Пример нелинейной анимации, для того чтобы двигался объект нелинейно, координаты его должны меняться в соответствии с математическими формулами. В этом примере показано как функция возвращает два значения для перемещения по координате x и y. Не математик, поэтому формулу для необходимой вам траектории вам придется искать самому.

Пример 1

jQuery(function( $ ){
  
    
  
  $('#but').on('click', function(){
  
    
  var  div=$( "div" );
  
  div.css({
  	position: "fixed",
  });
  
  div.animate(
    {
      radius: 10000
    },
    {
      duration: 10000,
      step: function( r,fx ){
        $(this).css({
          top:Math.sin(r/500)*150+200,
          left:Math.cos(r/500)*150+200
        })
      }
    }
  );
    
  });
  
  

  
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="but" value="запуск!">
<div>Hello</div>

Пример 2

$(function(){


  
    $('#but2').on('click', function(){
    
      var  div=$( "div" );
  
  div.css({
  	position: "fixed",
  	left: "500px"
  });
  
  div.animate(
    {
      left: 0
    },
    {
      duration: 4000,
      step: function( st ){
        $(this).css({
          top:Math.sin(st/50)*50+200
        })
      }
    }
  );
    
    });



});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="but2" value="запуск 2!">
<div>Hello</div>

1
  • а можно ли сделать чтобы в первом примере он описал дугу?
    – engenes
    18 фев 2016 в 18:23

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.