JavaScript的运动——弹性运动原理及案例

弹性运动在生活中类似考虑阻力的单摆运动，即在指定位置的左右摇摆最后停在指定位置

基础代码

html代码

<div></div>
<span></span>

css代码

div {width: 100px;height: 100px;background-color: steelblue;position: absolute;top: 0;left: 0;cursor: pointer;
}
span {width: 1px;height: 100px;background-color: black;position: absolute;top: 0;left: 300px;
}

js代码

var oDiv = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
oDiv.onclick = function () {startMove(this,300)
}
function startMove(dom, target) {clearInterval(timer);var speed = 0;var a = 3;var u = 0.8;var timer = setInterval(function () {a = (target - dom.offsetLeft) / 5;speed += a;speed *= u;if (Math.abs(speed) < 1 && Math.abs(target - dom.offsetLeft) < 1) {clearInterval(timer);dom.style.left = target + 'px';} else {dom.style.left = dom.offsetLeft + speed + 'px';console.log(speed, target - dom.offsetLeft);            }},30)
}

问题1：实现加速度减小的加速运动和加速度增大的减速运动

解决：由单摆运动的原理可知，随着小方块的左边线与指定位置的距离减小，加速度减小，由此可建立二者的关系，控制增大或者减小加速度（该思路与缓冲运动利用距离减小控制速度变化相同）

问题2：小方块要停留在指定位置

解决：首先需要增加一个摩擦系数u来消耗动能；其次分析小方块速度可为0的点，除了最终的指定位置速度为0，还有运动到两边加速度最大，速度为0的临界点，因此定时器清除的条件有两个，一是速度为0，二是小方块的左边线到达指定位置。

问题3：实际过程中，速度基本不可能正好为0，左边线也不能正好到达指定位置，因此虽然小方块看起来停住了，但是定时器并没有清除

解决：将判定条件改为速度与距离的绝对值均小于1，同时满足二者时，清理定时器。为了防止小方块并为到达指定位置，将其左边线设置为到指定位置

案例

代码功能：第一个方块上叠加着一个透明度为0.2的方块，移动鼠标到其他方块，则透明方块会做弹性移动到该方块，代码如下：

html代码

<ul><li class="ele">黑执事</li><li class="ele">火影忍者</li><li class="ele">海贼王</li><li class="ele">死神</li><li class="bg"></li>
</ul>

css代码

ul {width: 800px;height: 100px;padding: 0;position: relative;top: 100px;left: 100px;list-style: none;border: 1px solid black;
}
ul .ele {float: left;width: 198px;height: 98px;background-color: steelblue;border: 1px solid black;line-height: 98px;text-align: center;
}
ul .bg {width: 200px;height: 100px;background-color: black;opacity: 0.2;position: absolute;top: 0;left: 0;
}

js代码

var liList = document.getElementsByTagName('li');
var liBg = liList[liList.length - 1];
var timer = null;
for (var i = 0; i < liList.length - 1; i++) {liList[i].onmouseenter = function () {startMove(liBg, this.offsetLeft);}
}function startMove(dom, target) {clearInterval(timer);var speed = 0;var a = 3;var u = 0.8;timer = setInterval(function () {a = (target - dom.offsetLeft) / 5;speed += a;speed *= u;if (Math.abs(speed) < 1 && Math.abs(target - dom.offsetLeft) < 1) {clearInterval(timer);dom.style.left = target + 'px';console.log(1);} else {dom.style.left = dom.offsetLeft + speed + 'px';console.log(speed, target - dom.offsetLeft);            }},30)
}

JavaScript的运动——弹性运动原理及案例相关推荐

加速度运动/弹性运动/模拟重力场/拖拽运动
js弹性运动滑动的菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu ...
CoreXY运动结构工作原理
# 前言 CoreXY运动机构(传动原理示意图如图1所示)广泛应用于3D打印机.激光雕刻机等设备中,为了充分理解coreXY运动机构的原理,现做详细的分析,主要分析内容是基于coreXY结构建立两个电 ...
全球及中国弹性运动胶带行业发展展望及投资趋势预测报告2022-2027年
全球及中国弹性运动胶带行业发展展望及投资趋势预测报告2022-2027年详情内容请咨询鸿晟信合研究网! [全新修订]:2022年3月 [撰写单位]:鸿晟信合研究网 1 弹性运动胶带行业概述 1.1 ...
【翻译】CEDEC2013 BANDAI NAMCO 了解游戏格斗动画中的身体运动结构和原理
CEDEC搬运工程开始~ 这篇会议PPT的作者元梅幸司曾经就职在TECMO参与开发了死或生2,3[ DEAD OR ALIVE],忍龙「NINJA GAIDEN」后来加入NAMCO(现在是BANDA ...
图解通信原理与案例分析-31：量子通信，信息的传输载体由确定性的宏观世界走向不确定性的微观世界
前言: 所谓现代通信,就是用不同的物理信号承载二进制数据(信息),进行远程传输,从而达到信息交流的目的. 主要的物理信号有声波信号.光信号(一种特殊的电磁).电磁信号,他们都是利用这些信号在传播过程中 ...
图解通信原理与案例分析-19：3G CDMA码分多址通信技术原理---码分多址、OVSF正交扩频码、伪随机码序列
前言导读: 码分多址(CDMA)是第三代移动通信的核心技术,其基本思想是在相同的载波频段上,通过的不同的地址码来区分的不同用户.不同基站的数据. 3G CDMA与2G GSM通信相比,主要网络架构与通 ...
读书笔记之大型网站技术架构(核心原理与案例分析)
前言坚持看了十几天的书,终于完成了毕业后第一次静下心来,利用业务时间看书并做笔记的成就了.废话不多说,这回看的是一直很膜拜的李智慧大神写的大型网站技术架构-核心原理与案例分析. 简短的读后感极其推 ...
Python大数据综合应用：零基础入门机器学习、深度学习算法原理与案例
机器学习.深度学习算法原理与案例实现暨Python大数据综合应用高级研修班一.课程简介课程强调动手操作:内容以代码落地为主,以理论讲解为根,以公式推导为辅.共4天8节,讲解机器学习和深度学习的模型 ...

JavaScript的运动——弹性运动原理及案例

基础代码

案例

JavaScript的运动——弹性运动原理及案例相关推荐

最新文章

热门文章