前言

老早就看过一些购物车的抛物线效果,也想自己凑热闹动手来实现一遍。

然后(lll¬ω¬) 书到用时方恨少,发现高中学到物理啊、数学啊,都忘光了,抛物线公式都忘了0 0。

顺手百度一波,从百度可知:y=ax^2+bx+c

ps:顺路吐槽一下,以前学习是为了应付考试,该忘的都忘了,根本不知道怎么运用到实际生活中,没有学以致用

实现

吐槽完了,现在我们准备看看怎么实现我们的抛物线动画啦

首先从公式和我们页面的dom可知,坐标点(x,y)是已知的,参数a、b、c是未知

因为坐标系是由我们设定,所以我们可以假设我们的初始点为(0,0) O(∩_∩)O这样也是方便我们后面的计算

代入公式可知,c = 0 则剩下的问题就是求a、b了

假设a=0.001 => 实际指焦点到准线的距离,可以抽象成曲率,这里模拟扔物体的抛物线,因此是开口向下的

则 b = (y - 0.001 * x * x) / x , 那么b也是可以算出来的了,知道了这些,终于,我们可以写代码了 O(∩_∩)O

完整代码:

<!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 {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
position: absolute;
} #div1 {
background: red;
top: 10%;
left: 10%;
} #div2 {
background: #ccc;
top: 50%;
right: 50%;
}
</style>
</head> <body> <div id="div1"></div>
<div id="div2"></div> <button id="btn" onclick="start()">抛物线</button>
<script>
// 抛物线计算公式 y = a*x*x + b*x + c
// 坐标点x、y是已知的,a、b、c是未知的 // 获取初始元素
let oDiv1 = document.getElementById("div1") // 获取目标元素
let oDiv2 = document.getElementById("div2") // 获取初始元素的位置
let elX = oDiv1.getBoundingClientRect().left
let elY = oDiv1.getBoundingClientRect().top // 获取初始元素到目标元素的偏移总量
let diffX = oDiv2.getBoundingClientRect().left - oDiv1.getBoundingClientRect().left
let diffY = oDiv2.getBoundingClientRect().top - oDiv1.getBoundingClientRect().top // 假设(elX,elY)为(0,0),则c = 0,求a、b
// 设a=0.001 => 实际指焦点到准线的距离,可以抽象成曲率,这里模拟扔物体的抛物线,因此是开口向下的
let a = 0.001 // 则 b = (y - a*x*x) / x
let b = (diffY - a * diffX * diffX) / diffX // 定义一个定时器,用来执行抛物线动画
let timer = null; // 执行的时间
let duration = 1500 function start() {
// 执行的开始时间
beginTime = new Date()
// 结束的时间
endTime = +beginTime + duration
// 定时器,执行抛物线动画
timer = setInterval(() => {
let now = new Date()
step(now);
}, 13);
} // 抛物线动画的方法
function step(now) {
let x, y;
if (now > endTime) {
// 运行结束
x = diffX;
y = diffY;
clearInterval(timer);
} else {
// 计算每一步的X轴的位置
x = diffX * ((now - beginTime) / duration);
// 则每一步的Y轴的位置y = a*x*x + b*x + c; c==0;
y = a * x * x + b * x;
}
oDiv1.style.cssText = `position:absolute;left:${elX + x}px;top:${elY + y}px`
}
</script> </body> </html>

最后,感谢各位观众老爷观看

用js实现简单的抛物线运动的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

  3. Sea.js提供简单、极致的模块化开发体验

    为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. ...

  4. 投票系统 & js脚本简单刷票

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS的简单用法

    JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...

  6. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  7. JS实现简单的运行代码 & 侧边广告

    /* JS实现简单的运行代码功能 */<!doctype html> <html> <head> <meta charset="utf-8" ...

  8. Centos7 中 Node.js安装简单方法

    最近,我一直对学习Node.js比较感兴趣.下面是小编给大家带来的Centos7 中 Node.js安装简单方法,在此记录一下,方便自己也方便大家,一起看看吧! 安装node.js 登陆Centos ...

  9. angular4.0和angularJS、react.js、vue.js的简单比较

    angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...

随机推荐

  1. FF按钮点击后表单提交

    如果发现<button>提交</button>点击后,所在的表单在ff中自动提交了,则需要添加属性 type='button'! 我也是百度的,记在这里以后方便查看!

  2. js中的栈,堆。

    一.栈和堆 栈(stack):栈会自动分配内存空间,会自动释放,存放基本类型,简单的数据段,占据固定大小的空间. 基本类型:String,Number,Boolean,Null,Undefined 堆 ...

  3. java 多线程详细笔记(原理理解到全部使用)

    鸽了好久以后终于又更新了,看同学去实习都是先学源码然后修改之类,才发觉只是知道语法怎么用还远远不够,必须要深入理解以后不管是学习还是工作,才能举一反三,快速掌握. 目录 基础知识 进程与线程 线程原子 ...

  4. 00004-form 表单的清空、重置 (jquery)

    form 表单的清空.重置 $(':input').not(':button, :submit, :reset').val('').removeAttr('selected').removeAttr( ...

  5. 【雕爷学编程】Arduino动手做(5)---热敏温度传感器模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准备逐 ...

  6. Poj 最短路和次短路的个数 Dij+优化?。

    Description Tour operator Your Personal Holiday organises guided bus trips across the Benelux. Every ...

  7. CF832D

    题目链接:http://codeforces.com/contest/832/problem/D 题目大意:在一个无向图上,给出三个点,以其中一个点为终点,另外两个点为起点,请问如何安排起点和终点可以 ...

  8. An easy problem(hdu2055)

    输入格式:一个整型,然后循环输入一个字符加一个整型. 思考:首先用scanf_s()函数输入整型.然后一个大循环,用scanf_s()函数同时输入字符和整型.第一个scanf_s()函数后,后面还要输 ...

  9. web项目——启动时tomcat报错:Server Tomcat v7.0 Server at localhost failed to start.

    报错信息:Server Tomcat v7.0 Server at localhost failed to start. 报错截图: 原因分析:在使用SSM框架时,生成的mapping与系统配置文件不 ...

  10. NPM的由来——为什么要使用NPM

    原文:https://blog.csdn.net/qq_37696120/article/details/80507178 https://blog.csdn.net/hong10086/articl ...