前端图片上坐标连线_前端图形学(十三)——弹跳运动的深入之傲娇的小球

欢迎来到【畅哥聊技术】前端图形学相关技术文章,更多精彩内容持续更新中,敬请关注。

前面我们说到了小球的弹跳运动,通过一个方向的加速度和摩擦力去影响小球的动画,其目标点也是一个固定不变的,似乎有些单调。

那么我们今天继续小球的弹跳运动的深入,先来看下面的示例:

3d0772a9717e0cc05b165ed6ba3eca0d.gif

傲娇的小球

相信以上的类似动画大家应该看见过很多,这样的动画很容易被大家所接受,原因很简单,因为它完全符合我们现实生活中的物理现象。

接下来我带着大家来分析一下这种动画的制作过程。

分析

  1. 小球是和我们的鼠标进行交互的,因此我们在兼听画布元素的鼠标移动事件,并获取鼠标相对于画布的坐标。
  2. 把鼠标转换后的坐标作为小球的运动目标点Target
  3. 定义弹跳系数,摩擦系数和重力。
  4. 分别计算X轴和Y轴的加速度。
  5. 分别将小球的速度*摩擦系数,这样才能便小球速度不断变小,最终停下来。
  6. 从上面的gif图可以看出,小球中心点和鼠标有一定的距离,这个距离我们就以重力去表示了。
  7. 最后去绘制小球和鼠标两点的连线。

核心代码:

//鼠标起始位置。var mouse = {x:0,y:0};//兼听画布的鼠标移动事件,并计算出鼠标相对于画布的坐标。canvas.onmousemove = function(e){mouse.x = e.pageX - canvas.offsetLeft;mouse.y = e.pageY - canvas.offsetTop; }//定义弹动系数,摩擦系数,重力常量var easeing = 0.15,k = .9,g = 15;//两个方向的加速度的计算方法(和昨天一样)var ax = (mouse.x - ball.x ) * easeing;var ay = (mouse.y - ball.y ) * easeing;//将加速度附加到小球的速度上ball.vx += ax ;ball.vy +=ay;//给小球加上摩擦力的影响。ball.vx *= k;ball.vy *= k;//将小球的最终速度作用在小球的xy属性上。ball.x += ball.vx;ball.y += ball.vy;//由于小球和鼠标有重力的影响,所以我们给y轴的速度一个重力的作用。ball.vy += g;

最终全部代码:

f0bf4bf681bb34e1ec429bdbdfc843b8.png

源码索取请私信我

其实看代码数量并不多,大家刚开始可能是被鼠标晃晕了头,其实可以这样想,鼠标操作是一个循环的操作,假如鼠标就动一下,把这个过程的动画实现了,其它的就好办了。

总结:

  1. 其实不难发现,任何看看似复杂的动画,细心的去分析,拆解找到其中的原理,我们也可制作我们自己想要的动画。
  2. 任何项目的开发,动画的交互造成不能天马行空,一定要符合物理现象,只有这样才能被用户所接受。
  3. 物理学中的重力、摩擦力、加速度在图形学中被广泛应用。多尝试、理解方可熟能生巧。

以上就是今天的分享的内容,喜欢的点赞关注,不喜欢的解散。。。

这里是【畅哥聊技术】前端图形学相关技术文章,更多精彩内容持续更新中。。。

未完待续。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/551816.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务器微信了早上好,微信早晨好问候语句动态图片 早上好发给朋友的微信早安问候语简短...

原标题:微信早晨好问候语句动态图片 早上好发给朋友的微信早安问候语简短嘀嘀嘀嘀,我的短信到啦。用关心方式,要你多注意休息;用体贴方式,要你轻松而快乐;用祝福方式,要你一切都过的好&#xff…

c语言调用createthread线程的头文件_易语言API多线程总汇

【thread】 即,线程,是进程中某一顺序的控制流,在单个程序中同时运行多个线程完成不同工作,称为多线程。易语言多线程理解:进程是一个可执行程序,由私有虚拟地址空间、代码、数据和其它操作系统资源组成&am…

