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

最新推荐文章于 2020-04-08 21:19:08 发布
最新推荐文章于 2020-04-08 21:19:08 发布
阅读量130 收藏
点赞数
原文链接：http://www.cnblogs.com/winderby/p/4259596.html
版权

书籍名称：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 bounce
        if (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 bounce
        if (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 bounce
        if (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

weixin_30216561
关注
动画交互应用——神秘力量
weixin_43751558的博客
04-22 1212
引言 图片来源公众号“住在疯人院”，链接：https://mp.weixin.qq.com/s?__biz=MzUxOTg4ODI4NA==&mid=2247487501&idx=1&sn=aea4f6f06e3115689bbeef039b6af7ea&chksm=f9f39cfece8415e8be76c5483ec1a8...
[Unity&Animator]拖动Animator面板的问题
BuladeMian的博客，菜得抠脚，菜得真实
06-12 4283
有的时候打开 Animator 界面，会出现如下所示的问题，无法看到该页面的全貌 使用鼠标中键，滚轮、中键按下拖动都可以的。
9、《每周一点canvas动画》——移动物体(1)
river、的博客
01-02 913
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 本系列文章代码文件 在《每周一点canvas动画》——用户交互这一章我们介绍了用户交互事件，包括：鼠标事件，触摸事件和键盘事件。但是，到目前为止，我们除了键盘事件，对于另外两个事件几乎没有做过任何相应的应用。那么，在这一章，我们将要学习如何让c
Unity Animator Controller——Animator Sub-state machine
alexhu2010q的博客
12-31 2571
在Unity animator中，右键点击可以选择Create Sub-state machine: Sub-state machine可以用来优化动画之间的结构，我把它理解为一个结构体，可以存放Animation Clip和Animation Clip之间的transition关系，Unity官方给了这么个例子，可以把右图的一串状态直接移到substate machine里： 移动后是这个...
unity animator的使用心得
weixin_44186849的博客
09-02 8701
在项目进行时,需要频繁对动画状态进行切换,由于不是单纯的来回切换,所以我没有采用Boo来控制,使用了trigger, 频繁触发 trigger需要做复位处理 JumpUp到JumpDown是 trigger 条件 upToDown(A), (没有ExitTime) JumpDown到JumpUp2是 trigger 条件 downptoUp(B),(没有ExitTime) JumpUp2到Ju...
Unity中执行完动画，子物体的移动问题
pursuitK的博客
04-08 2649
简述问题 在Unity工程中，对父物体添加Animation，程序运行后，对子物体的移动问题。 拆分父物体 程序运行开始，执行为父物体添加的Animation动画，执行完后，父物体被拆分为几个子物体。 问题 虽然执行了Animation动画，但父物体和子物体的层级关系还是存在。而且将一个移动代码赋给其中一个子物体，类似于： transform.position = Vector3(1,1,1); ...
IOS应用源码——贝塞尔曲线demo：一个运动的物体：PathMove for iOS.zip
10-14
2. **动画物体移动**：为了使物体沿着贝塞尔曲线移动，开发者需要使用`CAKeyframeAnimation`或者`CADisplayLink`结合`UIView`的`animate(withDuration:animations:)`方法来创建动画。物体的位置将随着时间的推移沿着...
IOS应用源码——贝塞尔曲线demo：一个运动的物体：PathMove for iOS.rar
10-14
贝塞尔曲线在iOS应用开发中是一种非常重要的图形绘制技术，尤其在动画设计和用户界面交互中扮演着关键角色。这个“PathMove for iOS”的源码示例提供了对贝塞尔曲线的深入理解和实践应用。 首先，我们需要理解什么...
Flash中动画的创建——帧动画.pdf
07-10
- **动作脚本**：结合ActionScript，可以实现更复杂的交互性和逻辑控制，如响应用户输入、控制动画播放速度等。 总之，Flash中的帧动画创建是通过精心设计和排列关键帧来实现物体的动态变化。理解并熟练掌握这些...
html5实现拖放以及mouse事件实现简单拖拽
Mentina的小屋
03-13 3931
    春困夏乏秋打盹，最近懒癌要犯了，为了督促自己学习，小生制定了一个计划——每天收集/记录/学习一个小技巧~~~    今天的小技巧如题，html5实现拖放以及利用mouse事件实现简单拖拽，本文将依次介绍，若有不妥之处，还望这位看官留言指正~~~实例参考博客：http://blog.csdn.net/baidu_31333625/article/details/53811510//=====...
10、《每周一点canvas动画》——移动物体(2)
river、的博客
01-15 1151
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 本系列文章代码文件 在上一节《每周一点canvas动画》——移动物体(1)中我们介绍了如何捕获一个物体，并且对物体进行拖拽。首先，我们在小球的原型对象上添加了一个方法getBounds()，该方法的作用是返回一个对象，该对象内包含小球的坐标和长
webtool添加了好几个模块
erlang非业余研究
02-24 257
不小心间发现webtool添加了好几个模块： 1.WebCover 2.OrberWeb 3.VisualTestServer 4.WebAppmon 5.CrashDumpViewer 都是很实用的功能哦！！
Unity控制人物移动和移动动画
热门推荐
weixin_42092393的博客
06-19 2万+
using System.Collections;using System.Collections.Generic;using UnityEngine;[System .Serializable ]public class Anim//游戏控制动画{    public AnimationClip idle;    public AnimationClip runForward;    publi...
Android动画效果
a71143的博客
11-19 133
动画类型Android的animation由四种类型组成XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果JavaCode中 AlphaAnimation 渐变透明度动画效果 Sca...
从零开始学_JavaScript_系列（五）——dojo（基础，动画移动，重力模拟，动画合并，添加标签）...
weixin_33910137的博客
03-31 119
关于dojo的下载，请查看： https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论，请评论、或者站内信，我会尽快回复。 （1）加载 ①首先，先设置 <script> //替代使用data-dojo-config，我们创建一个dojoConfig对象（是个...
Canvas做游戏实践分享(十)
blessdyb的专栏
02-17 114
6    用户交互——移动物体       游戏的核心在于交互，很多时候需要用户动手来操作游戏对象，很基本的一个操作就是移动物体。接下来我们会介绍如何拖动物体，在画布上扔物体等。 6.1    选择与释放对象         使用鼠标对物体的拖拽操作主要有三个步骤——鼠标进入物体范围并按下，鼠标移动及鼠标释放。这涉及到三个鼠标事件：mousedown,mousemove,mouseup。我们...
UNITY 模型与动画优化选项
c1sdn19的专栏
09-28 321
UNITY 模型与动画优化选项 1，RIG： Optimze Game Objects，【默认是没勾选的】 效果：将骨骼层级从模型中移除，放到动画控制器中，这样性能提高明显。实测中发现原来瞬间加载5个场景角色有点延迟，采用此选项后流畅了许多。 2，Animator： Update mode 通过此选项可以针对性优化，对于站着不动的NPC，可以使用 【Anima...
优化Java3D鼠标交互：解决近距离物体拾取问题与动画提示
本文主要探讨了Java3D中鼠标交互功能的扩展与应用，针对在虚拟环境中常见的问题——当场景复杂且待拾取物体靠近时，用户难以精确选取，提出了一种创新解决方案。Java3D原生的鼠标交互功能设计可能存在局限性，特别是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值