前端杂谈 · Web

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

小编 · 11月28日 · 2019年

问题:

长期与图形打交道的朋友应该很清楚支持动画的格式目前只有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)做成一个动画

Alpha通道帧动画在Web上的实现-字节智造

以上面这个图片为例,要实现从上到下的帧动画,我们先随便写一个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:
下载查看完整示例

蓝奏云:https://www.lanzoux.com/i7ndszg

0 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!