oracle varchar默认长度_面试官:如何精确计算mysql数据库索引长度?

概述我们知道MySQL Innodb 对于索引长度的限制为 767 字节,并且UTF8mb4字符集是4字节字符集,则 767字节 / 4字节每字符 191字符(默认索引最大长度),所以在varchar(255)或char(255) 类型字段上创建索引会失败,提示最大索引长度为7…

android things 系统镜像文件_开始菜单搬家!Win 10X 系统 UI 全部重做,明年初就能用上...

不知道老伙计们还记不记得,小淙曾经报道过三次,关于微软新系统 Windows 10X 的消息。当时很多老伙计感觉太遥远,或者觉得它难以激起波澜。但现在看来微软布局已久,是铁了心要搞新系统了。因为 Windows 10X 系统已经准备好交付&…

通达信公式大全_通达信MACD金叉的选股公式大全

公式来源于网络&#xff0c;我只是用其中一个&#xff0c;一起复制来了&#xff0c;有需要的自取吧。1、0轴上方第一次金叉选股公式&#xff1a;DIFF:EMA(CLOSE,12) - EMA(CLOSE,26);DEA : EMA(DIFF,9);MACD : 2*(DIFF-DEA);xg:cross(diff,dea) and dea>-1.0 and dea<0.5…

mysql 时间差_后端从mysql取值返回0时区时间数据的问题

近日搞一个B/S项目&#xff0c;前端页面时间字段总是显示格林威冶时间&#xff0c;也就是0时区的时间&#xff0c;比北京时间差了8个小时。打开后台的数据库&#xff0c;在workbench中查询&#xff0c;结果显示的时间格式正常&#xff0c;为当前北京时间。该时间字段是在往数据…

abap视图字段限制_【第八章】视图

上一级目录&#xff1a;Mosh_完全掌握SQL课程_学习笔记 其它相关&#xff1a;数据概要【第八章】视图Views (时长18分钟)1. 创建视图Creating Views (5:36)小结就是创建虚拟表&#xff0c;自动化一些重复性的查询模块&#xff0c;简化各种复杂操作&#xff08;包括复杂的子查询…

生活质量衡量系统_数据质量与数据质量八个维度指标

数据质量与数据质量八个维度指标数据的质量直接影响着数据的价值&#xff0c;并且直接影响着数据分析的结果以及我们以此做出的决策的质量。质量不高的数据不仅仅是数据本身的问题&#xff0c;还会影响着企业经营管理决策&#xff1b;错误的数据还不如没有数据&#xff0c;因为…

linux的内置的账户_6 款面向 Linux 用户的开源绘图应用程序

既然你是一名 Linux 用户&#xff0c;为什么不关注一下开源绘图应用程序呢&#xff1f;-- Ankush Das(作者)小时候&#xff0c;当我开始使用计算机(在 Windows XP 中)时&#xff0c;我最喜欢的应用程序是微软的“画图”。我能在它上面涂鸦数个小时。出乎意料&#xff0c;孩子们…

ieda ts文件报错_使用TS开发微信小程序(1):环境搭建——VSCode+TS

前言现在接到小程序需要改版的需求&#xff0c;由于使用Ionic的经验&#xff0c;希望以后能够统一开发语言降低开发成本&#xff0c;所以想使用TypeScript进行开发。开发前准备工作先是看官网&#xff0c;在微信小程序的官方开发文档中找到TypeScript相关的支持介绍。微信官网描…

cad统计多条线段总长度插件_超级实用CAD技巧应用汇总!技巧大全、插件合集、快捷键合集等...

超级实用CAD技巧应用汇总&#xff01;技巧大全、插件合集、快捷键合集等各位朋友&#xff0c;CAD福利来啦&#xff01;超级实用CAD技巧应用汇总&#xff0c;千万不能错过&#xff01;有技巧大全、插件合集、快捷键合集、字体大全、常用图库大全、常见问题及解决办法、版本转换&…

局部放大_Origin教程|巧用ZOOM功能做数据对比和快速绘制局部放大图

