动画原理——用户交互：移动物体
生活随笔
收集整理的這篇文章主要介紹了
动画原理——用户交互：移动物体
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
書籍名稱：HTML5-Animation-with-JavaScript
書籍源碼：https://github.com/lamberta/html5-animation1
1.物體內外的事件
判斷物體內外的條件是判斷鼠標位置和物體中心的位置。
01-mouse-events.html
<!doctype html> <html><head><meta charset="utf-8"><title>Mouse Events</title><link rel="stylesheet" href="../include/style.css"></head><body><header>Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a></header><canvas id="canvas" width="400" height="400"></canvas><textarea id="log"></textarea><aside>Move and press mouse inside and outside of circle.</aside><script src="../include/utils.js"></script><script src="./classes/ball.js"></script><script>window.onload = function () {var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),mouse = utils.captureMouse(canvas),log = document.getElementById('log'),ball = new Ball();ball.x = canvas.width / 2;ball.y = canvas.height / 2;ball.draw(context);canvas.addEventListener('mousedown', function () {if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {log.value = "in ball: mousedown";} else {log.value = "canvas: mousedown";}}, false);canvas.addEventListener('mousemove', function () {if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {log.value = "in ball: mousemove";} else {log.value = "canvas: mousemove";}}, false);canvas.addEventListener('mouseup', function () {if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {log.value = "in ball: mouseup";} else {log.value = "canvas: mouseup";}}, false);};</script></body> </html> View Code手機事件
02-touch-events.html
<!doctype html> <html><head><meta charset="utf-8"><title>Touch Events</title><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><link rel="stylesheet" href="../include/style.css"></head><body><header>Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a></header><canvas id="canvas" width="400" height="400"></canvas><textarea id="log"></textarea><aside>Press and move touch inside and outside of circle (touch-capable device required).</aside><script src="../include/utils.js"></script><script src="./classes/ball.js"></script><script>window.onload = function () {var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),touch = utils.captureTouch(canvas),log = document.getElementById('log'),ball = new Ball();ball.x = canvas.width / 2;ball.y = canvas.height / 2;ball.draw(context);canvas.addEventListener('touchstart', function (event) {event.preventDefault();if (utils.containsPoint(ball.getBounds(), touch.x, touch.y)) {log.value = "in ball: touchstart";} else {log.value = "canvas: touchstart";}}, false);canvas.addEventListener('touchend', function (event) {event.preventDefault();log.value = "canvas: touchend";}, false);canvas.addEventListener('touchmove', function (event) {event.preventDefault();if (utils.containsPoint(ball.getBounds(), touch.x, touch.y)) {log.value = "in ball: touchmove";} else {log.value = "canvas: touchmove";}}, false);};</script></body> </html> View Code2.拖動
將鼠標的位置設置給物體的位置
03-mouse-move-drag.html
View Code3.將拖動交互和運動效果合并
04-drag-and-move-1.html
<!doctype html> <html><head><meta charset="utf-8"><title>Drag and Move 1</title><link rel="stylesheet" href="../include/style.css"></head><body><header>Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a></header><canvas id="canvas" width="400" height="400"></canvas><aside>Press and drag circle with mouse.</aside><script src="../include/utils.js"></script><script src="./classes/ball.js"></script><script>window.onload = function () {var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),mouse = utils.captureMouse(canvas),ball = new Ball(),vx = Math.random() * 10 - 5,vy = -10,bounce = -0.7,gravity = 0.2,isMouseDown = false;ball.x = canvas.width / 2;ball.y = canvas.height / 2;canvas.addEventListener('mousedown', function () {if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {isMouseDown = true;canvas.addEventListener('mouseup', onMouseUp, false);canvas.addEventListener('mousemove', onMouseMove, false);}}, false);function onMouseUp () {isMouseDown = false;canvas.removeEventListener('mouseup', onMouseUp, false);canvas.removeEventListener('mousemove', onMouseMove, false);}function onMouseMove (event) {ball.x = mouse.x;ball.y = mouse.y;}function checkBoundaries () {var left = 0,right = canvas.width,top = 0,bottom = canvas.height;vy += gravity;ball.x += vx;ball.y += vy;//boundary detect and bounceif (ball.x + ball.radius > right) {ball.x = right - ball.radius;vx *= bounce;} else if (ball.x - ball.radius < left) {ball.x = left + ball.radius;vx *= bounce;}if (ball.y + ball.radius > bottom) {ball.y = bottom - ball.radius;vy *= bounce;} else if (ball.y - ball.radius < top) {ball.y = top + ball.radius;vy *= bounce;}}(function drawFrame () {window.requestAnimationFrame(drawFrame, canvas);context.clearRect(0, 0, canvas.width, canvas.height);if (!isMouseDown) {checkBoundaries();}ball.draw(context);}());};</script></body> </html> View Code05-drag-and-move-2.html
解決每次拖動速度不清零的問題
<!doctype html> <html><head><meta charset="utf-8"><title>Drag and Move 2</title><link rel="stylesheet" href="../include/style.css"></head><body><header>Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a></header><canvas id="canvas" width="400" height="400"></canvas><aside>Press and drag circle with mouse.</aside><script src="../include/utils.js"></script><script src="./classes/ball.js"></script><script>window.onload = function () {var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),mouse = utils.captureMouse(canvas),ball = new Ball(),vx = Math.random() * 10 - 5,vy = -10,bounce = -0.7,gravity = 0.2,isMouseDown = false;ball.x = canvas.width / 2;ball.y = canvas.height / 2;canvas.addEventListener('mousedown', function () {if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {isMouseDown = true;vx = vy = 0;canvas.addEventListener('mouseup', onMouseUp, false);canvas.addEventListener('mousemove', onMouseMove, false);}}, false);function onMouseUp () {isMouseDown = false;canvas.removeEventListener('mouseup', onMouseUp, false);canvas.removeEventListener('mousemove', onMouseMove, false);}function onMouseMove (event) {ball.x = mouse.x;ball.y = mouse.y;}function checkBoundaries () {var left = 0,right = canvas.width,top = 0,bottom = canvas.height;vy += gravity;ball.x += vx;ball.y += vy;//boundary detect and bounceif (ball.x + ball.radius > right) {ball.x = right - ball.radius;vx *= bounce;} else if (ball.x - ball.radius < left) {ball.x = left + ball.radius;vx *= bounce;}if (ball.y + ball.radius > bottom) {ball.y = bottom - ball.radius;vy *= bounce;} else if (ball.y - ball.radius < top) {ball.y = top + ball.radius;vy *= bounce;}}(function drawFrame () {window.requestAnimationFrame(drawFrame, canvas);context.clearRect(0, 0, canvas.width, canvas.height);if (!isMouseDown) {checkBoundaries();}ball.draw(context);}());};</script></body> </html> View Code4.拋
存儲物體的位置，兩幀中兩個物體的位移即為物體的初始速度。
<!doctype html> <html><head><meta charset="utf-8"><title>Throwing</title><link rel="stylesheet" href="../include/style.css"></head><body><header>Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a></header><canvas id="canvas" width="400" height="400"></canvas><aside>Press, drag, and throw circle with mouse.</aside><script src="../include/utils.js"></script><script src="./classes/ball.js"></script><script>window.onload = function () {var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),mouse = utils.captureMouse(canvas),ball = new Ball(),vx = Math.random() * 10 - 5,vy = -10,bounce = -0.7,gravity = 0.2,isMouseDown = false,oldX, oldY;ball.x = canvas.width / 2;ball.y = canvas.height / 2;canvas.addEventListener('mousedown', function () {if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {isMouseDown = true;oldX = ball.x;oldY = ball.y;canvas.addEventListener('mouseup', onMouseUp, false);canvas.addEventListener('mousemove', onMouseMove, false);}}, false);function onMouseUp () {isMouseDown = false;canvas.removeEventListener('mouseup', onMouseUp, false);canvas.removeEventListener('mousemove', onMouseMove, false);}function onMouseMove (event) {ball.x = mouse.x;ball.y = mouse.y;}function trackVelocity () {vx = ball.x - oldX;vy = ball.y - oldY;oldX = ball.x;oldY = ball.y;}function checkBoundaries () {var left = 0,right = canvas.width,top = 0,bottom = canvas.height;vy += gravity;ball.x += vx;ball.y += vy;//boundary detect and bounceif (ball.x + ball.radius > right) {ball.x = right - ball.radius;vx *= bounce;} else if (ball.x - ball.radius < left) {ball.x = left + ball.radius;vx *= bounce;}if (ball.y + ball.radius > bottom) {ball.y = bottom - ball.radius;vy *= bounce;} else if (ball.y - ball.radius < top) {ball.y = top + ball.radius;vy *= bounce;}}(function drawFrame () {window.requestAnimationFrame(drawFrame, canvas);context.clearRect(0, 0, canvas.width, canvas.height);if (isMouseDown) {trackVelocity();} else {checkBoundaries();}ball.draw(context);}());};</script></body> </html> View Code?
06-throwing.html
轉載于:https://www.cnblogs.com/winderby/p/4259596.html
總結
以上是生活随笔為你收集整理的动画原理——用户交互：移动物体的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： const变量初始化问题
- 下一篇： 工作中遇到的问题--使用注解进行增加删除