通过JavaScript实现移动物体代码
交互动画的一个主要目标是创建出流畅的用户体验,其中大多数的用户交互都是通过鼠标和触摸屏实现的。
在这篇博文中,我想分享一些JS对于物体移动的常见用法,包括拖拽和投掷效果。
一. 使用鼠标事件
可以将一个鼠标单击事件分解成两个事件:鼠标按下事件和按键弹起事件。通常情况下这两个事件是同时发生的。不过,有时鼠标按下后,鼠标还会移动一段时间才弹起,这种操作称为拖曳,即按下、移动、在释放。
在canvas动画中,鼠标事件只能被HTML DOM树上的canvas元素所捕获,因此,我们需要手动计算出鼠标事件在canvas上的发生位置,并判断出它是否发生在哪个绘制到canvas的物体 上。需要关注的鼠标事件有:mousedown、mousemove和mouseup。具体细节可参考我的相关博文《JavaScript动画详解(一) —— 循环与事件监听》。
二. 使用触摸事件
随着触摸屏设备的流行,我们很可能需要在动画中捕捉用户的触摸事件。虽然触摸屏与鼠标是不同的设备,但幸运的是,在DOM树上捕捉触摸事件与捕捉鼠标事件的差别不大。
与鼠标事件mousedown、mousemove和mouseup相对应的触摸事件分别是touchstart、touchend与touchmove。
使用手指与鼠标的一个比较大的区别在于,鼠标始终出现在屏幕上,而手指却不是一直处于触摸状态。常见的做法是,引入自定义属性isPressed,用来告诉我们屏幕上是否有手指在触摸。具体细节可参考我的相关博文《JavaScript动画详解(一) —— 循环与事件监听》。
三. 拖拽事件
拖拽事件包含了三个子事件:鼠标按下、移动、释放。通过不断更新物体的坐标位置使其追随鼠标指针的位置,就可以实现在canvas元素上拖拽物体。 另外还需要一个自定义属性isPressed来标示当前鼠标是否按下,默认为false表示鼠标为弹起状态。实现代码包含以下过程:
1 . 捕捉mousedown事件,判断当前鼠标是否在物体内。当鼠标在物体内按下时,设置isPressed = true;
2 . 捕捉mousemove事件,在处理程序内判断当isPressed = true时,通过不断更新物体的坐标位置使其追随鼠标指针的位置来模拟出鼠标拖拽效果;
3 . 捕捉mouseup事件,将isPressed设置为false;
HTML代码如下:
<canvas id="canvas" width="400" height="400"></canvas>
JavaScript代码如下:
// 创建画球函数 function Ball() { this.x = 0; this.y = 0; this.radius = 20; this.fillStyle = "#f85455"; this.draw = function(cxt) { cxt.fillStyle = this.fillStyle; cxt.beginPath(); cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true); cxt.closePath(); cxt.fill(); } } // 获得当前鼠标位置 function getMouse(ev) { var mouse = { x: 0, y: 0 }; var event = ev || window.event; if(event.pageX || event.pageY) { x = event.x; y = event.y; }else { var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; x = event.clientX + scrollLeft; y = event.clientY + scrollTop; } mouse.x = x; mouse.y = y; return mouse; } var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), ball = new Ball(), mouse = {x: 0, y: 0}, isPressed = false; ball.x = 20; ball.y = 20; // 渲染小球 ball.draw(context); // 小球拖拽事件 canvas.addEventListener("mousedown", mouseDown, false); canvas.addEventListener("mousemove", mouseMove, false); canvas.addEventListener("mouseup", mouseUp, false); function mouseDown(ev) { // 判断当前鼠标是否在小球内 mouse = getMouse(ev); if(Math.pow(mouse.x - ball.x, 2) + Math.pow(mouse.y - ball.y, 2) <= Math.pow(ball.radius, 2)) { isPressed = true; } } function mouseMove(ev) { if(isPressed) { mouse = getMouse(ev); ball.x = mouse.x; ball.y = mouse.y; context.clearRect(0, 0, canvas.width, canvas.height); ball.draw(context); } } function mouseUp(ev) { // 标示鼠标弹起事件 isPressed = false; }
但是,这个例子是有bug的!很快你就能发现,在拖拽的时候,小球的中心位置都在鼠标位置上,特别是当鼠标单击小球边缘时,会看见小球的中心点突然就跳动到了鼠标光标的位置上了。显然,这显得有点唐突。
我们可以稍作改良:
在鼠标按下的时候记录当前鼠标位置与小球中心点位置的偏移量;
// 记录鼠标按下时,鼠标与小球圆心的偏移量 dx = mouse.x - ball.x; dy = mouse.y - ball.y;
在鼠标移动时,用鼠标的当前位置减去鼠标按下时记录的偏移量
ball.x = mouse.x - dx; ball.y = mouse.y - dy;
四. 投掷事件
在动画中如何表现投掷呢?用鼠标选中一个物体,拖拽着它向某个方向移动,松开鼠标后,物体沿着拖拽的方向继续移动。
在投掷物体时,必须在拖拽物体的过程中计算物体的速度向量,并在释放物体时将这个速度向量赋给物体。实际上,计算拖拽时物体的速度向量的过程,恰好 与对物体应用速度向量的过程相反。在对物体应用速度向量时,将速度追加到物体原来所在的位置上,从而计算出物体的新位置,这个公式可以写成:旧的位置 + 速度向量 = 新的位置,即速度向量 = 新的位置 – 旧的位置。
为了实现投掷行为,需要对前面的代码做一些改动。首先,检查鼠标是否按下,如果按下,用oldX和oldY变量保存小球旧的x、y坐标位置,并更新小球的拖拽速度。
具体JavaScript代码实现如下:
// 创建画球函数 function Ball() { this.x = 0; this.y = 0; this.radius = 20; this.fillStyle = "#f85455"; this.draw = function(cxt) { cxt.fillStyle = this.fillStyle; cxt.beginPath(); cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true); cxt.closePath(); cxt.fill(); } } // 获得当前鼠标位置 function getMouse(ev) { var mouse = { x: 0, y: 0 }; var event = ev || window.event; if(event.pageX || event.pageY) { x = event.x; y = event.y; }else { var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; x = event.clientX + scrollLeft; y = event.clientY + scrollTop; } mouse.x = x; mouse.y = y; return mouse; } var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), ball = new Ball(), mouse = {x: 0, y: 0}, isPressed = false, oldX = 0, oldY = 0, currentX = 0, currentY = 0, vx = 0, vy = 0; ball.x = 200; ball.y = 200; // 声明鼠标按下时,鼠标与小球圆心的距离 var dx = 0, dy = 0; // 渲染小球 ball.draw(context); // 小球拖拽事件 canvas.addEventListener("mousedown", mouseDown, false); canvas.addEventListener("mousemove", mouseMove, false); canvas.addEventListener("mouseup", mouseUp, false); function mouseDown(ev) { // 判断当前鼠标是否在小球内 mouse = getMouse(ev); if(Math.pow(mouse.x - ball.x, 2) + Math.pow(mouse.y - ball.y, 2) <= Math.pow(ball.radius, 2)) { isPressed = true; // 记录鼠标按下时,鼠标与小球圆心的距离 dx = mouse.x - ball.x; dy = mouse.y - ball.y; // 获得小球拖拽前的位置 mouse = getMouse(ev); oldX = mouse.x; oldY = mouse.y; } } function mouseMove(ev) { if(isPressed) { mouse = getMouse(ev); ball.x = mouse.x - dx; ball.y = mouse.y - dy; context.clearRect(0, 0, canvas.width, canvas.height); ball.draw(context); } } function mouseUp(ev) { // 标示鼠标弹起事件 isPressed = false; // 把鼠标与圆心的距离位置恢复初始值 dx = 0; dy = 0; // 获得小球拖拽后的位置 mouse = getMouse(ev); currentX = mouse.x; currentY = mouse.y; // 更新速度向量:速度向量 = 新的位置 - 旧的位置 vx = (currentX - oldX) * 0.05; vy = (currentY - oldY) * 0.05; drawFrame(); } // 缓动动画 function drawFrame() { animRequest = window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); if(ball.x >= canvas.width - 30 || ball.x <= 30 || ball.y >= canvas.height - 30 || ball.y <= 30) { window.cancelAnimationFrame(animRequest); } ball.x += vx; ball.y += vy; ball.draw(context); }
这个Demo的边界判断还有一些bug,过些日子再修复。
五. 总结
物体移动事件可以有很多总运动形式,但是都可以分解为三个单独的事件来控制:按下、移动、释放,在鼠标事件中分别对应的是mousedown、 mousemove和mouseup,在触摸事件中分别对应的是touchstart、touchmove和touchend。通过不断更新物体的坐标位 置使其追随鼠标指针的位置,就可以实现在canvas元素上拖拽和投掷的效果。
以上是通过JavaScript实现移动物体代码的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

用法:在JavaScript中,insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数:要插入的新节点和参考节点(即新节点将要被插入的位置的节点)。
