js怎么移动一个元素到另一个坐标？

Question

比如按每帧1px的速度从0,0移动到100,0可以x坐标每帧+1，如果要按照这种速度从0,0斜着移动到100,20怎么做呢？

Answer 1

css3 实现：

div{

animation: myfirst 5s;

}

@keyframes myfirst
{

0%   {left:0px; top:0px;}
100% {left:100px; top:20px;}

}

jquery实现：

$("#box").animate({left:"100px",top:"20px"});

那就自己实现吧：

function animate(sX,sY,eX,eY,time,call){
    this.currentX = sX,this.currentY = sY;
    this.speedX = (eX - sX)/(time*100),this.speedY = (eY - sY)/(time*100);
    
    this.start = function(){
        let vm =this;
        setTimeout(function(){
            if(vm.currentX < eX){
                vm.currentX += vm.speedX;
                vm.currentY += vm.speedY;
                call(vm.currentX,vm.currentY);
                vm.start();
            }
        },10)
        
    }
}
var callBack = function(x,y){
    console.log('x =>',x,'y =>',y)
}
var animate1 = new animate(0,0,200,100,5,callBack)
animate1.start()

部分结果如下：上面的只是实现过程，需要你自己加上dom操作

Answer 2

x每次移动1，y每次移动0.1不就好了

Answer 3

以前用 raf 来做， 可以计算出每帧x、y轴移动的距离， 5*根号下（1/16）px, 根号下（1/16）px。然后就是移动元素的绝对位置都加上这个就可以了。