Javascript动画-数学问题_Javascript_Animation

Javascript动画-数学问题

javascript animation

Javascript动画-数学问题,javascript,animation,Javascript,Animation,我正在尝试制作一个平滑的javascript动画，使div在屏幕上从左900位置滑到550位置具有两个变量；地点和速度，我用地点来确定div在屏幕上的位置，用速度来决定速度为了让这张幻灯片流畅流畅，我试着让它的速度越来越慢，所以幻灯片开始得越来越快，越来越慢我不知道我是否在尝试做正确的事情，但基本上，我希望速度从100%开始，比如说50像素，每次都慢一个百分比速度百分比应等于我所在位置的数量所以这个位置从900开始，到550结束。速度应该从50开始，每一次都要慢一个百分比，最后是0，

我正在尝试制作一个平滑的javascript动画，使div在屏幕上从左900位置滑到550位置

具有两个变量；地点和速度，我用地点来确定div在屏幕上的位置，用速度来决定速度

为了让这张幻灯片流畅流畅，我试着让它的速度越来越慢，所以幻灯片开始得越来越快，越来越慢

我不知道我是否在尝试做正确的事情，但基本上，我希望速度从100%开始，比如说50像素，每次都慢一个百分比

速度百分比应等于我所在位置的数量

所以这个位置从900开始，到550结束。速度应该从50开始，每一次都要慢一个百分比，最后是0，因为位置在550结束

我如何设置它

我试过这个：

function doit(place, speed, proc) {
    var denne = document.getElementById("screen1");
    if (place > 550) {
        var speedproc = 100 - (place / 950 * 100); // (the reason that I'm using 950 here is because it should have a percentage to start from that isn't 0)
        var newspeed = speed - (speed / 100 * proc);
        speed = newspeed;
        proc += speedproc;
        place -= speed;
        denne.style.marginLeft = place + "px";
        setTimeout("doit(" + place + ", " + speed + ", " + proc + ")", 20);
    }
}

和机构：

<body onload='doit(900, 50, 0);'>

但它表现得很疯狂。。。我做错了什么？

总而言之，我会这样做以产生减速效果：

newspeed = speed*proc; //Now, proc is a number between 0 and 1.
//the closer proc is to 1, the smaller the decrease will be.
// when proc is 1 - there will be no decrease in speed

例如：

<body onload='doit(900, 50, 0.9);'>

为什么CSS3动画不行？那会更容易。。。。链接？你能创建一个JSFIDLE吗？同样，CSS动画可以通过浏览器进行硬件加速！只需谷歌CSS动画CSS动画：，你也可以只需谷歌它。没有被零除法。乘法运算符从左到右求值。明白了，我没注意到。数字0只是用来放置一个随机值。。我本可以设置1000，但这不会有任何区别，因为在添加denne.style.marginLeft=place+px；之前，它会计算speedproc和newspeed。。。还是什么？我的进程还是在添加之前计算的，所以0.9或1000000没有任何区别…是的，我看到的问题是你在每次迭代speedproc时都在重新计算进程。我在试图理解你提出的算法背后的逻辑。然后是proc+=speedproc；更奇怪的是。。。你已经在改变速度了，为什么还要改变进程呢？[可能双倍减少或增加？]