javascript动画之缓动动画

最新推荐文章于 2022-06-22 05:27:10 发布
最新推荐文章于 2022-06-22 05:27:10 发布
阅读量225 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/echokkk/article/details/78903340
版权

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		div {
			width: 100px;
			height: 100px;
			background: yellow;
			border: 1px solid #000;
			margin-top: 20px;
			position: relative;
		}
	</style>
</head>
<body>
	<button>运动到200</button>
	<button>运动到400</button>
	<div>盒子</div>
	<script>
		var btn1 = document.getElementsByTagName("button")[0];
		var btn2 = document.getElementsByTagName("button")[1];
		var box = document.getElementsByTagName("div")[0];
		var timer = null;
		btn1.onclick = function(){
			animation(400,box);
		};
		btn2.onclick = function(){
			animation(800,box);
		}
		function animation(target,ele){
			clearInterval(timer);
			timer = setInterval(function(){
				var val = target - ele.offsetLeft;
				var speed = target > ele.offsetLeft ? Math.ceil((target-ele.offsetLeft)/10) : Math.floor((target-ele.offsetLeft)/10);
				ele.style.left = ele.offsetLeft + speed + "px";
				if(Math.abs(Math.ceil(val))<Math.abs(speed)){
					ele.style.left = target + "px";
					clearInterval(timer);
				};
			},30);
		}
	</script>
</body>
</html>


