如何从曲线获得x,y位置?

时间:2012-10-19 04:50:30

标签: javascript jquery animation

我想在下面实现这个动画:

enter image description here

我正在创建js小提琴,就像那样工作,但是当我想设置(x,y)的位置时我有堆栈。

var interval;
function moveit(left,top) {
    $("#obj").css("left",left+'px');
    $("#obj").css("top",top+'px');
}
$("#change").click(function(){
    var left = $("#left").val(); //posisi x
    var top = $("#top").val();  //posisi y
    var velocity= 1;

    interval = setInterval(function() {
        left = parseFloat(left) + parseFloat(velocity);
        top = parseFloat(top) + parseFloat(velocity);
        console.log('position x = ' + left);
        console.log('position y = ' + top);

        if(top >= 400 ) {
        clearInterval(interval);
        }

        moveit(left,top);
    },10);
});

$("#clear").click(function(){
clearInterval(interval);
});
​

这是我的小提琴http://jsfiddle.net/viyancs/MxuRP/1/

我的问题

  1. 如何通过生成代码来获取该曲线的x,y坐标?
  2. 也许你有另一个想法让这更好吗?
  3. 谢谢你

1 个答案:

答案 0 :(得分:3)

通过时间更改速度的y分量。

http://jsfiddle.net/MxuRP/2/

var interval;
function moveit(left,top) {
    $("#obj").css("left",left+'px');
    $("#obj").css("top",top+'px');
}
$("#change").click(function(){
    var left = $("#left").val(); //posisi x
    var top = $("#top").val();  //posisi y
    var velocityX = 1;
    var velocityY = 0;
    var accelerationY = 0.1;

    interval = setInterval(function() {
        left = parseFloat(left) + parseFloat(velocityX);
        velocityY += accelerationY;
        top = parseFloat(top) + parseFloat(velocityY);
        console.log('position x = ' + left);
        console.log('position y = ' + top);

        if(top >= 400 ) {
        clearInterval(interval);
        }

        moveit(left,top);
    },10);
});

$("#clear").click(function(){
clearInterval(interval);
});