华为快应用在setInterval中绘制canvas动画卡顿,怎么破

Posted 华为开发者论坛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了华为快应用在setInterval中绘制canvas动画卡顿,怎么破相关的知识,希望对你有一定的参考价值。

现象描述:

快应用中通过setinterval周期函数来循环触发canvas绘制代码,在华为手机上绘制的动画会很卡顿,不流畅。

问题代码如下:

click0() {
      this.speed = 0.3
      let ctx = this.$element(\'canvas\').getContext(\'2d\')
      setInterval(() => {
        this.num0 += 2
        this.noise = Math.min(0.5, 1) * this.MAX
        this._draw(ctx)
        this.MAX <= 200 && (this.MAX += 4)
      }, 20)
    },
    _draw(ctx) {
      this.phase = (this.phase + this.speed) % (Math.PI * 64)
      ctx.clearRect(0, 0, this.width, this.height)
      this._drawLine(ctx, -2, \'rgba(0, 194, 255, 0.2)\')
      this._drawLine(ctx, -6, \'rgba(0, 194, 255, 0.4)\')
      this._drawLine(ctx, 4, \'rgba(0, 194, 255, 0.6)\')
      this._drawLine(ctx, 2, \'rgba(0, 194, 255, 0.8)\')
      this._drawLine(ctx, 1, \'rgba(0, 194, 255, 1)\', 4)
    },

问题分析:

this._draw()方法中的canvas绘制操作时间长,最低需要100ms的绘制时间,而代码中周期时间只有20ms,华为快应用引擎会执行这个周期内的操作,然后才能执行下一个周期。所以设置为20ms时的效果会看起来比较慢。

解决方法:

开发者可以先根据设备信息接口获取下设备信息中的引擎的提供商判断是否是华为的快应用引擎,如果是华为快应用引擎则设置间隔时间大于100ms,不是则可以设置小于100ms,可解决华为快应用引擎和快应用联盟引擎差异问题。代码如下(红色部分):

onShow: function () {
            var that = this
            device.getInfo({
                success: function (ret) {
                    console.log("handling success:", JSON.stringify(ret));
                    that.engineProvider = ret.engineProvider;
                },
                fail: function (erromsg, errocode) {
                    console.log("message:", erromsg, errocode);
                }
            })
        },
        click0() {
            var that = this
            this.speed = 0.3
            console.log(that.engineProvider)
            let ctx = this.$element(\'canvas\').getContext(\'2d\')
            if (that.engineProvider === "huawei") {
                setInterval(() => {
                    this.num0 += 2
                    this.noise = Math.min(0.5, 1) * this.MAX
                    this._draw(ctx)
                    this.MAX <= 200 && (this.MAX += 4)
                }, 120)
            } else {
                setInterval(() => {
                    this.num0 += 2
                    this.noise = Math.min(0.5, 1) * this.MAX
                    this._draw(ctx)
                    this.MAX <= 200 && (this.MAX += 4)
                }, 20)
            }
        },
        _draw(ctx) {
            this.phase = (this.phase + this.speed) % (Math.PI * 64)
            ctx.clearRect(0, 0, this.width, this.height)
            this._drawLine(ctx, -2, \'rgba(0, 194, 255, 0.2)\')
            this._drawLine(ctx, -6, \'rgba(0, 194, 255, 0.4)\')
            this._drawLine(ctx, 4, \'rgba(0, 194, 255, 0.6)\')
            this._drawLine(ctx, 2, \'rgba(0, 194, 255, 0.8)\')
            this._drawLine(ctx, 1, \'rgba(0, 194, 255, 1)\', 4)
        },
        _drawLine(ctx, attenuation, color, width) {
            ctx.save()
            ctx.moveTo(0, 0);
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = width || 1;
            var x, y;
            for (var i = -this.K; i <= this.K; i += 0.01) {
                x = this.width * ((i + this.K) / (this.K * 2))
                y = this.height / 2 + this.noise * this._globalAttenuationFn(i) * (1 / attenuation) * Math.sin(this.F * i - this.phase)
                ctx.lineTo(x, y)
            }
            ctx.stroke()
            ctx.restore()
        },

欲了解更多详情,请参阅:

canvas接口介绍:
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-canvas

快应用开发指导文档:https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper


原文链接:https://developer.huawei.com/consumer/cn/forum/topic/0204404988672310224?fid=18

原作者:Mayism

以上是关于华为快应用在setInterval中绘制canvas动画卡顿,怎么破的主要内容,如果未能解决你的问题,请参考以下文章

canvas应用一:简易时钟

canvas绘制中的API

Canvas - 时钟绘制

[Canvas学习]动画

uniapp中canvas不能连续绘制

带着canvas去流浪绘制雷达图