JavaScript 运动(加速度运动,弹性运动)
加速度运动(加速度不变的加速运动)
function addSpeed(dom){
var a = 5;
timer = setInterval(function(){
speed = speed + a;
dom.style.left = dom.offsetLeft + speed + 'px';
},30)
}
弹性运动

当一根弹簧链接小球弹性运动时过程
- (钉子左侧),小球运动方向向右,受到的力向右,加速度向右,做加速度减小的加速运动
- 当向右时(钉子右侧),小球运动方向向右,收到的力向左,加速度向左,做加速度增加的减速运动
- 当向左时(钉子右侧),小球运动方向向左,收到的力向左,加速度向左,做加速度减小的加速运动
- 当向左时(钉子左侧),小球运动方向向左,收到的力向右,加速度向右,做加速度增大的减速运动
也就是说当小球距离钉子(目标位置)越远,受到的加速度越大,随着距离不断减小,加速度也不断减小。在实现代码时通过判断物体距离目标点的距离来控制加速度的大小,也就是说我们可以使用a = target - dom.offsetleft;由于此时加速度太大可以除以一个数。
function moveStart(dom, targetPosition) {
clearInterval(timer);
var speed = 0; var a = 3;
timer = setInterval(function () {
a = (targetPosition - dom.offsetLeft) / 5;
speed = speed + a;
speed = speed * 0.8;if (Math.abs(speed) < 1 && Math.abs(targetPosition - dom.offsetLeft) <= 1) {
clearInterval(timer);
dom.style.left = targetPosition + "px";
} else {
dom.style.left = dom.offsetLeft + speed + "px";
}
}, 30)
}
而在真生的弹性运动中,由于受到摩擦力以及空气阻力,是有速度的能量损耗的。我们让摩擦力作用在速度的身上例如:speed * u;当speed减小到0并且距离目标位置小于1是,停止定时器。
JavaScript 运动(加速度运动,弹性运动)的更多相关文章
- JS运动基础(三) 弹性运动
加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...
- [Js]弹性运动
描述:像弹簧一样左右弹动,最后缓慢停下来 一.加减速运动 1.加速运动 var iSpeed=0;iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20;iSpeed- ...
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- js 运动函数篇(二) (加速度运动、弹性运动、重力场运动(多方向+碰撞检测+重力加速度+能量损失运动)拖拽运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写加速度运动.弹性运动.重力场运 ...
- javascript每日一练(十四)——弹性运动
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- 新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了
新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了 <!DOCTYPE html> <html> <hea ...
- jQuery插件之-----弹性运动
<!doctype html><html><head><meta charset="utf-8"><title>弹性运动 ...
- canvas链式弹性运动
上一课我学习了相对于鼠标为目标点的弹性运动,这次就学习了如何以上一个球为目标点的弹性运动,这次的函数比较复杂,首先分成了如下几个函数,首先定义了一个球的model,之后添加了4个球,在加载中调用了动画 ...
- JS学习之路,之弹性运动框架
弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复. var timer=null; var speed ...
随机推荐
- 小白的springboot之路(十三)、过滤器、监听器、拦截器
0.前言 过滤器.监听器.拦截器在实际开发中经常需要用到,下面我们来介绍一下spring boot中如何使用: 一.------ 过滤器 ----- 1.作用: 过滤器是客户端与服务器资源文件之间的一 ...
- Vue学习笔记Day1
1.vue初时 vue安装三种方式: 1:CDN引入 以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地. Staticfile CDN(国内) : https:// ...
- Redis中几个简单的概念:缓存穿透/击穿/雪崩,别再被吓唬了
Redis中几个“看似”高大上的概念,经常有人提到,某些好事者喜欢死扣概念,实战没多少,嘴巴里冒出来的全是高大上的名词,个人一向鄙视概念党,呵呵! 其实这几个概念:缓存穿透/缓存击穿/缓存雪崩,有一个 ...
- Cocos Creator 资源加载流程剖析【三】——Load部分
Load流程是整个资源加载管线的最后一棒,由Loader这个pipe负责(loader.js).通过Download流程拿到内容之后,需要对内容做一些"加载"处理.使得这些内容可以 ...
- jQuery插件 distpicker实现多次赋值
项目里需要实现省市区联动选择功能,使用了一个jQuery插件dispicker,记录一下使用过程中遇到的问题和解决办法. 需要要实现的功能就两个:打开modal框时设置地址,点击重置按钮时重置地址 原 ...
- 如何提高 PHP 代码的质量?第三:端到端 / 集成测试
在本系列的最后一部分,是时候设置端到端 / 集成测试环境,并确保我们已经准备好检查我们工作的质量. 在本系列的前几部分中,我们建立了一个构建工具,一些静态代码分析器,并开始编写单元测试. 为了使我们的 ...
- 通过Ajax的访问zuul的跨域问题解决方案
刚开始在使用jqueryajax跨域请求zuul网关时,在后台发现一直拿不到前台请求的json数据,而前台也一直拿不到后台的响应数据.打开浏览器调试程序发现,本身ajax的POST请求统一都变成了op ...
- 建造者模式-C#改良实现
区分网上已有的一般建造者模式实现,个人觉得实现太单一了,自己google查了一些好的实现,挑了其中比较适合的,做个笔记. # region 标准Builder模式实现 // 产品 class Tele ...
- 使用hexo、github Pages搭建博客
1. 安装node 如果本机已经有node,为避免安装出现问题,建议先升级到最新版.参考:https://juejin.im/post/5b9739d1e51d450e9f66ee3b 2. 安装he ...
- IDEA去除掉虚线,波浪线,和下划线实线的方法
初次安装使用IDEA,总是能看到导入代码后,出现很多的波浪线,下划线和虚线,这是IDEA给我们的一些提示和警告,但是有时候我们并不需要,反而会让人看着很不爽,这里简单记录一下自己的调整方法,供其他的小 ...