透明背景gif图的锯齿是个什么鬼

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

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


透明背景gif图的锯齿是个什么鬼_第1张图片
帧动画效果

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


透明背景gif图的锯齿是个什么鬼_第2张图片
导出时效果

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

透明背景gif图的锯齿是个什么鬼_第3张图片
把两帧图像横向拼合

接下来,新建一个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%的重复循环。


透明背景gif图的锯齿是个什么鬼_第4张图片
step(n,x)函数示意图

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

你可能感兴趣的:(透明背景gif图的锯齿是个什么鬼)