JS-animation 动画原理：匀速and碰撞检测

最新推荐文章于 2024-01-15 11:52:39 发布
最新推荐文章于 2024-01-15 11:52:39 发布
阅读量491 收藏
点赞数
文章标签： JavaScript 动画效果 前端 匀速 碰撞检测
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45006204/article/details/99584195
版权 
// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0; padding: 0;
			}
			body {
				overflow: hidden;
			}
			#A {
				width: 200px; height: 200px;
				background: pink;
				background-size: 200px;
				position: absolute;
				left: 0; right: 0;
			}
			#B {
				width: 200px; height: 200px;
				background: black;
				background-size: 200px;
				position: absolute;
				left: 500px; right: 500px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
			     //获取两个div元素；
				var div1 = document.getElementById("A"); 
				var div2 = document.getElementById("B"); 
				//设置两个div的横向纵向速度；
				var speedX = 5;
				var speedY = 3; 
				div1.speedX = 5;
				div1.speedY = 3; 
				div2.speedX = 5; 
				div2.speedY = 3; 
				//按照设定速度移动；
				function move(el){
					var currentLeft = parseInt(window.getComputedStyle(el).left); 
					var currentTop = parseInt(window.getComputedStyle(el).top); 
					check_border_collision(el); 
					var t1, t2; 
					//若两盒子发生碰撞则弹开，即速度互换；
					if(check_block_collision(div1,div2)){
						t1 = div1.speedX; 
						t2 = div1.speedY; 
						div1.speedX = div2.speedX;
						div1.speedY = div2.speedY;
						div2.speedX = t1;
						div2.speedY = t2;
					}
					var Left = currentLeft + el.speedX; 
					var Top = currentTop + el.speedY; 
					el.style.left = Left + 'px'; 
					el.style.top = Top + 'px'; 
				}
				function check_border_collision(el){
					var style = window.getComputedStyle(el); 
					var Left = parseInt(style.left); 
					var Top = parseInt(style.top);
					var w = parseInt(style.width);
					var h = parseInt(style.height);
					if(Left < 0){
						Left = 0; 
						el.speedX *= -1; 
					}
					if(Left > window.innerWidth - w){
						Left = window.innerWidth - w; 
						el.speedX *= -1; 
					}
					if(Top < 0){
						Top = 0; 
						el.speedY *= -1; 
					}
					if(Top > window.innerHeight - h){
						Top = window.innerHeight - h; 
						el.speedY *= -1; 
					}
					el.style.left = Left + 'px'; 
					el.style.top = Top + 'px'; 
				}
				//两个div碰撞检测；
				function check_block_collision(block1,block2){
					var left1 = parseInt(window.getComputedStyle(block1).left); 
					var left2 = parseInt(window.getComputedStyle(block2).left); 
					var top1 = parseInt(window.getComputedStyle(block1).top); 
					var top2 = parseInt(window.getComputedStyle(block2).top);
					var width1 = parseInt(window.getComputedStyle(block1).width); 
					var width2 = parseInt(window.getComputedStyle(block2).width);
					var height1 = parseInt(window.getComputedStyle(block1).height); 
					var height2 = parseInt(window.getComputedStyle(block2).height);
					var center1 = {
						x: left1 + width1 / 2,
						y: top1 + height1 / 2
					}
					var center2 = {
						x: left2 + width2 / 2, 
						y: top2 + height2 / 2
					}
					var diffx = Math.abs(center1.x - center2.x)
					var diffy = Math.abs(center1.y - center2.y)
					if((diffx<(width1 + width2)/2) && (diffy<(height1 + height2)/2)){
						return true;
					}
					return false; 
				}
				//每隔20毫秒，调用一次function函数；
				setInterval(function () {
					move(div1)
					move(div2)
				}, 20); 
			}
		</script>
	</head>
	<body>
		<div id="A"></div>
		<div id="B"></div>
	</body>
