前端实现动画效果的几种方式（有实例）

最新推荐文章于 2024-05-11 02:13:18 发布
最新推荐文章于 2024-05-11 02:13:18 发布
阅读量9k 收藏 43
点赞数 4
分类专栏： js基础引导 js进阶 文章标签： 前端 动画效果 多种方式实现 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44220680/article/details/101446841
版权

现在对于前端的要求变大了很多，随着时代进步，人们的审美越来越挑剔，对于用户交互的体验成为了公司竞争的一大助力。而动画效果，可以说是最有效的提高用户体验的方式了。但是对于前端来说，实现动画的方法也有很多种，今天博主就来和各位一起探讨一下，实现动画的几种方式。

JS直接实现

最为简单暴力无脑的一种操作，通过js修改div（盒子模型）的属性以及运用 setTimeOut() 方法实现动画。

  • 实现：
	<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			#rect {
				width: 200px;
				height: 200px;
				background: #ccc;
			}
		</style>
	</head>
	
	<body>
		<div id="rect"></div>
		<script>
			//获取rect元素
			var elem = document.getElementById('rect');
			var left = 0;
			//定时器实现移动效果
			var timer = setInterval(function() {
				if(left < window.innerWidth - 200) {
					elem.style.marginLeft = left + 'px';
					left++;
				} else {
					clearInterval(timer);
				}
			}, 16);
		</script>
	</body>
</html>
  • 效果图：以上代码可以直接运行，复制到编译器即可。
  • 补充：jquery有自己封装一些常见的动画效果。你可以通过点击这段话进行详细访问
  • 代码解析：
    1.通过JS获取元素。
    2.通过setInterval（）定时器实现marginLeft样式的修改从而实现动画效果。

SVG

SVG 是使用 XML 来描述二维图形和绘图程序的语言。-

  • 实现：
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<svg id="box" width="800" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1">
			<rect x="" y="" width="100" height="100" fill="rgb(255,0,0);" stroke="" stroke-width="">
				<set attributeName="x" attributeType="XML" to="100" begin="4s" />
				<animate attributeName="x" attributeType="XML" begin="0s" dur="4s" from="0" to="300" />
				<animate attributeName="y" attributeType="XML" begin="0s" dur="4s" from="0" to="300" />
				<animateTransform attributeName="transform" begin="0s" dur="4s" type="scale" from="1" to="2" repeatCount="1" />
				<animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="4s" repeatCount="1" />
			</rect>
		</svg>

	</body>

</html>
  • 效果图：以上代码可以直接运行，各位自行编译即可。
  • 代码解析
    1.包含animate标签的为相互覆盖的关系，各位可以通过注释其他行看到该行实现的动画效果。
    2.如果想要详细了解请找度娘。

CSS3 transition

transition是过渡动画，具体效果请看演示。

  • 实现
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			#rect {
				width: 200px;
				height: 200px;
				transform: width 2s;
				background: #ccc;
				-moz-transition: width 2s;
				/* Firefox 4 */
				-webkit-transition: width 2s;
				/* Safari and Chrome */
				-o-transition: width 2s;
				/* Opera */
			}
			
			#rect:hover {
				width: 500px;
			}
		</style>
	</head>
	
	<body>
		<div>请将鼠标移入方块</div>
		<div id="rect"></div>
	</body>

</html>

  • 效果图：以上代码可以直接运行，各位自行编译即可。

  • 注意：
    在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。所以我们通常添加**transform:translate3D(0,0,0)或transform:translateZ(0)**来开启移动端动画的GPU加速，让动画过程更加流畅。

CSS3 animation

更加直白简单好用的属性。

  • 示例：
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<style >
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite;
				/*Safari and Chrome*/
			}
			
			@keyframes mymove {
				from {
					left: 0px;
				}
				to {
					left: 200px;
				}
			}
			
			@-webkit-keyframes mymove
			/*Safari and Chrome*/
			
			{
				from {
					left: 0px;
				}
				to {
					left: 200px;
				}
			}
		</style>
	</head>

	<body>

		<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

		<div></div>

	</body>

</html>
  • 效果图：以上代码可以直接运行，各位自行编译即可。

requestAnimationFrame

requestAnimationFrame是另一种Web API，原理与setTimeout和setInterval类似，都是通过javascript持续循环的方法调用来触发动画动作。
但它与setTimeOut（）不同的是，他是根据浏览器的刷新同步进行动画。而定时器是按照自己的思路走的。（我不要你觉得，我要我觉得的那种）

  • 示例：
<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			div {
				width: 200px;
				height: 200px;
				background-color: #ccc;
			}
		</style>
	</head>

	<body>
		<div id="rect"></div>
		<script type="text/javascript">
			window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
				window.msRequestAnimationFrame;

			var elem = document.getElementById("rect");
			var left = 0;
			//自动执行持续性回调
			requestAnimationFrame(step);
			//持续该改变元素位置
			function step() {
				if(left < window.innerWidth - 200) {
					left += 1;
					elem.style.marginLeft = left + "px";
					requestAnimationFrame(step);
				}
			}
		</script>
	</body>

</html>
  • 效果图：以上代码可以直接运行，各位自行编译即可。

Canvas动画

canvas作为H5新增元素，是借助Web API来实现动画的。

  • 示例：
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<canvas id="canvas" width="700" height="550"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			var left = 0;
			var timer = setInterval(function() {
				ctx.clearRect(0, 0, 700, 550);
				ctx.beginPath();
				ctx.fillStyle = "#ccc";
				ctx.fillRect(left, 0, 100, 100);
				ctx.stroke();
				if(left > 700) {
					clearInterval(timer);
				}
				left += 1;
			}, 16);
		</script>
	</body>

</html>
  • 效果图：以上代码可以直接运行，各位自行编译即可。
