js运动

js运动

叶落秋明2023-11-03 14:08

在CSS3中，我们可以通过新增的过渡效果transition来实现运动效果,当然也可以通过js来模拟出来。

匀速运动

与之前的拖拽不同，拖拽是要跟踪鼠标的位置。而js运动效果主要通过定时器[setInterval]每次增加一个距离来模拟运动效果,但相同的是它们都需要开启定位[position]属性，改变[top]值、以及[left]值进行移动。

js 复制代码

oDiv.onclick = function() {
    clearInterval(timer); //每次点击按钮，清除前面的定时器
    timer = setInterval(function() {
        if (oDiv.offsetLeft > 600) {
            speed = -speed;
        }
        if (oDiv.offsetLeft == 600) {
            clearInterval(timer);
        } else {
            oDiv.style.left = oDiv.offsetLeft + speed + 'px';
        }
    }, 30);
}

定时器有开启，就必须要关闭，否则影响的就是内存。

clearInterval(timer)//每次点击按钮，清除前面的定时器如果没有这一句，在移动过程中的点击会再叠加一次。

上个例子中，我们并未限制它的移动范围，所以它会移出页面。将oDiv.offsetLeft + speed的范围限制在0到页面的可视区的宽度;当然这个碰撞的效果还增加的高度的属性。

在实际的应用中，我们很少用到匀速运动，主要因为它并没有什么变化。

缓冲运动

我们可以明显的感觉到它与匀速运动的区别。越靠近目标，速度越小，直到降至0为止；

将匀速运动中的speed变量赋值为600-oDiv.offsetLeft)/7其中600，就是我们的目标位置，而7就是一个比例。

定点抛物线

主要运用了数学中的公式： y = ax^2 + bx+c

我们假设x,y都为0;即抛物线在中心点，那么c就为0： y = ax^2 + bx 因为在页面中我们知道x，y的起始位置，以及定点位置；

然后自定义一个a抛物线开口大小最后就可以求得b的值；

js 复制代码

b=(y-ax^2)/x

最终位移的距离就是：

js 复制代码

oDiv1.style.left=current.x + x+'px';
oDiv1.style.top=current.y+(a*Math.pow(x,2)+b*x)+'px';

匀速运动

缓冲运动

定点抛物线

实际案例