Alpha通道帧动画在Web上的实现

问题:

长期与图形打交道的朋友应该很清楚支持动画的格式目前只有GIF动画,然而,GIF格式最多只能支持256色,并且只有全透明,不能实现半透明的效果(这就是为什么一些透明的GIF动画在其他背景色里面会出现白色的毛边)。

我们也知道,支持透明最常见的格式是PNG(当然,TIF、BMP也可以,不过用得并不多),曾经也有组织提出过PNG的扩展格式:APNG(Animation PNG),虽然这种格式支持了Alpha通道的半透明动画,然而它最终被否决进入PNG官方标准。目前也只有少数浏览器支持它。

那么,要想在Web上实现透明的帧动画难道只有GIF一个选择吗?难道没有支持Alpha通道实现半透明的解决方案吗?

原理:

现代浏览器都已经支持CSS动画了,在CSS第三版中,有一个animation属性。它实现了动画的功能。熟悉这个属性的话应该会问,这个属性中时间曲线不是cubic-bezier吗?那么要怎样实现帧动画呢?

当然,timing-function除了可以使用cubic-bezier以外,还有一个参数叫做steps。使用这个参数就可以实现帧动画了。

示例:

将下面的图片(多张被合成为了一个png)做成一个动画

以上面这个图片为例,要实现从上到下的帧动画,我们先随便写一个div:

<body>
    <div class="tar" ></div>
</body>

设定它的宽度和高度刚好等于图片一格的尺寸。然后将上面的图片设置为background-image,通过改变background的posion从而让它动起来。为了让它更有趣,还可以写一个hover,当鼠标放上去的时候显示出现的帧序列,鼠标移开之后返回。于是CSS如下:

.tar {
    width: 68px;
    height: 100px;
    background-image: url('./img.png');
    cursor: pointer;
    animation: goBack 0.25s steps(4) forwards;
}
.tar:hover {
    animation: comeOut 1s steps(10) forwards;
}

出现的时候写了comeOut的keyframes,消失的时候写了goBack的keyfreames,那么下面两个keyframes的CSS写成如下效果:

@keyframes comeOut {
    from {background-position: 0 0;}
    to {background-position: 0 -1000px;}
}
@keyframes goBack {
    from {background-position: 0 -1000px;}
    to {background-position: 0 -1400px;}
}

注意:考虑到兼容旧版的国产浏览器(webkit内核较老),可能需要增加-webkit-前缀。

最后在animation中使用steps的效果是这样(鼠标移入/移出显示效果)正确效果

下面来对比一下如果不使用steps,而使用cubic-bezier的效果(鼠标移入/移出显示效果)错误效果

结论:

在需要使用带alpha通道的帧动画时,应制作为透明的png图片,并将它们按照序列排列成一行/列,最后使用animation动画,一定要注意使用steps哦。

Demo:
下载查看完整示例


打赏

评论

  1. sunny856 says:

    下下来看看

  2. 赵毅 says:

    没错,这个方法好,之前就注意到百度首页的动图就是这样的。

  3. sumao says:

    没错,这个方法好,之前就注意到百度首页的动图就是这样的。

  4. 匿名 says:

    总感觉这个图动起来有点别扭……小姑凉的帽子上的球,动的方向有点反了的感觉。下载了你的完整实例,里面的gif,看起来又是对的。于是我觉得我的浏览器显示的这个图肯定是反了。然后我想改一改你的html。然而我不会……试了半天,终于试出来了……我的天……
    我把你的
    @keyframes comeOut {
    from {background-position: 0 0;}
    to {background-position: 0 1000px;}
    }
    @keyframes goBack {
    from {background-position: 0 1000px;}
    to {background-position: 0 1400px;}
    }
    改成
    @keyframes comeOut {
    from {background-position: 0 1400px;}
    to {background-position: 0 400px;}
    }
    @keyframes goBack {
    from {background-position: 0 400px;}
    to {background-position: 0 0;}
    }
    我的浏览器上,看起来就正常点了……
    然而我也不知道为什么……

    • PandaPanda says:

      没那么麻烦,只要在我原始的代码上给Y偏移加个负号就好了。看一下使用cubic-bezier的效果,就知道偏移方向反了。已经修正了。

  5. 匿名 says:

    哈!好可爱的图。不太懂这方面的技术,感觉挺厉害的。只是在我的火狐21上,使用steps和使用cubic-bezier,看起来好像是一样。不知道是不是就应该是这样。

    • PandaPanda says:

      本来为了让国产浏览器正确显示效果,于是加了-webkit-前缀,结果加了前缀的写的内容被写成steps了。刚刚已经改过来了。

  6. PandaPanda says:

    技术是几年前的老技术,只是现代的浏览器大都支持CSS动画了,也就可以用这种方法去实现了

发表评论

电子邮件地址不会被公开。 必填项已用*标注