js实现小球抛物线运动

首先从公式和我们页面的dom可知，坐标点(x,y)是已知的，参数a、b、c是未知
因为坐标系是由我们设定，所以我们可以假设我们的初始点为(0,0)这样也是方便我们后面的计算
代入公式可知，c = 0 则剩下的问题就是求a、b了
假设a=0.001实际指焦点到准线的距离，可以抽象成曲率，这里模拟扔物体的抛物线，因此是开口向下的
则 b = (y - 0.001 * x * x) / x

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>div {position: absolute;width: 50px;height: 50px;border-radius: 50%;}#div1 {background: red;top: 50%;left: 10%;z-index: 999;}#div2 {background: #ccc;top: 50%;right: 10%;}</style></head><body><div id="div1"></div><div id="div2"></div><button id="btn" onclick="start(this)">抛物线</button><script src="./index.js"></script><script>let instance = getInstance("#div1", "#div2", {duration: 1e3,distance: 0.002,});function start(event) {event.onclick = null;instance.start(function () {event.onclick = start.bind(null, event);});}</script></body>
</html>

index.js

const getNode = dom => typeof dom === 'string' ? document.querySelector(dom) : dom;
let step = Symbol();
class ParabolicMotion {constructor(startDom, endDom, opt) {this.startDom = getNode(startDom)this.endDom = getNode(endDom)this.duration = opt.duration || 500;this.distance = opt.distance || 0.001;this.init();}init() {// 获取初始元素的位置let {left: startX,top: startY} = this.startDom.getBoundingClientRect()this.startX = startX;this.startY = startY;// 获取结束元素的位置let {left: endX,top: endY} = this.endDom.getBoundingClientRect();// 获取初始元素到目标元素的偏移总量let diff = {x: endX - startX,y: endY - startY}this.diff = diff;// 则 b = (y - a*x*x) / xthis.b = (diff.y - this.distance * diff.x * diff.x) / diff.x;}start(callback) {// 执行的开始时间this.beginTime = Date.now();// 结束的时间this.endTime = +this.beginTime + this.duration;// 执行抛物线动画this[step](this.beginTime);this.callback = callback;}[step](now) {let x, y;if (now > this.endTime) {// 运行结束x = this.diff.x;y = this.diff.y;this.callback && this.callback();} else {// 计算每一步的X轴的位置x = this.diff.x * ((now - this.beginTime) / this.duration);// 则每一步的Y轴的位置y = a*x*x + b*x + c;   c==0;y = this.distance * x * x + this.b * x;requestAnimationFrame(this[step].bind(this, Date.now()));}this.startDom.style.cssText = `position:absolute;left:${this.startX + x}px;top:${this.startY + y}px`;}
}const getInstance = (function () {let instance = null;return (...args) => {if (instance === null) instance = new ParabolicMotion(...args);return instance}
})()

js实现小球抛物线运动相关推荐

js运动小球碰壁反弹
js运动小球碰壁反弹 1.触碰窗口壁沿反弹,同时改变颜色 <!DOCTYPE html> <html lang="en"><head><m ...
JS实现小球碰撞边界反弹-点击消失（详细解析实现思路）
本篇文章给大家带来的是原生JS实现小球碰到边界就反弹,点击小球时小球被会销毁,并重新创建一个小球,让小球的数量一直保持在初始的数量,按照思路按步骤进行讲解,只需要源码的小伙伴可以定位到文本末尾直接复制 ...
c语言实现小球抛物线动画,CSS实现小球抛物线运动的动画效果（代码）
本篇文章给大家带来的内容是关于CSS实现小球抛物线运动的动画效果 (代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一个物体实现抛物线运动,物理上是将物体分为水平运动(匀速) ...
html小球碰撞源代码,JS实现小球的弹性碰撞效果
一.HTML代码(body部分) 上面body部分这样就算是完成了,下面我们给body中的div做一些小样式. 二.CSS小球样式部分 /*将body默认的margin和padding部分去掉*/ * ...
做一个简单的小球抛物线运动
目标需求:通过点击小球,然后实现小球的一个抛物线运动效果. 实现过程: 1.先使用html和css实现静态的效果 html代码 <div ...
java 小球抛物线_小球抛物线运动
一.问题描述 1.问题描述用c语言实现一个弹球游戏,实现小球在控制台的一定范围内(可自行定义范围,此博客小球的横坐标范围在(5,15),小球的纵坐标在(0,19)做抛物线运动. 二.解决问题的物理模 ...
纯JS实现小球在页面跳动/弹弹弹（有注释）
小球在页面跳动实现方法用了transform:translate(x,y); 即在当前位置进行移动,只需动态改变x和y的值就可以实现移动点我查看页面效果(点击小球开始跳动) JS //获取div节 ...
js模拟小球重力回弹效果
.cont{ width: 1000px; height: 600px; background: #eee; margin: 20px auto; position: relative; } .box ...
js实现小球随机运动
效果图: HTML <div class='box'><div class='ball'></div></div> style: .box{width: ...

js实现小球抛物线运动

index.js

js实现小球抛物线运动相关推荐

最新文章

热门文章