javascript运动系列第六篇——轨迹和投掷
前面的话
一般地，不同的运动形式会产生不同的轨迹。但仅凭肉眼去识别运动轨迹，其实并不是很直观。因此，在页面中显示运动轨迹，是一个重要的问题。物体初始态时，受到外力大小不同，则初速度不同。如何在网页中模拟投掷效果，也需要解决。接下来，将详细介绍轨迹和投掷
运动轨迹
元素在运动过程中，不同的运动形式会产生不同的轨迹。如果不把轨迹表示出来，我们只能通过肉眼来区分运动形式。表示轨迹通常有两种方式：创建小元素和使用canvas
创建小元素
创建小元素原理上比较简单，但是性能较差。在元素移动时，创建一个2px*2px的小元素，并添加到页面上。以最简单的匀速运动为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.track{
width: 2px;
height: 2px;
background-color:#000;
position:absolute;
}
</style>
</head>
<body>
<button id="btn1">开始运动</button>
<button id="btn2">删除轨迹</button>
<button id="reset">还原</button>
<div id="test" style="height: 50px;width: 50px;background:pink;position:absolute;top:40px;left:0;"></div>
<script>
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
function move(obj,attr,target,step,fn){
//如果没有建立定时器对象，则在obj下建立定时器对象
if(!obj.timers){obj.timers = {};}
//清除定时器
clearInterval(obj.timers[attr]);
//声明当前值变量cur
var cur;
//判断步长step的正负值
step = parseInt(getCSS(obj,attr)) < target ? step : -step;
//开启定时器
obj.timers[attr] = setInterval(function(){
//获取样式当前值并赋值给cur
cur = parseFloat(getCSS(obj,attr));
////若步长设置值使得元素超过目标点时，将步长设置值更改为目标点值 - 当前值
if((cur + step - target)*step > 0){
step = target - cur;
}
//将合适的步长值赋值给元素的样式
obj.style[attr] = cur + step + 'px';
//设置轨迹
createTracks(obj.offsetLeft,obj.offsetTop)
//当元素到达目标点后，停止定时器
if(step == target - cur){
clearInterval(obj.timers[attr]);
obj.timers[attr] = 0;
fn && fn.call(obj);
}
},20);
}
function createTracks(x,y){
var ele = document.createElement('div');
ele.className = 'track';
ele.style.left = x + 'px';
ele.style.top = y + 'px';
document.body.appendChild(ele);
}
function deleteTracks(){
var eles = document.getElementsByTagName('div');
for(var i = 0 ;i < eles.length; i++){
if(eles[i].className == 'track'){
document.body.removeChild(eles[i]);
i--;
}
}
}
btn1.onclick = function(){
move(test,'left',300,10)
}
btn2.onclick = function(){
deleteTracks()
}
reset.onclick = function(){
history.go();
}
</script>
</body>
</html>
使用canvas
使用canvas也可以实现运动轨迹，且性能较好，只不过需要掌握canvas的一些基础知识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn1">开始运动</button>
<button id="btn2">删除轨迹</button>
<button id="reset">还原</button>
<div id="test" style="height: 50px;width: 50px;background:pink;position:absolute;top:40px;left:0;"></div>
<canvas id="drawing" style="position:absolute;left:0;top:0;z-index:-1"></canvas>
<script>
var context;
backupCanvas();
function backupCanvas(){
var drawing = document.getElementById('drawing');
drawing.setAttribute('width',document.documentElement.clientWidth);
drawing.setAttribute('height',document.documentElement.clientHeight);
if(drawing.getContext){
context = drawing.getContext('2d');
context.beginPath();
context.moveTo(test.offsetLeft,test.offsetTop);
}
}
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
function move(obj,attr,target,step,fn){
//如果没有建立定时器对象，则在obj下建立定时器对象
if(!obj.timers){obj.timers = {};}
//清除定时器
clearInterval(obj.timers[attr]);
//声明当前值变量cur
var cur;
//判断步长step的正负值
step = parseInt(getCSS(obj,attr)) < target ? step : -step;
//开启定时器
obj.timers[attr] = setInterval(function(){
//获取样式当前值并赋值给cur
cur = parseFloat(getCSS(obj,attr));
////若步长设置值使得元素超过目标点时，将步长设置值更改为目标点值 - 当前值
if((cur + step - target)*step > 0){
step = target - cur;
}
//将合适的步长值赋值给元素的样式
obj.style[attr] = cur + step + 'px';
createCanvasTracks(obj.offsetLeft,obj.offsetTop);
//当元素到达目标点后，停止定时器
if(step == target - cur){
clearInterval(obj.timers[attr]);
obj.timers[attr] = 0;
fn && fn.call(obj);
}
},20);
}
function createCanvasTracks(x,y){
context.lineTo(x,y);
context.stroke();
}
function deleteCanvasTracks(){
drawing.height = drawing.height;
}
btn1.onclick = function(){
move(test,'left',300,10)
}
btn2.onclick = function(){
deleteCanvasTracks()
}
reset.onclick = function(){
history.go();
}
</script>
</body>
</html>
拖拽轨迹
物体在拖拽的时候，同样也存在着拖拽轨迹。由于拖拽的运动形式不固定，因此轨迹也不固定
同样地，拖拽轨迹也有创建小元素和使用canvas两种方法
【创建小元素】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.track{
width: 2px;
height: 2px;
background-color:#000;
position:absolute;
}
</style>
</head>
<body>
<button id="btn">删除轨迹</button>
<button id="reset">还原</button>
<div id="test" style="height: 50px;width: 50px;background:pink;position:absolute;top:40px;left:0;"></div> <script>
function createTracks(x,y){
var ele = document.createElement('div');
ele.className = 'track';
ele.style.left = x + 'px';
ele.style.top = y + 'px';
document.body.appendChild(ele);
}
function deleteTracks(){
var eles = document.getElementsByTagName('div');
for(var i = 0 ;i < eles.length; i++){
if(eles[i].className == 'track'){
document.body.removeChild(eles[i]);
i--;
}
}
}
btn.onclick = function(){
deleteTracks()
}
reset.onclick = function(){
history.go();
}
test.onmousedown = function(e){
e = e || event;
//获取元素距离定位父级的x轴及y轴距离
var x0 = this.offsetLeft;
var y0 = this.offsetTop;
//获取此时鼠标距离视口左上角的x轴及y轴距离
var x1 = e.clientX;
var y1 = e.clientY;
document.onmousemove = function(e){
e = e || event;
//获取此时鼠标距离视口左上角的x轴及y轴距离
x2 = e.clientX;
y2 = e.clientY;
//计算此时元素应该距离视口左上角的x轴及y轴距离
var X = x0 + (x2 - x1);
var Y = y0 + (y2 - y1);
//将X和Y的值赋给left和top，使元素移动到相应位置
test.style.left = X + 'px';
test.style.top = Y + 'px';
//创建轨迹
createTracks(X,Y);
} document.onmouseup = function(e){
//当鼠标抬起时，拖拽结束，则将onmousemove赋值为null即可
document.onmousemove = null;
//释放全局捕获
if(test.releaseCapture){
test.releaseCapture();
}
}
//阻止默认行为
return false;
//IE8-浏览器阻止默认行为
if(test.setCapture){
test.setCapture();
}
}
</script>
</body>
</html>
【使用canvas】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">删除轨迹</button>
<button id="reset">还原</button>
<div id="test" style="height: 50px;width: 50px;background:pink;position:absolute;top:40px;left:0;"></div>
<canvas id="drawing" style="position:absolute;left:0;top:0;z-index:-1"></canvas>
<script>
var context;
backupCanvas();
function backupCanvas(){
var drawing = document.getElementById('drawing');
drawing.setAttribute('width',document.documentElement.clientWidth);
drawing.setAttribute('height',document.documentElement.clientHeight);
if(drawing.getContext){
context = drawing.getContext('2d');
context.beginPath();
context.moveTo(test.offsetLeft,test.offsetTop);
}
}
function createCanvasTracks(x,y){
context.lineTo(x,y);
context.stroke();
}
function deleteCanvasTracks(){
drawing.height = drawing.height;
}
btn.onclick = function(){
deleteCanvasTracks()
}
reset.onclick = function(){
history.go();
}
test.onmousedown = function(e){
e = e || event;
//获取元素距离定位父级的x轴及y轴距离
var x0 = this.offsetLeft;
var y0 = this.offsetTop;
//获取此时鼠标距离视口左上角的x轴及y轴距离
var x1 = e.clientX;
var y1 = e.clientY;
document.onmousemove = function(e){
e = e || event;
//获取此时鼠标距离视口左上角的x轴及y轴距离
x2 = e.clientX;
y2 = e.clientY;
//计算此时元素应该距离视口左上角的x轴及y轴距离
var X = x0 + (x2 - x1);
var Y = y0 + (y2 - y1);
//将X和Y的值赋给left和top，使元素移动到相应位置
test.style.left = X + 'px';
test.style.top = Y + 'px';
//创建轨迹
createCanvasTracks(X,Y);
} document.onmouseup = function(e){
//当鼠标抬起时，拖拽结束，则将onmousemove赋值为null即可
document.onmousemove = null;
//释放全局捕获
if(test.releaseCapture){
test.releaseCapture();
}
}
//阻止默认行为
return false;
//IE8-浏览器阻止默认行为
if(test.setCapture){
test.setCapture();
}
}
</script>
</body>
</html>
投掷
如何使用javascript模拟出投掷的效果呢？javascript里面并没有力的概念。我们可以使用投掷速度为基准，当投掷速度快时，元素的速度也快；投掷速度慢时，元素速度同样也慢
问题来了，投掷速度如何确定。在javascript中模拟运动通常是使用一定频率的定时器来实现，投掷速度也同样如此。速度就相当于是一定时间的位移(或称为步长)。在定时器频率确定的情况下同，位移的确定其实就是找起始点和结束点这两个点的坐标位置
拖拽共涉及到三个鼠标事件：mousedown、mousemove和mouseup。结束点的位置是mouseup事件的鼠标位置(注意：mouseup事件的鼠标位置和最后一次mousemove事件的鼠标位置是相同的)，而开始点的位置可以是mousemove事件倒数第二次的鼠标位置。这两个位置是拖拽运动的最后两个运动位置，通过确定他们就可以确定投掷步长了
下面以匀速运动为例，来进行实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="reset">还原</button>
<div id="test" style="height: 50px;width: 50px;background:pink;position:absolute;top:40px;left:0;"></div>
<script>
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
function move(obj,attr,target,step,fn){
//如果没有建立定时器对象，则在obj下建立定时器对象
if(!obj.timers){obj.timers = {};}
//清除定时器
clearInterval(obj.timers[attr]);
//声明当前值变量cur
var cur;
//判断步长step的正负值
step = parseInt(getCSS(obj,attr)) < target ? step : -step;
//开启定时器
obj.timers[attr] = setInterval(function(){
//获取样式当前值并赋值给cur
cur = parseFloat(getCSS(obj,attr));
//若步长设置值使得元素超过目标点时，将步长设置值更改为目标点值 - 当前值
if((cur + step - target)*step > 0){
step = target - cur;
}
//将合适的步长值赋值给元素的样式
obj.style[attr] = cur + step + 'px';
//当元素到达目标点后，停止定时器
if(step == target - cur){
clearInterval(obj.timers[attr]);
obj.timers[attr] = 0;
fn && fn.call(obj);
}
},30);
}
reset.onclick = function(){
history.go();
}
test.onmousedown = function(e){
e = e || event;
//声明投掷步长值
var stepX,stepY;
//声明上一次mousemove事件的坐标位置
var lastX2 = e.clientX;
var lastY2 = e.clientY;
//获取元素距离定位父级的x轴及y轴距离
var x0 = this.offsetLeft;
var y0 = this.offsetTop;
//获取此时鼠标距离视口左上角的x轴及y轴距离
var x1 = e.clientX;
var y1 = e.clientY;
document.onmousemove = function(e){
e = e || event;
//获取此时鼠标距离视口左上角的x轴及y轴距离
var x2 = e.clientX;
var y2 = e.clientY;
stepX = x2 - lastX2;
stepY = y2 - lastY2;
lastX2 = e.clientX;
lastY2 = e.clientY;
//计算此时元素应该距离视口左上角的x轴及y轴距离
var X = x0 + (x2 - x1);
var Y = y0 + (y2 - y1);
//将X和Y的值赋给left和top，使元素移动到相应位置
test.style.left = X + 'px';
test.style.top = Y + 'px';
}
document.onmouseup = function(e){
e = e || event;
var maxHeight = document.documentElement.clientHeight - test.offsetHeight;
var maxWidth = document.documentElement.clientWidth - test.offsetWidth;
//以设置的投掷速度来进行匀速运动
//向右投掷
if(stepX > 0){
move(test,'left',maxWidth,stepX);
//向左投掷
}else{
move(test,'left',0,stepX);
}
//向下投掷
if(stepY > 0){
move(test,'top',maxHeight,stepY);
//向上投掷
}else{
move(test,'top',0,stepY);
}
//当鼠标抬起时，拖拽结束，则将onmousemove赋值为null即可
document.onmousemove = null;
//释放全局捕获
if(test.releaseCapture){
test.releaseCapture();
}
}
//阻止默认行为
return false;
//IE8-浏览器阻止默认行为
if(test.setCapture){
test.setCapture();
}
}
</script>
</body>
</html>
javascript运动系列第六篇——轨迹和投掷的更多相关文章
- javascript运动系列第八篇——碰壁运动
× 目录 [1]匀速碰壁 [2]自由落体 [3]投掷碰壁[4]拖拽碰壁 前面的话 碰撞运动可能是运动系列里面比较复杂的运动了.碰撞可以分为碰壁和互碰两种形式,而碰撞前后的运动形式也可以分为变速和匀速两 ...
- javascript运动系列第四篇——抖动
× 目录 [1]原理介绍 [2]代码实现 [3]实例应用 前面的话 在运动系列中,前面分别介绍了匀速运动.变速运动和曲线运动.下面介绍一种特殊的运动形式——抖动 原理介绍 抖动其实是往复运动的一种特殊 ...
- javascript运动系列第三篇——曲线运动
× 目录 [1]圆周运动[2]三维圆周 [3]钟摆运动 [4]抛物线[5]流体运动 前面的话 上一篇介绍了变速运动,但只实现了直线运动.如果元素的left和top同时运动,并遵循不同的曲线公式,则会进 ...
- javascript运动系列第七篇——鼠标跟随运动
× 目录 [1]眼球转动 [2]苹果菜单[3]方向跟随 前面的话 运动除了直线运动和曲线运动两种运动形式外,还有一种运动形式是鼠标跟随运动,而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算 ...
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- JavaScript 专题系列第六篇，讲解深浅拷贝的技巧和以及实现深浅拷贝的思路
拷贝也是面试经典呐! 数组的浅拷贝 如果是数组,我们可以利用数组的一些方法比如:slice.concat 返回一个新数组的特性来实现拷贝. 比如: var arr = ['old', 1, tru ...
- javascript面向对象系列第三篇——实现继承的3种形式
× 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...
- 深入理解javascript函数系列第三篇——属性和方法
× 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...
- 深入理解javascript作用域系列第四篇——块作用域
× 目录 [1]let [2]const [3]try 前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用 ...
随机推荐
- [Leetcode] Number of Digit Ones
Given an integer n, count the total number of digit 1 appearing in all non-negative integers less th ...
- SSH私钥取消密码（passphrase ）
1. 使用openssl命令去掉私钥的密码 openssl rsa -in ~/.ssh/id_rsa -out ~/.ssh/id_rsa_new 2. 备份旧私钥 mv ~/.ssh/id_rsa ...
- 分布式数据库的四分结构设计 BCDE
首先,对关系型数据库的表进行四种分类定义: Basis 根基,Content 内容, Description 说明, Extension 扩展. Basis:Baisis 表是唯一的,为了实现标准而得 ...
- c和oc小知识
1.const const 修饰了*p1 / *p2 const int * p1=&age; int const * p2=&age;//和上面的意义一样 ,换句话说就是 在 “ * ...
- MongoDB常用操作命令大全
成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操作.输入help可以看到基本操作命令,只是MongoDB没有创建数据库的命令,但有类似的命令 如:如果你想创建一个 ...
- STM32之DAC君
如花说得好:呃呃呃.是俗话说得好:有了ADC,怎可少了DAC..我觉得奇怪.今天我开头就直奔主题了.我想了想,总结了一句话:孙悟空纵然有七十二变.无论是变成猫也好,变成狗也罢.始终还是会变回他本身.所 ...
- JAVA基础整理-集合篇（一）
集合作为JAVA的基础知识,本来感觉自己理解的很清楚了,但是在最近的一次面试中还是答得不尽如人意!再次做一下整理,以便加深理解以及随时查阅. 首先,java.util包中三个重要的接口及特点:List ...
- PMP备考_第六章_项目时间管理
项目时间管理 前言 项目时间管理是项目管理中最难的一个环节,与个人时间管理类似,团体的效率如果管理不当,是低于个人效率的,为了管理好时间,从预估,执行到反馈均需要严格的分析和处理.如果制定的计划是无法 ...
- PMP备考_第五章_项目范围管理_实践思考
项目范围管理 前言 今天学习项目范围管理的内容,深切的感受到了原单位在项目管理方面存在的问题,今天在这里做一个总结,既相当于对项目范围的一个学习整理,也相当于自己对项目实践过程中存在问题的一个思考. ...
- java线程学习
线程概念 当我问别人什么是线程的时候,别人给我讲了一大堆线程如何创建,如何使用以及若干线程的高深问题,其实作为一个资深菜鸟,我就想问问,什么是线程而已,找了书中的一些概念总结了一下,多线程与操作系统中 ...