搞搞技术 | 透明背景gif图的锯齿是个什么鬼

那天老板要做一个招聘的H5，里面有很多小动画。设计师就做了好多gif动图给我，把它们都放上之后，我才发现边缘竟然都有锯齿。

我就去找设计师，设计师瞪着无辜的大眼睛，让我看着她再导一遍。下面是她设计好的动图，在ps里面演示没有任何问题，旁边都是很温和的渐变。

帧动画效果

可是在导出gif预览的时候，这些渐变都消失了，换来的是很突兀的变化。这个边缘如果在白色背景下还好，如果在其他颜色下，就会显示出很明显的锯齿。我怀疑她的参数设置不对，就改变颜色、仿色、杂边这些参数，结果还是一样，只能放弃这个办法。

导出时效果

无意中研究了一下别人的代码，发现了一种比较偏的办法——动画。大致原理就是：将所有帧的图像拼合在一起，作为背景图像，通过控制background-position轮流显示每一帧。看图：

把两帧图像横向拼合

接下来，新建一个div标签，给它定一个宽和高，并使用该图像作为其背景。给它添加如下样式：

.create-gif{
animation:togif 400ms steps(2) infinite;
-webkit-animation:togif 400ms steps(2) infinite;
-moz-animation:togif 400ms steps(2) infinite;
-ms-animation:togif 400ms steps(2) infinite;
-o-animation:togif 400ms steps(2) infinite; }

@keyframes togif { 0% {background-position:0 0;} 100% {background-position:200% 0;}
}
@-webkit-keyframes togif { 0% {background-position:0 0;} 100% {background-position:200% 0;}
}
@-moz-keyframes togif { 0% {background-position:0 0;} 100% {background-position:200% 0;}
}
@-ms-keyframes togif { 0% {background-position:0 0;} 100% {background-position:200% 0;}
}
@-o-keyframes togif { 0% {background-position:0 0;} 100% {background-position:200% 0;}
}

其实，这个动画只是规定在开始和结束时背景的变化。关键点在于动画运动的曲线——step(2)，这是一个阶梯函数，其实应该是steps(n,x)，第一个参数表示该动画被平分为n步，x是一个可以省略的参数，有两个值（start和end）可选，默认为end。我画了一个示意图如下，该函数会将动画属性从0到100%之间平分，每个节点为1帧。在这里平分为两份，有3个节点，对应就是background-position为0、100%、200%的状态，默认从第一个节点开始，就形成了background-position为0、100%的重复循环。

step(n,x)函数示意图

这样，因为png图片不会有锯齿边缘，通过动画生成gif动画之后也不会有。不过，好像这样处理设计师的工作量非但没有减轻，程序员的工作量反而加重了(T_T)~~~