|
帧动画实现方式大致分为三种，下面的css3动画和js动画的图片均使用雪碧图（我使用的雪碧图布局方式是top-down，无边距）实现，雪碧图生成方法可参考使用Grunt生成雪碧图_HYEHYEHYE的博客-CSDN博客
一、Gif图
这个方式是最简单快捷的，适合做一些比较简单、色彩单一的动画。因为
画质上，gif 支持颜色少(最大256色)、Alpha 透明度支持差，图像锯齿毛边比较严重；
交互上，不能直接控制播放、暂停、播放次数，灵活性差；
性能上，gif 会引起页面周期性的绘画，性能较差。
二、css3动画
????????css3动画主要是利用animation属性，通过改变背景图片的background-position或图片容器的transform:translate3d()来实现，这两种方式区别不大。代码如下
? ? ? ? 中间层类名为sprite-con的div是为了做适配，让图片在水平方向和垂直方向始终居中显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.sprite-wp {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.sprite-con{
/* 每一帧图片的宽高 */
width: 1920px;
height: 1080px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sprite {
/* 雪碧图的宽高 */
width: 1920px;
height: 63720px;
will-change: transform;
background: url(../images/spritesheet.jpg) no-repeat center top;
animation: frame 7375ms steps(59) both infinite;
}
/* 方法一：连续切换雪碧图位置 */
/* @keyframes frame {
0% {background-position: 0 0;}
100% {background-position: 0 -63720px;}
} */
/* 方法二：连续切换雪碧图容器位置 */
@keyframes frame {
0% {transform: translate3d(0,0,0);}
100% {transform: translate3d(0,-63720px,0);}
}
</style>
</head>
<body>
<div class="sprite-wp">
<div class="sprite-con">
<div class="sprite" id="sprite"></div>
</div>
</div>
</body>
</html>
其实还可以通过改变背景图片的background-image来实现（不推荐），但是这种方式有缺点：
- 多张图片会带来多个 HTTP 请求
- 每张图片首次加载会造成图片切换时的闪烁，图片需要预加载，导致页面加载时间过长
- 不利于文件的管理
三、js动画
js动画有四种，排除上面通过改变background-image这种，就有三种。分别是
通过js控制background-position或transform:translate3d()来实现
????????对比animation的方式，这种方式较灵活，可控制。内置的requestAnimationFrame1秒可绘制60次，但是我的序列帧图片是根据1秒8帧制作的，如果直接使用requestAnimationFrame相当于把动画播放速度加快了将近8倍，所以我这里加了时间间隔判断，巧妙的将频率降为8帧每秒，使动画正常速率播放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.sprite-wp {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.sprite-con{
/* 每一帧图片的宽高 */
width: 1920px;
height: 1080px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sprite {
/* 雪碧图的宽高 */
width: 1920px;
height: 63720px;
will-change: transform;
background: url(../images/spritesheet.jpg) no-repeat center top;
}
</style>
</head>
<body>
<div class="sprite-wp">
<div class="sprite-con">
<div class="sprite" id="sprite"></div>
</div>
</div>
<script>
(function () {
// requestAnimationFrame兼容性写法
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id){clearTimeout(id)}
}
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||function(cb){ return setTimeout(cb,1000/60)}
})()
// 屏幕刷新率
var fps = 8 // 一秒8帧
var fpsInterval = 1000 / fps
var last = new Date().getTime() //上次执行的时刻
var sprite = document.getElementById("sprite"),
picHeight = 1080, // 每一帧图片的高度
k = 59, // 帧数
i = 0,
timer = null;
// 重置背景图片位置
sprite.style.transform = "translate3d(0,0,0)";
// 或
// sprite.style.backgroundPosition = "0 0";
// 改变背景图移动
function changePosition() {
// 执行时的时间
var now = new Date().getTime()
var elapsed = now - last;
if (elapsed > fpsInterval) {
last = now - (elapsed % fpsInterval); //校正当前时间
sprite.style.transform = "translate3d(0," + (-picHeight * i) + "px,0)";
// 或
// sprite.style.backgroundPosition = "0 "+(-picHeight*i)+"px";
i++;
if (i == k) {
i = 0;
}
}
window.requestAnimationFrame(changePosition);
}
window.requestAnimationFrame(changePosition);
})();
</script>
</body>
</html>
通过js来控制Canvas图像绘制
????????通过Canvas制作帧动画的原理是用drawImage方法将图片绘制到Canvas上，不断擦除和重绘就能得到我们想要的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.sprite-wp {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.sprite-con{
/* 每一帧图片的宽高 */
width: 1920px;
height: 1080px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sprite {
/* 雪碧图的宽高 */
width: 1920px;
height: 63720px;
will-change: transform;
background: url(../images/spritesheet.jpg) no-repeat center top;
}
</style>
</head>
<body>
<div class="sprite-wp">
<div class="sprite-con">
<canvas id="canvas" width="1920" height="1080"></canvas>
</div>
</div>
<script>
(function () {
// requestAnimationFrame兼容性写法
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id){clearTimeout(id)}
}
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||function(cb){ return setTimeout(cb,1000/60)}
})()
// 屏幕刷新率
var fps = 8 // 一秒8帧
var fpsInterval = 1000 / fps
var last = new Date().getTime() //上次执行的时刻
var timer = null,
canvas = document.getElementById("canvas"),
context = canvas.getContext('2d'),
img = new Image(),
width = 1920,
height = 1080,
k = 59,
i = 0;
img.src = "../images/spritesheet.jpg";
function drawImg() {
// 执行时的时间
var now = new Date().getTime()
var elapsed = now - last;
if (elapsed > fpsInterval) {
last = now - (elapsed % fpsInterval); //校正当前时间
context.clearRect(0, 0, width, height);
i++;
if (i == k) {
i = 0;
}
context.drawImage(img, 0, i * height, width, height, 0, 0, width, height);
}
window.requestAnimationFrame(drawImg);
}
img.onload = function () {
window.requestAnimationFrame(drawImg);
}
})();
</script>
</body>
</html>
参考来源：帧动画的多种实现方式与性能对比_前端向朔-CSDN博客_前端帧动画
|