前言

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

然后(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. python --error整理（不定时更新）

    1.TabError: inconsistent use of tabs and spaces in indentation Python 中需要用tab 键来空格 2.SyntaxError: in ...

  2. 题解 P2421 【[NOI2002]荒岛野人】

    我的第一道数论紫题 首先,我们先看两个野人,他们相遇的充要条件是 \(C_i+P_i\times k\equiv C_j+P_j\times k\;(mod\;M)\) 其中\(k\)是第几年,且\( ...

  3. for循环中break和continue的区别

    break 会立即退出循环,强制执行循环后面的语句 默认只会终止紧邻的循环,如果要终止其他循环,需要给循环起名字 例如: name:for(var i = 0; i < 5; i++){ for ...

  4. java判断是否是合法IP

    public boolean ipCheck(String text) { if (text != null && !text.isEmpty()) { // 定义正则表达式 Stri ...

  5. 架构设计 | 接口幂等性原则，防重复提交Token管理

    本文源码:GitHub·点这里 || GitEE·点这里 一.幂等性概念 1.幂等简介 编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同.就是说,一次和多次请求某一个资源会产 ...

  6. BZOJ 1050并查集+贪心

    1050: [HAOI2006]旅行comf Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3333  Solved: 1851[Submit][St ...

  7. [PHP]用PHP自己写一个基于zoomeye的api(偷懒必备quq)

    0x01 起因 因为手速慢,漏洞刷不过别人,一个个手补确实慢,所以想自己写一个api,一键抓取zoomeye的20页,然后就可以打批量了 ovo(真是太妙了!) 0x02 动工       1.抓包做 ...

  8. 当 RocketMQ 遇上 Serverless，会碰撞出怎样的火花？

    作者 | 元毅  阿里巴巴高级开发工程师 阿里巴巴云原生公众号后台回复 Knative,免费下载<Knative 云原生应用开发指南>电子书! 想必大家都比较了解 RocketMQ 消息服 ...

  9. (一) Vue在创建的时候 入口文件 及相关的路由配置（及子路由配置）

    1. 首先明确一点  在书写之前尽量保持相关的文件知道含义 比如 components 啥的 知道是要放什么东西 在这里介绍一下   由于 vue 不是系统学习 所以很多的创建方式可能不一样  就是有 ...

  10. 用tarjan求LCA板子（比倍增快）

    懒!!直接转载!!!! https://solstice23.top/archives/62