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

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>
  • 效果图：以上代码可以直接运行，各位自行编译即可。