背着吉他的蝙蝠女侠
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现缓动动画
01-22
JavaScript原生定时器实现动画的缓动效果，供大家参考，具体内容如下 原理很简单通过定时器修改边距达到移动动画效果 实现速度的变化 缓动必然移动速度会有变化,这里需要用到一个小公式或者说算法? 移动单位 = ...
JavaScript之实现缓动动画效果
weixin_53849180的博客
10-23 3659
思路 1.首先缓动动画函数封装 ，obj目标对象 ，target目标位置，这样可以不用每次要使用动画效果的时候都写一次js代码， 2.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来 3.核心算法：（目标值-现在的位置）/10作为每次移动得距离 步长(这里步长要取整) 4.停止条件：让当前盒子位置等于目标位置就停止定时器 js代码如下 function animate(obj,target){ // 先清除以前得定时器，只保留当前得一个定时器执行 clearInterval(
JavaScript动画
小王的博客
08-26 7199
在设计前端页面时，会用到很多效果，我们可以采用CSS样式或JavaScript来实现，在这里给大家介绍JS动画
JavaScript之动画函数封装
m0_48375854的博客
12-24 2467
动画函数一、动画函数原理 一、动画函数原理 核心原理：通过定时器 setInterval() 不断移动盒子位置。 实现步骤： 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left 如下所示： ...
JavaScriptAPI_缓动动画原理及封装
热门推荐
JiuMeilove的博客
06-22 2万+
自然界中的物体从起点移动到终点时，速度从来不是一成不变的。汽车启动时速度会由慢变快，停止时则由快变慢；篮球落地时会在地上来回反弹，并逐渐停止运动。大家都期待事物的呈现遵循一定的运动规律，所以，在网页中适当的使用动画能让用户得到更舒适的体验。要制作出更加自然的动画，就需要理解什么是缓动函数。简单来说，缓动函数用于控制动画从初始值运动到最终值的速率。核心原理: 通过定时器色图Interval()不断地移动盒子位置 实现步骤示例 不想写了,下次再写...
JavaScript 动画效果
xiangxiongfly
06-10 7948
文章目录JS动画实现概述平滑动画无缝连续滚动特效轮播图轮播图淡入淡出效果 JS动画实现 概述 在CSS3中可以通过transition过渡属性可以实现动画 JS可以利用CSS3中的transition属性实现元素动画 平滑动画 利用CSS transition属性实现平滑动画效果 <button>开始动画</button> <div id="box"></div> <script> var btn = document.queryS
JavaScript之粒子动画学习笔记
05-25
JavaScript之粒子动画学习笔记。节省你的时间
wave:Javascript 动画缓动函数
06-28
JavaScript 动画计时函数框架。 看演示： : 用法 有两种方法可以获得缓动函数 按名字： var easing = wave ( 'easeInCubic' ) ; 通过贝塞尔点： var easing = wave ( [ 0 , 1 ] ) ; // or var easing = wave ...
css+javascript 实现扇形导航动画效果
06-08
css+javascript 实现扇形导航，有动画效果，从找到到收回，可以直接下载使用
浅析JavaScript动画
10-24
JavaScript 动画我们可以使用 JavaScript 来创建动态的图像。实例 按钮动画 利用两个不同的事件来驱动两个相应的函数,来切换两张对应的图片以创造出动画效果。
javascript之ajax请求数据demo
背着吉他的蝙蝠女侠的博客
01-13 897
demo代码如下： html的demo代码如下： Document * { margin: 0; padding: 0; } .imgbox { width: 256px; height: 170px; border: 1px solid #000; margin: 20px auto; } .imgbox img {
ajax之使用get方式向服务器发送请求
背着吉他的蝙蝠女侠的博客
01-06 876
html代码如下： Document var username = document.getElementById("username"); var address = document.getElementById("address"); var btn = document.getElementById("btn"); c
javascript之style.left和offsetLeft的区别
背着吉他的蝙蝠女侠的博客
12-23 665
offsetLeft取到的值是数值型的，只能取值，不能赋值。 style.left在取值的时候要事先定义好，否则取到的值为空值，不仅仅可以取值，而且还可以赋值，取到的值为字符串类型的。  demo代码如下： Document * { margin: 0; padding: 0; } .box { width: 600px; height: 6
javascript之获取鼠标在盒子中的位置
背着吉他的蝙蝠女侠的博客
01-01 618
demo代码如下： 鼠标在盒子中的坐标 * { margin: 0; padding: 0; } div { width: 400px; height: 400px; font-size: 20px; margin: 100px auto; border: 1px solid #000; } 鼠标在盒子中的
javascript的浏览器对象之window对象
背着吉他的蝙蝠女侠的博客
12-09 457
window对象：是BOM的核心，window对象指当前的浏览器窗口，所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。 全局变量是window对象的属性；全局函数是window对象的方法。document也是window对象之一。 demo代码如下： Document 按钮1 按钮2 var btn1 = document.getEl
javascript浏览器对象之screen对象
背着吉他的蝙蝠女侠的博客
12-09 404
1. screen对象：window.screen对象包含有关用户屏幕的信息。 2.属性：    screen.availWidth表示可用屏幕的宽度；screen.availHeight表示可用屏幕的高度；screen.Height表示的是屏幕高度；screen.Width表示屏幕宽度 demo代码如下： Document 按钮1 按钮2 console.l
ajax之post请求
背着吉他的蝙蝠女侠的博客
01-07 377
html代码如下： post请求 var btn = document.getElementById("btn"); btn.onclick = function(){ var ajaxObj = new XMLHttpRequest(); ajaxObj.open("post","first.php"); // 如果使
javascript浏览器对象之location对象
背着吉他的蝙蝠女侠的博客
12-09 361
1. location对象：window.location对象用于获取当前页面的地址（URL），并把浏览器重定向到新的页面。 2. location对象的属性：location.hostname返回web主机的域名 location.pathname返回当前页面的路径和文件名 location.port返回web主机的端口 location.protocol返回所使用的web协议（http
javascript之缓慢滚动到顶部
背着吉他的蝙蝠女侠的博客
12-26 339
demo代码如下： 回到顶部 * { margin: 0; padding: 0; } .container { width: 100%; margin: 0 auto; } .top { width: 100%; height: 200px; background: red; } .content {
javascript 动画小游戏
最新发布
08-13
JavaScript动画小游戏是一种使用JavaScript编程语言开发的小型游戏。这种游戏通常具有简单的规则和操作，但是通过使用JavaScript的动画功能，可以给玩家带来更加丰富和有趣的游戏体验。 在这种类型的游戏中，开发者可以使用JavaScript中的动画库或自定义动画函数来创建各种动画效果。比如，可以通过改变元素的位置、大小、颜色等属性来实现平滑的动画过渡。这种动画效果的应用可以使得游戏场景更加生动和沉浸式。 除了动画效果，JavaScript动画小游戏还可以包括玩家的操作，比如点击、拖拽等。通过监听用户的交互事件，可以触发相应的动画效果或游戏行为，增加游戏的交互性和挑战性。 例如，一个简单的JavaScript动画小游戏可以是一个跳跃的小球避开障碍物的游戏。玩家控制小球的移动，通过点击屏幕或按键来让小球跳起，同时要躲避障碍物。通过改变小球的位置和障碍物的出现位置，可以创建出具有挑战性和变化性的游戏体验。 除了开发过程中的动画效果和交互操作，JavaScript动画小游戏还可以通过添加音效、计分系统、关卡设置等功能来增加游戏的趣味性和可玩性。 总之，JavaScript动画小游戏是一种利用JavaScript编程语言创建的小型游戏，通过运用动画效果和交互操作，为玩家提供丰富，有趣和具有挑战性的游戏体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值