JavaScript 动画_jquery 动画

JavaScript 动画_jquery 动画JavaScript—动画一、动画原理通过定时器setInterval不断移动盒子位置。步骤:获得盒子当前位置;让盒子在当前位置加上1个移动距离;利用定时器不断重复这个操作;结束定时器。注意:元素需要加定位。例:HTML代码:<!DOCTYPEhtml><html> <head> <metacharset=”utf-8″/> <title></title> </head>

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

JavaScript动画

一、动画原理

通过定时器setInterval不断移动盒子位置。

步骤:

  1. 获得盒子当前位置;
  2. 让盒子在当前位置加上1个移动距离;
  3. 利用定时器不断重复这个操作;
  4. 结束定时器。

注意:元素需要加定位。

例:

HTML代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
		<div class="move">
			
		</div>
		<script src="js/js.js"></script>
	</body>
</html>

CSS代码:

.move{ 
   
	width: 100px;
	height: 100px;
	background-color: pink;
	position: absolute;
	left: 0;
}

JS代码:

var div = document.querySelector('.move');		//获取需要移动的元素
var timer = setInterval(function() { 
   			//新建一个定时器
	if (div.offsetLeft >= 400) { 
   				//停止定时器的条件:移动距离大于等于400px时停止
		clearInterval(timer);					//停止定时器
	}
	div.style.left = div.offsetLeft + 1 + 'px';	//定时器执行的操作:每1毫秒移动一个像素
}, 1)

二、简单动画函数封装

注意函数需要传递的2个参数:动画对象移动的距离

function animate(obj,target) { 
   
	var timer = setInterval(function() { 
   
		if (obj.offsetLeft >= target) { 
   
			clearInterval(timer);
		}
		obj.style.left = obj.offsetLeft + 1 + 'px';
	}, 1)
}
var div = document.querySelector('.move');	//获取元素
animate(div,300);							//调用函数

三、给不同元素记录不同定时器

function animate(obj,target) { 
   
	clearInterval(obj.timer);				//一个元素同时只能存在一个定时器
	obj.timer = setInterval(function() { 
   	//给不同元素添加定时器
		if (obj.offsetLeft >= target) { 
   
			clearInterval(obj.timer);
		}
		obj.style.left = obj.offsetLeft + 1 + 'px';
	}, 1)
}

四、缓动效果原理

缓动动画就是让元素运动速度有所变化,如常见的“慢慢停下来”。

思路:

  1. 让盒子每次移动的距离变小,速度就会慢下来;
  2. 核心算法:(目标值 – 现在的位置)/ 10 作为每次移动的距离步长;
function animate(obj,target) { 
   
	clearInterval(obj.timer);
	obj.timer = setInterval(function() { 
   
		var step = (target - obj.offsetLeft) / 10;
		step = step > 0 ? Math.ceil(step) : Math.floor(step);
		if (obj.offsetLeft == target) { 
   
			clearInterval(obj.timer);
		}
		obj.style.left = obj.offsetLeft + step + 'px';
	}, 15)
}

五、动画函数添加回调函数

回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程叫做回调

回调函数写的位置:定时器结束位置。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/181692.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 为有机会进大厂,程序员必须掌握的核心算法有哪些?

    由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过…

  • linux tar命令打包整个文件夹详解,Linux tar打包命令详解

    linux tar命令打包整个文件夹详解,Linux tar打包命令详解Linux系统中,最常用的归档(打包)命令就是tar,该命令可以将许多文件一起保存到一个单独的磁带或磁盘中进行归档。不仅如此,该命令还可以从归档文件中还原所需文件,也就是打包的反过程,称为解打包。使用tar命令归档的包通常称为tar包(tar包文件都是以“.tar”结尾的)。tar命令做打包操作当tar命令用于打包操作时,该命令的基本格式为:[root@localhost~]#…

  • Odin Inspector 系列教程 — Type Filter Attribute

    Odin Inspector 系列教程 — Type Filter AttributeTypeFilterAttribute特性:对输入的value进行自定义过滤,只显示需要的类型完整示例代码usingSirenix.OdinInspector;usingSirenix.Utilities;usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usin…

  • 什么叫一层交换机,二层交换机,三层交换机?

    什么叫一层交换机,二层交换机,三层交换机?

  • 数据库基本操作和常用命令

    1.MySQL数据库2.SQL语句###01数据库概念*A:什么是数据库数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据进行增加,修改,删除及查询操作。*B:什么是数据库管理系统数据库管理系统(DataBaseManagementSystem,DBMS):指一种操作和管理数据库的大型软件,用于建立、使用和维护数据库,…

  • 监督学习,非监督学习,半监督学习和增强学习

    监督学习,非监督学习,半监督学习和增强学习根据机器学习可以解决的问题,可以将机器学习分为:分类和回归如果根据机器学习的算法分类,可以将机器学习分为:

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号