js运动

在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';

实际案例

相关推荐
大怪v3 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
西陵3 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda3 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
10年前端老司机4 小时前
Promise 常见面试题(持续更新中)
前端·javascript
WebDesign_Mu7 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
噢,我明白了7 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
学编程的小虎7 小时前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
做好一个小前端7 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
勤奋菲菲8 小时前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
前端开发呀9 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序