【H5动画】谈谈canvas动画的闪烁问题

一般来说,在H5开发中,使用canvas往往只是为了展示一些简单的图表或者简单短小的动画,很少考虑到有闪烁的问题。 最近,在手机QQ魔法表情的项目中,就遇到了奇葩的闪烁问题。 这里说的闪烁,是指动画刚开始播放,突然出现瞬间空白(大概1帧到2帧的时间)。

闪烁分析

这个魔法表情,实际是html5版本的动画,使用Fanvas(即将腾讯开源),从swf转化为canvas 2d动画。 在iOS体系下,无论哪个机型还是哪个系统版本,都没有出现问题。 但是,在部分Android机器上则出现了很奇葩的闪烁,包括小米note,小米4,三星,魅族。奇怪的是,小米同体系的红米note则完全正常。

翻阅H5 api的资料,我们知道requestAnimationFrame在Android 4.4后才支持,而动画的机制是,如果该接口不可用,则采用setInterval取代。

那么貌似有点眉目了,红米note也是4.4系统,而iOS全系都ok,也许问题就在这。 重温一下FPS和浏览器重绘的知识。浏览器保持一个帧频(一般60fps)刷新画面,这就包括页面中的canvas。而动画的绘制过程,包括几个步骤: 1、擦除整个canvas; 2、计算所有元件/图元的位置颜色; 3、逐个逐个,绘制所有元件到canvas上。 这个过程,由不精准的setInterval驱动,这个时钟无法跟浏览器重绘的频率同步。

那么,就可能出现这样的时序情况: 1、擦除整个canvas; 2、浏览器到达重绘时间点,此时canvas为空白,浏览器绘制空白的canvas; 3、50ms后,这一帧动画所有元件绘制完成(可能会因为动画复杂, 而消耗长时间,超过16ms) 关键点就在这里了。

好招不怕旧

双缓冲,只要对图形图象处理编程有稍稍一些了解,都应该听过这个术语,即使不知道这玩意是什么。这个技术非常非常古老,也非常非常简单,但效果却非常非常好。 来看看百度百科的说明,可能没有wikipedia专业,但我觉得足够解释问题了。

闪烁是图形编程的一个常见问题。需要多重复杂绘制操作的图形操作会导致呈现的图像闪烁或具有其他不可接受的外观。双缓冲的使用解决这些问题。双缓冲使用内存缓冲区来解决由多重绘制操作造成的闪烁问题。当启用双缓冲时,所有绘制操作首先呈现到内存缓冲区,而不是屏幕上的绘图图面。所有绘制操作完成后,内存缓冲区直接复制到与其关联的绘图图面。因为在屏幕上只执行一个图形操作,所以消除了由复杂绘制操作造成的图像闪烁。

回到我们的动画中,发现异曲同工,闪烁、掉帧的问题根源就是因为部分机型下没有自动实现cnavas的双缓冲(一般这些都是底层实现的),而canvas每一帧动画过程又比较漫长,擦除上一帧动画后,要过几十毫秒才能绘制完成下一帧,而这段时间内就会出现明显的空白。 解决办法就是: 创建一个临时canvas,先把下一帧动画绘制到临时canvas上。在每次真正绘制的时候,擦除正式canvas后,马上drawImage把临时canvas的内容copy过去,而这个copy过程是非常非常高效的,所以基本可以杜绝闪烁。

具体代码
    p.update = function() {
        if (!this.cacheCanvas) {
            this.cacheCanvas = document.createElement("canvas");
            this.cacheCanvas.width = this.canvas.width;
            this.cacheCanvas.height = this.canvas.height;
        }

        updateMovieClip();    //图形变换

        var ctx = this.cacheCanvas.getContext("2d");
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.save();
        ctx.clearRect(0, 0, this.canvas.width + 1, this.canvas.height + 1);     //部分Android机器很奇葩,如果局部刷新会出现空白的情况
        drawMovieclip(ctx);    //绘制
        ctx.restore();

        //双缓冲,先画到临时canvas,再转到正式canvas
        ctx = this.canvas.getContext("2d");
        ctx.clearRect(0, 0, this.canvas.width + 1, this.canvas.height + 1);
        ctx.drawImage(this.cacheCanvas, 0, 0, this.canvas.width, this.canvas.height);

    };

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏守候书阁

移动web开发问题和优化小结

到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这...

1202
来自专栏腾讯社交用户体验设计

打造H5动感影集的爱恨情仇(动画性能篇) - 腾讯ISUX

1684
来自专栏Youngxj

给网页添加一个QQ客服悬浮框

3777
来自专栏州的先生

快速去除天猫工商执照图片纯色水印

1573
来自专栏腾讯社交用户体验设计

H5动画开发快车道 - AnimateCC与createjs开发实践

6693
来自专栏编程直播室

源码发布:一个Angular写得Markdown编辑器 参考资料

1512
来自专栏知晓程序

开发 | 小程序做动画效果难?送你一个框架,10 分钟就能搞定

在小程序中使用 canvas 绘制图案、动画的难度有目共睹。除了本身写法繁琐,小程序的技术特性,也使得小程序无法使用普通 HTML 5 的 canvas 框架,...

1435
来自专栏林德熙的博客

win10 uwp BadgeLogo 颜色

本文讲的是在上传应用商店出现BadgeLogo颜色问题,和如何解决,因为我是渣渣,本文可能带有一定的主观性和局限性,说的东西可能不对或者不符合每个人的预期。如果...

711
来自专栏IMWeb前端团队

怎样打造一个DOM元素位置引擎 (一)

本文作者:IMWeb forsigner 原文出处:IMWeb社区 未经同意,禁止转载 碎碎念 这是一篇早就应该写的文章,但是由于过年前项目紧张,一直...

18810
来自专栏听雨堂

用多个类别来进行微调

          有时css的类基本设计好了,对于大多数的标签都能够实用,但却又个别的不行。如,菜单项,绝大多数都是2个字的,总体上按照这个宽度来设计,但还有...

2068

扫码关注云+社区