微信公众号&#xff1a;有宝物的柜子编辑&#xff1a;落水无波2020-06-28 原创有时候在分析一些数据时&#xff0c;既需要观察整体又需要局部观测&#xff0c;那么怎么才能做到同时查看呢&#xff0c;就类似上面这样。这样就很容易的去发现有没有峰位偏移&#xff0c;同时查看与…

操作多台_一支热电偶能否连接多台显示仪表

一支热电偶能否连接多台显示仪表&#xff0c;这个问题常有人提出&#xff0c;因为随着DCS系统的应用及对管理工作的要求&#xff0c;需要对一个信号在多处显示也是常有的事。一支热电偶能否连接多台显示仪表或DCS系统板卡&#xff0c;连接后能否保证测量精度&#xff0c;这是人…

个性签名设计软件_佩服!我用Python设计了一个签名软件

临近年末&#xff0c;大家都忙着签发礼品&#xff0c;写的一手好的签名&#xff0c;会让大家更有成就感&#xff0c;今天&#xff0c;小安就带领大家来设计一个基于tkinter爬虫的签名设计软件&#xff0c;方便大家设计签名。要设计这款软件&#xff0c;就需要了解tkinter与爬虫…

华为硬件工程师社招机考题库_中级会计机考你了解吗?机考操作常见八大问题速看...

中级会计考试采用无纸化机考的形式&#xff0c;考生们在备考时要多熟悉机考操作&#xff0c;为了帮助考生提前了解无纸化机考&#xff0c;东奥小编整理了一些机考的常见问题&#xff0c;希望能够帮助到大家&#xff01;一、参加无纸化考试的考生允许带计算器入场吗&#xff1f;…

网站攻击软件_佳能遭严重勒索软件攻击,10TB的数据被窃取,大量服务宕机

佳能遭严重勒索软件攻击&#xff0c;10TB的数据被窃取&#xff0c;大量服务宕机Garmin 遭勒索攻击的风波未平&#xff0c;近日&#xff0c;佳能又遭受了勒索软件攻击&#xff0c;攻击除了让佳能的一些网站宕机外&#xff0c;据说还导致佳能服务器中高达 10TB 的数据被盗。 影响…

js datagrid新增一行_Django接口新增页面编写_2(十五)

做一个好看的页面真的是一件困难的事情&#xff0c;所以还是遵循复制后修改的原则&#xff0c;首先是借鉴httpbin页面的方式进行块状展开。块状从模版中找到类似的html代码&#xff1a;块状我们可以看到一下它的动态效果&#xff0c;可以自主的展开和合拢。蛮符合我们的要求的动…

uboot下nand flash读写方法_鸿蒙HarmonyOS烧录方法总结

1.烧录工具理解HarmonyOS驱动框架&#xff0c;用户态APP和内核态驱动之间的通信机制。HarmonyOS烧录使用的海思自研的烧录工具Hitool&#xff0c;使用起来相对来说比较简单。整体界面如图所示&#xff1a;2. 烧录内容烧录内容主要分为两部分&#xff0c;一部分是引导文件fastbo…

合成孔径雷达_合成孔径雷达(SAR)基础:汇总

详细分析&#xff1a;合成孔径雷达成像技术对雷达成像的几点补充消费级小型无人机的合成孔径雷达成像我国微型合成孔径雷达发展现状对比三种天基系统&#xff0c;看SAR成像模式星载SAR详解&#xff1a;“高分三号”微波遥感卫星机载Pol-InSAR系统&#xff0c;新体制SAR成像结果…

将命令结果赋给变量_不得不了解的quot;变量quot;(2)—— 变量的赋值

祝大家圣诞快乐&#xff0c;今天晚上下班后去滑雪&#xff0c;第一次尝试单板&#xff0c;看着别玩玩得挺酷的&#xff0c;自己耍起来摔得差点骨头没散架&#xff01;愈挫愈勇啦&#xff0c;就像我们学习脚本一样&#xff0c;要坚持学下去练下去才能熟练&#xff0c;才能日后装…