Question

我试图创建一个非常简单的动画，在网站的某些地方爬行。随机运动看起来像这样：

$(document).ready(function(){
    bug();

});

function makeNewPosition(){

    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh,nw];    

}

function bug(){
    var newq = makeNewPosition();
    $('.bug').animate({ top: newq[0], left: newq[1] }, 2000, function(){
      bug();        
    });

};

这里是小提琴：http://jsfiddle.net/tgpvhLx7/

我正在寻找的是：如何在动画期间改变错误所以它实际上是＃34;看起来＆＃34;在＆＃34;他＆＃34;面前走路的时候？

更新

以下是我们如何扣除角度：

OldY = 100;
NewY = 50;

OldX = 100;
NewX = 50;

y = OldY - NewY;
x = OldX - NewX;
angle = Math.atan2(y, x);
angle *= 180/Math.PI
angle = Math.ceil(angle);

Answer 1

是的！它完成了！谢谢所有=）以下是我解决这个问题的方法：

$(document).ready(function () {
    bug();

});

function makeNewPosition() {

    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function bug() {
    var newq = makeNewPosition();

    var p = $('.bug').offset();

    OldY = p.top;
    NewY = newq[0];

    OldX = p.left;
    NewX = newq[1];

    y = OldY - NewY;
    x = OldX - NewX;
    angle = Math.atan2(y, x);
    angle *= 180 / Math.PI
    angle = Math.ceil(angle);

    $(".bug").rotate(angle);



    $('.bug').animate({
        top: newq[0],
        left: newq[1]
    }, 2000, function () {
        bug();
    });

};

小提琴：http://jsfiddle.net/Xw29r/3850/

JqueryRotate用于在找到初始坐标和最终坐标并且扣除角度后旋转div：

http://jqueryrotate.com/#examples

如何根据其总体方向转变bug？

1 个答案: