【前端动画】实现动画的6种方式

引言

动画基本上分类两类:补间动画和帧动画。

  • 补间动画:补齐中间的动画。由浏览器帮助补齐中间的状态,开发者只需要定义开始和结束的状态。
  • 帧动画:除了开始与结束状态,开发者还可以定义中间关键帧的状态,可以制作复杂的动画。

通常在前端中,实现动画的方案主要有6种:

  • javascript直接实现;
  • SVG(可伸缩矢量图形);
  • CSS3 transition;(补间动画)
  • CSS3 animation;(帧动画)
  • Canvas动画;
  • requestAnimationFrame;

javascript 直接实现动画

其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

示例

<!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>
		let elem = document.getElementById('rect');
		let left = 0;
		let timer = setInterval(function(){
			if(left<window.innerWidth-200){
				elem.style.marginLeft = left+'px';
				left ++;
			}else {
				clearInterval(timer);
			}
		},16);
	</script>
</body>
</html>

Jquery的animate()方法就是这种方式实现的。

存在的问题

javascript 实现动画通常会导致页面频繁性重排重绘,消耗性能,一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。(❤️ 现在关注【前端修罗场】,后台回复【666】,即可获取一份【免费的优质学习资料】,一起学习,一起进步~

Tip:为什么是16ms

上面例子中,我们设置的setInterval时间间隔是16ms。一般认为人眼能辨识的流畅动画为每秒60帧,这里16ms比(1000ms/60)帧略小一些,但是一般可仍为该动画是流畅的。
在很多移动端动画性能优化时,一般使用16ms来进行节流处理连续触发的浏览器事件。例如对touchmove、scroll事件进行节流等。通过这种方式减少持续事件的触发频率,可以大大提升动画的流畅性。

SVG

SVG动画由SVG元素内部的元素属性控制,一般通过一下几个元素控制:

  • : 用于控制动画延时
  • :对属性的连续改变进行控制
  • :颜色变化,但用就能控制
  • :控制如缩放、旋转等几何变化
  • :控制SVG内元素的移动路径

示例

<!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="0"/>
			<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>

这里推荐一个在sublime text3中使用svg提示插件:svg snippet。

比较

SVG的一大优势是含有较为丰富的动画功能,原生绘制各种图形、滤镜和动画,并且能被js调用。html是对dom的渲染,那么svg就是对图形的渲染
但是,另一方面元素较多且复杂的动画使用svg渲染会比较慢,而且SVG格式的动画绘制方式必须让内容嵌入到HTML中使用。CSS3的出现让svg的应用变得相对少了。

CSS3 transition

transition是过度动画。但是transition并不能实现独立的动画,只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡,而不是马上改变。

注意

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

CSS3 animation

animation 算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制,页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。

比较

CSS3最大的优势是摆脱了js的控制,并且能利用硬件加速以及实现复杂动画效果。

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">
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");
		let left = 0;
		let 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>

注释:通过getContext()获取元素的绘制对象,通过clearRect不断清空画布并在新的位置上使用fillStyle绘制新矩形内容实现页面动画效果。

比较

Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况,完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画。

requestAnimationFrame

requestAnimationFrame是另一种Web API,原理与setTimeout和setInterval类似,都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi,在性能上比另两者要好。
前面提到,大多数显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过这个频率用户体验也不会提升。
因此,最平滑动画的最佳循环间隔是 1000ms/60 ,约16ms。这个循环间隔重绘的动画是最平滑的,因为这个速度最接近浏览器的最高限速。

通常,我们将执行动画的每一步传到requestAnimationFrame中,在每次执行完后进行异步回调来连续触发动画效果。

示例

<!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;

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

我们注意到,requestAnimationFrame只是将回调的方法传入到自身的参数中执行,而不是通过setInterval调用。你要知道,无论是setInterval()还是setTimeout()都不十分精确。为它们传入的第二个参数,实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行时间。如果队列前面已经加入其他任务,那动画代码就要等前面的任务完成后再执行。

总结

复杂的动画是通过一个个简单的动画组合实现的。基于兼容性问题,通常在项目中,一般在

  • 桌面端浏览器推荐使用javascript直接实现动画或SVG方式;
  • 移动端可以考虑使用CSS3 transition、CSS3 animation、Canvas或requestAnimationFrame方式

图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程轨迹_

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值