Рисование линии за объектом при использовании jQuery animate

Question

Рисование линии за объектом при использовании jQuery animate

0

У меня есть этот квадрат, который анимируется в случайную позицию каждые 5 секунд. То, что я сейчас хочу сделать, это нарисовать линию после квадрата, когда он движется, поэтому я могу найти, где он был и так далее. Любые идеи, как я должен это делать? Очень благодарен за помощь, спасибо!

<div id="square" style="width:50px; height:50px; background:blue; position:relative;"/>

<script>
$(document).ready(function(){
  setInterval(function(){

    var posx = Math.floor((Math.random()*1000)+1);
    var posy = Math.floor((Math.random()*1000)+1);

  $('#square').animate({ left:(posx*1), top: (posy*1) }, 3000);  

 },5000);
});

</script>

PeterP 18 дек. 2013, в 10:25

Источник

Теги:

javascript

jquery

function

jquery-animate

2 ответа

1

Вы можете использовать функцию шага для jQuery.animate().

$ (document).ready(function() {setInterval (function() {

var posx = Math.floor((Math.random()*1000)+1);
var posy = Math.floor((Math.random()*1000)+1);

  $('#square').animate({ left:(posx*1), top: (posy*1) }, {
      duration: 3000,
      step: function (now, tween) {
          var elemOffset = $(tween.elem).offset();
          $('<div class="a"></div>').css({top: elemOffset.top, left: elemOffset.left}).appendTo('body');
      }
  });

var posx = Math.floor((Math.random()*1000)+1);
var posy = Math.floor((Math.random()*1000)+1);

  $('#square').animate({ left:(posx*1), top: (posy*1) }, {
      duration: 3000,
      step: function (now, tween) {
          var elemOffset = $(tween.elem).offset();
          $('<div class="a"></div>').css({top: elemOffset.top, left: elemOffset.left}).appendTo('body');
      }
  });

},5000); }, 5000); });

Мой пример на jsfiddle:

http://jsfiddle.net/g7xGy/

kmakarychev 18 дек. 2013, в 08:29

Ещё вопросы

Magnus Engdal · Accepted Answer · 2013-12-18T07-02-00.000Z

Вот пример. Это некрасиво, но вы должны начать.

http://jsfiddle.net/9gcXN/

HTML

<canvas width="500" height="500" id="mycanvas" style="position: absolute; left: 0px; top: 0px;"></canvas>
<div id="square" style="width:50px; height:50px; background:blue; position: absolute;"></div>

JS

canvas = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');

$(document).ready(function() {
var posx,posy,lastx,lasty = 0;

    setInterval(function(){
    lastx = posx;
    lasty = posy;

    posx = Math.floor((Math.random()*100)+1);
    posy = Math.floor((Math.random()*100)+1);

        $('#square').animate({ left:(posx*1), top: (posy*1) }, 3000, function() {
        ctx.beginPath();
ctx.moveTo(lastx,lasty);
ctx.lineTo(posx,posy);
ctx.stroke();

        });  

},3000);
});

Надеюсь, поможет!

Спасибо, это очень поможет! @MagnusEngdal