</html>
养只狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
02-JS特效-匀速动画
路遇惊喜
12-21 662
动画的种类 动画原理 = 盒子位置 + 步长。 1.闪动。 （瞬间到达） 2.匀速。 （每次走一样距离） 3.缓动。 （开始特快越走越慢，步长越来越小.类似刹车，电梯停止，压缩弹簧…） 动画的原理：盒子的位置=盒子本身所在的位置+步长<style> * { padding: 0; margin: 0; }
JS动画原理
weixin_50723416的博客
04-02 243
动画事件原理：通过定时器 setInterval()不断移动盒子位置。 动画盒子需要加定位 position：relative | absolute | fixed 动画函数封装 animate 缓动动画效果原理：使得元素运动有所变化。 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来 核心算法：(目标值-现在的位置）/ 10 做为移动的距离步长 停止条件：让当前盒子位置等于目标位置就停止定时器 步长值需要取整Math.ceil | Math.floor <!DOCTYPE html> &l
JS实现简单的动画效果 —— 缓动动画的原理
爱前端的程序媛的博客
03-18 1671
写在前面 每天都奔赴自己的热爱，是多么幸福的一件事。 唯有美食和理想不可辜负。 CSS中学习了动画，是使用keyframe定义动画，然后添加动画。今天主要是用JS实现动画效果，同时理解动画的原理。emmmm ， 本篇文章介绍的是元素移动的效果的原理，其他的还没有了解。见谅见谅哈。 动画的原理 动画移动的原理：1.获得元素当前位置；2.每隔一定时间元素位置 加 1；2.使用定时器重...
前端星-JS动画的基本原理（一）
xinyu_huo的博客
04-11 182
时间：4.11 题目：JS动画的基本原理（一） 主讲人：月影 1.动画的基本原理 定时器改变对象的属性 根据新的属性重新渲染动画 2.动画的种类 Javascript动画：操作DOM、Canvas CSS动画：transition、animation SVG动画：SMIL 3.JS动画优缺点 优点：灵活度、可控性、性能 缺点：易用性 简单动画例子： let rotation = 0; ...
JS动画的多种实现方式及原理
千里码007的博客
04-15 3707
本文主要介绍了JS动画的三种实现方式及其原理，分别为： 1.利用setInterval控制动画位移量 这里举例说明如何通过setInterval定时器来实现匀速动画和缓慢减速动画，以及为何缓慢减速动画中为什么需要用到Math.floor和Math.ceil两个函数，具体如下： <!DOCTYPE html> <html> <head lang="en"> &...
android-animation-collections:android动画集合
05-02
"android-animation-collections" 是一个专注于Android动画的项目集合，其中包含了多种动画效果的实现，旨在帮助开发者更好地理解和运用Android动画系统。下面将详细介绍其中的两个主要组件：ShakeAnimation 和 ...
bubble-animation-shader:three.js和glsl的气泡动画
05-02
气泡动画着色器 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 yarn build 将要生产的应用程序生成到dist文件夹。 它在...
RecyclerView-Animation-Demo:RecyclerView-动画
05-29
- 自定义动画：可能涉及到对View动画（Animation）和属性动画（Property Animation）的使用，通过`ObjectAnimator`或`ValueAnimator`创建自定义动画。 - Android布局设计：可能包含LinearLayoutManager、...
css3-animation-generator：chrome插件css3动画生成器
02-05
Chrome插件Css3动画快速给页面加上炫酷酷css3动画的chrome插件。使用1.从chrome webstore下载2.直接下载crx文件如果无法访问到chrome的应用商城，可以选择下载app.crx文件，在chrome中打开chrome://extensions/页面...
Text-Animation-Effect:文字动画效果
03-16
本文将深入探讨“Text-Animation-Effect”这个主题，主要关注使用CSS来实现文字动画效果。 首先，CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现...
JS动画_碰撞
qq_38096598的博客
09-21 165
小球碰撞效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小球碰壁</title> </head> <body> <div id="borderDiv" style="width: 440px;height...
用 Animation 实现匀速旋转
热门推荐
纸箱猪的专栏
04-12 1万+
年初参加 GGJ 的时候，我曾想偷懒用 Animation 实现物体的匀速旋转。思路很简单，只需要0度和360（或-360）度两个关键帧，然后将动画设为循环播放。当时以为这样事情就成了。谁知做出来的效果是下面这样，物体转完一圈后会停一下：我知道问题就在动画曲线上：只要把曲线弄成一条直线就行。但是当时折腾了一会儿也没调出一条漂亮的直线，因此还是改用代码来实现匀速旋转。今天发现其实根本不用手调，只要右...
Animation 实现匀速旋转
最新发布
sinat_39348382的博客
01-15 516
Unity 动画
使用animation实现匀速无缝循环滚动动画，鼠标悬停停止运动
qq_37607451的博客
10-20 6517
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播</title> <!-- 运动 --> <!-- voison：0.1 1 2 3 4 5 6 1 1走到6再到1，这时如果没有1这张图就有一...
js_animation
07-11 846
键盘事件//1.onkeydown 键盘事件 按下去一直有 document.onkeydown = function(ev){//ev 形参（名字随意）， //它代表的是本次事件的对象，它里面包含一些这次事件的一些信息 console.log(ev); } //2.onkeypress 能识别大写,不能识别 ctrl alt shift 上 下 左 右 等特殊按键 //3.on...
用animation做无缝匀速滚动
行如逆水行舟，不进则退
04-02 4700
用animation做无缝匀速滚动原理应用 原理 最外层需要一个可视大小的盒子（黑色部分）。记得给这个盒子添加高度（高度和蓝粉色盒子一样） 在可视的盒子里需要放一个盒子，该盒子的宽度就是粉色蓝色盒子宽度的总和，其实也就是你需要动画部分宽度的两倍。然后需要给这个box一个相对定位 position: relative 粉色和蓝色盒子里放的是一样的东西，通过这样来达到视觉上无缝的效果。需要给这两个盒子加绝对定位 position: absolute 。我们就是通过改变它们lefft right 值来实现滚动
JavaScript封装一个动画函数的实现原理（代码）
小助手爱编程
09-14 141
点击获取源码https://zhuanlan.zhihu.com/p/410269979 <!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-...
匀速动画函数封装代码
前端小白的博客
06-28 271
function my$(id) { return document.getElementById(id); } function animate(element,target) { clearInterval(element.timer); element.timer = setInterval(function () { var step = 10; ...
javaScript：碰撞检测
qq_52799985的博客
10-10 926
碰撞检测在计算机图形、模拟、交互设计以及各种应用中都具有广泛的应用，它可以确保物体之间的正确交互，提供更真实和高效的体验，并有助于避免潜在的问题和冲突。
Animation
Schrodinge的博客
03-07 297
Animation （一）运动原理 利用定时器，实现不断改变对象的样式，从而产生动画的效果 （二）动画分类 匀速运动 速度保持不变的运动 案例：飞翔的小鸟 //1.获取元素及初始化速度变量 let bird = document.querySelector('img'); let speed = 7; //2.设置定时器 let timer = setInterval(()=&gt;{ //2....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值