重力回弹（小球自由落体）
加速效果：增加重力值，随着定时器的执行，重力增大
回弹效果：当抵达目标位置时，将速度改为负值
回弹减速：将速度改变为负值的同时，乘以一个小数减少其速度
效果图：
html样式实现：
<style type="text/css">
.cont{
width: 1000px;
height: 600px;
background: #eee;
margin: 20px auto;
position: relative;
}
.box{width: 100px;height: 100px;background: red;position: absolute;left: 0;border-radius: 50%;}
</style>
css标签创建：
<div class="cont">
<div class="box"></div>
</div>
js代码:
<script type="text/javascript">
//获取节点
var obox = document.querySelector(".box");
var ocont = document.querySelector(".cont");
var speed = 10; //设置步长
var target = ocont.offsetHeight - obox.offsetHeight; //设置目标
var g = 2; //设置重力
var timer; //设置计时器
document.onclick = function(){
// 点击之前先清除,上一次
clearInterval(timer)
timer = setInterval(()=>{
// 重力加速
speed += g;
// 判断是否到重点
if(speed >= target-obox.offsetTop){
// 强行确认到终点
obox.style.top = target + "px";
// 回弹，回弹损耗
speed = -parseInt(speed*0.8);
// console.log(speed)
// 当回弹不足1的时候,意味着不再弹起了,就可以清除计时器了
if(Math.abs(speed) < 1){
clearInterval(timer)
}
}else{
// 生效位置
obox.style.top = obox.offsetTop + speed + "px";
}
},30) //频率
}
</script>
重力回弹（小球自由落体）相关推荐
- 模仿小球落下的重力回弹（自由落体）
一.使用html+css将需要的小球,地面写入页面. 二.使用js实现小球竖直方向的重力回弹运动 加速效果:增加重力值,随着定时器的执行,重力增大 回弹效果:当抵达目标位置时,将速度改为负值 回弹减速 ...
- Silverlight2 边学边练 之三 小球自由落体
终于看到动画章节了,本篇主要针对物体移动.变形和渐变移动进行练习. 完成小球自由落体慢镜实例,请大家多多拍砖,废话少说快快操练. XAML Code: <UserControl x:Class= ...
- html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
[网页设计]使用CSS3动画模拟实现小球自由落体效果 0 2015-07-20 14:00:03 使用纯CSS代码模拟实现小球自由落体效果: html代码如下:1 2 CSS样式代码:/*ball样式 ...
- matlab 地形模拟程序,MATLAB模拟小球自由落体运动
大部分朋友学习MATLAB,需要一个学习示例用来参考,有一个比较经典的题目就是如何利用Matlab模拟小球自由落体运动,这可能会是你的某次课后作业,这个程序的编写过程可以分为三个步骤: 第一部分,设置 ...
- 第1关：小球自由落体运动-------C语言程序设计技术（循环结构程序设计1）
第1关:小球自由落体运动-------C语言程序设计技术(循环结构程序设计1) #include<stdio.h> #include<math.h>int main(void) ...
- 小球自由落体_自由落体瀑布
小球自由落体 2010 update: Lo, the Web Performance Advent Calendar hath moved 2010年更新: Lo, Web Performance ...
- C++入门——仿真小球自由落体运动和抛物线运动
参考 <C和C++游戏趣味编程> 童真 仿真自由落体的小球 实现小球受重力影响加速下落后,碰到地面反弹的效果 代码如下: #include <graphics.h> #incl ...
- 小球自由落体及碰撞反弹
目录 简述 构成 小球 按钮 运动轨迹 总结 简述 通过setInterval()定时刷新小球位置来完成小球运动状态,模拟自由落体加速度及碰撞反弹效果 构成 整体的物体很少,只有一个小球及一个开始按钮 ...
- matlab小球水平抛出,如何用Matlab制作小球自由落体运动的动画
第一堂课布置了一个Mission Impossible作业,要求学生们用Matlab制作一个动画,模拟小球的自由落体运动. 以下将整个任务的问题解决的过程分享如下: 步骤一,这是一个动画的制作过程,以 ...
- canvas -小球自由落体运动
最近学习canvas,就使用canvas写一个小球,再有重力作用下的落体运动 html: <canvas id="canvas" width="600" ...
最新文章
- n条直线相交最多有几个邻补角_【初一】 n(n1)模型在相交线中的应用
- 收发电子邮件属于计算机在方面的应用,计算机应用基础复习题(供参考).doc
- 神经网络模式识别matlab,基于matlab仿真的神经网络模式识别
- IDE / Qt / 浅谈 qmake 之 pro、pri、prf、prl文件
- Python:常用模块简介（1）
- netty并发量一般多少_Netty框架简介
- 修复版易支付源码可运营
- C语言读取raw格式图像,求指导，如何用c语言实现读取*.raw格式图像
- 第一个ncurses程序： hello world ！！！
- 首个智能风控国际标准发布，蚂蚁风控技术入局全球
- 关于数字化学习的理论与实践
- 打乱数组 matlab,matlab对数组前N个数求和
- 数据库-表的定义与操作
- Eclipse的MAT的支配树
- 主流移动开发平台介绍
- Mac 隔空投送 AirDrop 搜不到 iPhone
- ariang修改默认服务器,Mac小技巧之AriaNg Native配置
- Android动画了解—转场/过渡(Transition) 动画
- 【数据结构】单链表逆序
- ocp认证考试报名_OCP最新报名考证流程