js实现小球抛物线轨迹运动的两种方式

最新推荐文章于 2024-05-20 09:53:16 发布
最新推荐文章于 2024-05-20 09:53:16 发布
阅读量1.2w 收藏 2
点赞数 1
文章标签： javascript js 小球 抛物线 轨迹运动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013420372/article/details/63912900
版权

  js实现小球抛物轨迹运动的大致思路：

  1、用setInterval()方法，进行间隔性刷新，更新小球位置，以实现动态效果

   2、绘制小球和运动区域，运动区域可通过flex布局实现垂直居中

   3、用物理公式S(y)=1/2*g*t*t，S(x)=V(x)t来计算路径

  现确定V(x)=4m/s,刷新的时间间隔设置为0.1s。原本px和米之间的转换，不同尺寸转换不同，本例采用17寸显示器，大约1px=0.4mm。但浏览器太小，因此只能模拟抛物线轨迹，本例将px和米之间缩成100倍。

第一种：通过border-radius绘制小球。

思路：用border-radius: 50%绘制小球，给小球设置relative，每次计算小球当前位置，赋给top和left。计算运动轨迹时，可用变量自增计算setInterval调用次数，每次是0.1s，这样可计算总时间。代码如下：

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    /*给body进行flex布局，实现垂直居中*/
    body {
    min-height:

最低0.47元/天 解锁文章
远方1234567
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS小球抛物线轨迹运动的两种实现方法详解
11-29
本文实例讲述了JS小球抛物线轨迹运动的两种实现方法。分享给大家供大家参考，具体如下： js实现小球抛物轨迹运动的大致思路： 1、用setInterval()方法，进行间隔性刷新，更新小球位置，以实现动态效果 2、绘制小球和运动区域，运动区域可通过flex布局实现垂直居中 3、用物理公式S(y)=1/2*g*t*t，S(x)=V(x)t来计算路径 现确定V(x)=4m/s,刷新的时间间隔设置为0.1s。原本px和米之间的转换，不同尺寸转换不同，本例采用17寸显示器，大约1px=0.4mm。但浏览器太小，因此只能模拟抛物线轨迹，本例将px和米之间缩成100倍。 第一种：通过border-radiu
js实现抛物线
qq_52886072的博客
09-04 796
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <titl...
vue3+three.js实现汽车沿着轨迹运动
最新发布
weixin_50379372的博客
05-20 364
创建一个封闭的运动轨迹。二.模型沿线移动的方法。
canvas 简单的小球抛物线实现和简单的应用
大白的博客
07-03 3761
使用canvas实现简单的小球下落canvas可以实现一些有趣的绘画，可以实现规则或者不规则的图形。我们这里的小球就是一个通过canvas的方法arc画出的圆。我们可以使用storke和fil来实现圆的颜色和边框，如果你还想让圆在漂亮一些，使用createRadialGradient可以实现球颜色的渐变。var grad = context.createRadialGradient(x,y,5,x
java 小球运动轨迹_JS小球抛物线轨迹运动的两种实现方法详解
weixin_29296241的博客
02-24 626
本文实例讲述了JS小球抛物线轨迹运动的两种实现方法。分享给大家供大家参考，具体如下：js实现小球抛物轨迹运动的大致思路：1、用setInterval()方法，进行间隔性刷新，更新小球位置，以实现动态效果2、绘制小球和运动区域，运动区域可通过flex布局实现垂直居中3、用物理公式S(y)=1/2*g*t*t，S(x)=V(x)t来计算路径现确定V(x)=4m/s,刷新的时间间隔设置为0.1s。原本p...
C++入门——仿真小球自由落体运动和抛物线运动
beilizhang的博客
09-19 4070
参考 《C和C++游戏趣味编程》 童真 仿真自由落体的小球 实现小球受重力影响加速下落后，碰到地面反弹的效果 代码如下： #include <graphics.h> #include <conio.h> #include <stdio.h> int main() { float y = 100; // 小球的y坐标 float vy = 0; //
小球 水平 抛物线运动轨迹
lyinshaofeng的博客
06-30 344
小球 水平 抛物线运动轨迹
Vue实现购物小球抛物线的方法实例
01-21
本文介绍的是利用Vue实现购物小球抛物线的相关内容，下面话不多说了，来一起看看详细的介绍吧 css片段 .shop{ position: fixed; top: 300px; left: 40px; } .ball{ position: fixed; left: 32px; bottom: ...
vue 2.0 购物车小球抛物线的示例代码
08-28
在Vue 2.0中创建购物车小球的抛物线动画效果，涉及到的主要知识点包括Vue的组件系统、过渡效果、CSS动画以及JavaScript动画。以下是对这些知识点的详细解释： 1. **Vue组件系统**： Vue的组件系统是其核心特性之一...
Js实现简单的小球运动特效
10-22
主要介绍了Js实现简单的小球运动特效的相关资料,需要的朋友可以参考下
基于JavaScript抛物线动画实现
weixin_45785873的博客
09-03 481
基于JavaScript抛物线动画实现，实现了一个基于贝塞尔曲线的抛物线动画，这里使用到了三种表现形式：css的transition、css3的animation动画和JavaScript的requestAnimationFrame。
JS抛物线
qq_43078502的博客
02-11 633
这次给大家带来JS做出抛物线运动轨迹，JS做出抛物线运动轨迹的注意事项有哪些，下面就是实战案例，一起来看一下。 具体代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
运动轨迹 php,两种JS实现小球抛物线轨迹运动的方法
weixin_31139027的博客
04-01 731
本文主要介绍了JS小球抛物线轨迹运动的两种实现方法,结合实例形式分析了javascript实现小球抛物线运动的相关计算与图形绘制操作技巧,需要的朋友可以参考下，希望能帮助到大家。js实现小球抛物轨迹运动的大致思路：1、用setInterval()方法，进行间隔性刷新，更新小球位置，以实现动态效果2、绘制小球和运动区域，运动区域可通过flex布局实现垂直居中3、用物理公式S(y)=1/2*g*t*t...
JavaScript实现绘制抛物线（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-07 113
JavaScript实现绘制抛物线（附完整源码）
JS 实现抛物线动画案例
一只路过的小码农
02-10 3865
我们这里简单实现，一个按钮，一个购物车图标，样式这里直接跳过，最终。至此，我们便实现了简单的购物车抛物线动画。接下来，我们一步步实现逻辑。
JS 实现抛物线运动
lyqhn2012的专栏
07-04 3835
JS实现简单的抛物线动画，需要的童鞋可以参考下 <div class="content"> <div class="slider"> <div class="icon"> <span class="fa fa-circle" id="cart" ></span> </div> </div> </div><scrip
js实现一条抛物线
weixin_30485799的博客
02-23 253
抛物线运动解释： 以右开口为例，根据公式 y^2 = 2px 。确定p的值，已知x求y。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head...
Three.js实现抛物线动态流向效果
qq_37155408的博客
04-08 1718
Three.js实现抛物线动态流向效果 老规矩，首先来看下最终实现的效果。 该效果可能会用在飞机航线起点到终点的演示、导弹发射轨迹效果演示等场景。掌握思路以后，效果实现起来非常简单，总结下来要点其实就两个：1.绘制抛物线；2.实现流向动态效果。下面就来看看具体实现过程吧。 创建三维场景 首先我们要创建一个三维场景，创建场景非常简单，仅仅一句代码就能实现。 const scene = new THREE.Scene(); 创建了场景后，我们还不能显示任何东西，因为还需要用到渲染器和相机。 // 创建相机
vue3点击实现小球抛物线
05-05
实现小球抛物线的过程可以分为两个部分：点击事件和抛物线动画。 首先，我们需要在 Vue3 中实现点击事件，并且获取点击位置的坐标，可以使用 `@click` 绑定点击事件，并且使用 `$event` 参数来获取点击位置的坐标。 ``` <template> <div class="container" @click="onClick"> <div class="ball" :style="{ top: ballTop + 'px', left: ballLeft + 'px' }"></div> </div> </template> <script> export default { data() { return { ballTop: 0, ballLeft: 0, }; }, methods: { onClick(event) { // 获取点击位置的坐标 const x = event.clientX; const y = event.clientY; // 实现抛物线动画 this.throwBall(x, y); }, throwBall(x, y) { // TODO: 实现抛物线动画 }, }, }; </script> <style scoped> .container { position: relative; width: 500px; height: 500px; border: 1px solid #ccc; } .ball { position: absolute; width: 50px; height: 50px; background-color: red; border-radius: 50%; } </style> ``` 接下来，我们需要在 `throwBall()` 方法中实现小球的抛物线动画。抛物线的公式为：$y = a x^2 + b x + c$，其中 $a$ 控制抛物线的弧度，$b$ 和 $c$ 控制抛物线的位置。 我们可以通过设置一个定时器，每隔一段时间更新小球的位置，实现抛物线动画。在每次更新位置时，我们需要根据抛物线公式计算出小球的新坐标。 ``` throwBall(x, y) { const startX = this.ballLeft; const startY = this.ballTop; const endX = x - 25; // 小球的宽度是50px const endY = y - 25; // 小球的高度是50px const a = 0.005; // 控制抛物线的弧度 const b = (endY - a * endX * endX) / endX; // 根据公式计算b const c = startY - a * startX * startX - b * startX; // 根据公式计算c let time = 0; const interval = setInterval(() => { time += 0.1; const ballLeft = startX + (endX - startX) * time; const ballTop = a * ballLeft * ballLeft + b * ballLeft + c; this.ballLeft = ballLeft; this.ballTop = ballTop; if (ballTop >= endY) { clearInterval(interval); } }, 10); }, ``` 最后，我们需要在 CSS 中设置小球的初始位置和样式。 ``` .ball { position: absolute; width: 50px; height: 50px; background-color: red; border-radius: 50%; top: 0; left: 0; transition: top 0.5s ease-out, left 0.5s ease-out; } ``` 这样，我们就完成了 Vue3 中小球抛物线的实现。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值