XAIhan
关注
  • 4
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端动画实现
This is Devinroot...
03-13 1526
六、前端动画实现 动画的基本原理 1. 什么是动画？ 动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉*和变化错觉的过程 2. 动画的历史 常见的前端动画技术 Sprite动画、CSS动画、JS动画、SVG动画和WebGL动画 按应用分类 UI动画、基于Web的游戏动画和动画数据可视化 3. 计算机动画原理 计算机图形学: 计算机视觉的基础，涵盖点、线、面、体、场的数学构造方法。 (1) 几何和图形数据的输入、存储和压缩。 (2) 描述纹理、曲线、光影等算法。 (3) 物体图形
jQuery实现日期联动效果实例
10-21
在本文中，我们将深入探讨如何使用jQuery来实现日期联动效果，这是一种常见的前端交互功能，尤其在日历插件或表单验证中非常实用。日期联动通常指的是在一个日期选择器（如年、月、日）中选择一个日期后，根据所选...
js简单实现标签云效果实例
10-23
主要介绍了js简单实现标签云效果,基于miaov.js文件实现标签云的3D滚动效果,非常简单实用,需要的朋友可以参考下
前端动画实现浅析（前端常用动态解决方案）
coinisi_li的博客
09-16 1582
我们从动画的实现方法入手，了解浏览器的渲染，以及如何提升动画的性能。 一、常见动画实现方法： 1. GIF动画 gif 文件可以存多幅彩色图像，当数据逐幅读出并展示都在屏幕上，就可以构成一个简单的动画。 场景：GIF 比较适用于色彩较少的图片，比如页面卡通 icon、标志等等。 优点：1.制作的成本很低； 2.兼容性好； 3.方便开发使用。 缺点：1.画质上：色彩支持少，图像毛边严重； 2.交互上：不能控制动画的播放暂停，没有灵活性； 3.大小上：由于是无损压缩，每帧被完整的保存下来，导致文件很大
2024年Web前端最全Animate，2024年最新字节跳动前端岗面试题
最新发布
2401_84419493的博客
05-11 310
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求具体实现页面滚动效果的步骤如下。
前端简单动态圣诞树动画（HTML、js、css）
我们好像在哪见过
07-11 4795
用前端三大杀手Html5、CSS、Js来实现动态圣诞树
7款趣味性不错的前端特效动画及源码分享（附源码）
qq_50594742的博客
11-30 877
基于CSS的transform属性制作鼠标悬停切换表情动画特效，默认为笑脸表情，鼠标悬停上去切换爱心眼睛色眯眯的表情。预览获取核心代码 3D蜡烛烛光动画特效 基于three.js制作的3D蜡烛烛光动画特效，支持鼠标拖动旋转视角查看多方位特效。预览获取 核心代码 3D海洋粒子波浪动画特效 基于canvas制作的3D海洋粒子波浪特效，波浪粒子无限延伸非常逼真酷炫。预览获取 核心代码 看见流星先许个愿 基于canvas实现的流星雨星星动画特效，除了有流星的滑落还有一闪一闪的亮星星以及十五的月亮，美轮美奂的。预览获
CSS3网页常见动态效果……，web前端开发项目经验
peixiancccc的博客
04-03 1653
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
20款前端特效动画及源码
qq_50594742的博客
12-21 6111
最近优化项目时看到一些实用的特效 感觉还不错 下面就分享给大家 代码量过长的我就不展示了 可以去在这里资源站源码部分预览下载。
前端制作动画的几种方式（css3，js）
诚的博客
06-16 1389
制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。 1.css的transition。 语法： transition: property duration timing-function delay; property:填写需要变化的css属性如：width,line-height,font-size,color等; duration:完成过渡效果需要的时间
javascript动画算法实例分析
10-23
在本实例分析中，提到了几种常见的缓动效果，这些效果决定了动画从起点到终点的速度变化模式： 1. **Linear**：线性缓动，动画以恒定速度进行，没有加减速过程。 2. **Quadratic**：二次方缓动，呈现出逐渐加速或...
css实例教程 一款纯css实现的垂直时间线效果
09-25
在网页设计中，时间线是一种有效的展示事件顺序或流程的方式。垂直时间线尤其适用于任务管理、项目进度跟踪或者历史事件的呈现。本教程将介绍如何仅使用CSS来创建一个美观的垂直时间线，无需依赖JavaScript或其他...
原生js实现照片墙效果
10-14
【原生JS实现照片墙效果】是Web前端开发中一种常见的视觉展示技术，它通过JavaScript代码来布局和展示一组图片，使它们排列成美观且有层次感的展示墙。这种效果通常用于网站的相册、作品集或者产品展示区域，为用户...
前端实现动画的7种方式
Cookielog的博客
05-12 6095
1.css3的transition属性 transition只需指定动画的开始和结束状态，整个动画的过程是由特定的函数控制,你不用管它 2.css3的animation属性 animation可以对动画过程中的各个关键帧进行设置 3.原生JS动画 通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果 4.使用canvas绘制动画 Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲.
4款实用性前端动画特效分享（附在线演示）
qq_50594742的博客
03-14 530
分享4款非常不错的项目动画特效 其中有jQuery特效、canvas特效、CSS动画等等 下方效果图可能不是特别的生动 那么你可以点击在线预览进行查看相应的动画特效 同时也是可以下载该资源的。
HTML+CSS前端简单卡片动态效果
hexuhui0920的博客
01-16 1889
HTML+CSS前端简单卡片动态效果
分享7款前端动画特效（附效果图及在线演示）
qq_50594742的博客
03-05 435
分享7款好玩的前端动画特效 其中有CSS动画、SVG动画、js小游戏等等 下方效果图可能不是特别的生动 那么你可以点击在线预览进行查看相应的动画特效 同时也是可以下载该资源的。
jquery实现动画效果实例
05-30
以下是一个使用 jQuery 实现动画效果的例子： HTML 代码： ```html <div id="box"></div> <button id="btn">点击</button> ``` CSS 代码： ```css #box { width: 100px; height: 100px; background-color: red; position: relative; left: 0; top: 0; } ``` jQuery 代码： ```javascript $(document).ready(function() { $('#btn').click(function() { $('#box').animate({ left: '+=100px', top: '+=100px' }, 1000); }); }); ``` 解释： 当按钮被点击时，jQuery 会选择 `#box` 元素并调用 `animate()` 方法。在 `animate()` 方法中，我们定义了要执行的动画效果，这里是将 `#box` 元素向右和向下移动 100 像素，一共需要 1 秒钟的时间完成动画效果。 通过这个例子，我们可以看到 jQuery 的 `animate()` 方法可以轻松地实现动画效果，并且可以设置动画的时间、速度、缓动方式等参数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值