动画原理——用户交互：移动物体

书籍名称：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 Code

2.拖动

将鼠标的位置设置给物体的位置

03-mouse-move-drag.html

View Code

3.将拖动交互和运动效果合并

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 Code

05-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 Code

4.抛

存储物体的位置，两帧中两个物体的位移即为物体的初始速度。

<!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

动画原理——用户交互：移动物体相关推荐

ios动画原理 modelLayer和presentationLayer以及点击交互
ios动画原理 modelLayer和presentationLayer以及点击交互我们知道,iOS的动画,和其对应的layer有关. 之前在开发的过程中碰到一个问题,那就是,在一个视图的动画过程中 ...
VRML---第五章(动画流程和交互功能)
动画是物体随时间变化的动态效果. 实现动画的基本方法:由时间传感器控制动画的时钟,然后将时间控制参数作为事件传送给各种插补器节点,插补器依据事先设计好的时间关键点和动画关键值,在浏览器渲染时形成连续变 ...
《交互式程序设计第2版》一3.5 捕获简单用户交互行为
本节书摘来华章计算机<交互式程序设计第2版>一书中的第3章 ,第3.5节,Joshua Noble 著毛顺兵张婷婷陈宇沈鑫任灿江译更多章节内容可以访问云栖社区"华章 ...
androidtv item获取焦点设置动画和背景_动画技术的交互应用所作的动画
动画技术的交互应用所作的动画作者: 周益铭本交互设计的实现主要运用了<The Nature of Code><代码本色-Daniel Shiffman>中向量(Vector ...
融入动画技术的交互应用优秀作业推荐
观看本学期其他同学的作业中,我学习到许多,看到了很多有意思的交互应用,通过创意,交互体验,技术的丰富性.深入度.难度三方面进行评价,选出我认为最优秀的三个作品: 1.processing-洇作者:张 ...
Python基础——变量、常量、数字类型、四列表list、五字典dict、六布尔bool、垃圾回收机制、用户交互、运算符、流程控制
文章目录变量一引入一.什么是变量? 二.为什么要有变量? 三.怎么使用变量(先定义.后使用) 3.1.变量的定义与使用 3.2.变量名的命名规范 3.3.变量名的命名风格 3.4.变量值的三大 ...
游戏动画中有哪些动画原理？
如果您正在学习游戏或对游戏制作感兴趣,那么您对游戏制作的哪些部分感兴趣?游戏设计(游戏计划)?角色设计?动画?显示(菜单屏幕设计还是游戏期间的显示)?背景?影响?还是编程? 我已经玩了很长时间的游戏, ...
jbpm3\jbpm4_在jBPM中支持高级用户交互模式
jbpm3\jbpm4 许多通用业务流程包括人类参与者. 从简单的场景(例如人工批准)到涉及复杂的数据输入的复杂场景,人类活动都将新的方面(例如人类交互模式)引入到流程实现中. 人类交互模式的典型集合 ...
面试官：RecyclerView布局动画原理了解吗？
前言温馨提示:文章有点长,建议关注微信公众号"字节小站"收藏阅读本文主要通过以下几个方面来讲解RecyclerView的布局和动画原理: 布局放置:RecyclerView#d ...

动画原理——用户交互：移动物体

动画原理——用户交互：移动物体相关推荐

最新文章

热门文章