Huawei fast application draws canvas animation Caton in setinterval. How to break it

Time:2022-1-2

Phenomenon description:

Fast application is too laggy to trigger canvas drawing code through setinterval periodic function. The animation drawn on HUAWEI mobile phone will be very smooth and not smooth.

The problem code is as follows:

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)
    },

Problem analysis:

this._ The canvas drawing operation in the draw () method takes a long time, with a minimum drawing time of 100ms, while the cycle time in the code is only 20ms. The Huawei fast application engine will execute the operations in this cycle before executing the next cycle. Therefore, when it is set to 20ms, the effect will look slow.

resolvent:

Developers can first judge whether it is Huawei’s fast application engine according to the provider of the engine in the device information obtained from the device information interface. If it is Huawei’s fast application engine, the setting interval is greater than 100ms, and if not, it can be less than 100ms, which can solve the difference between Huawei’s fast application engine and fast application alliance engine. The code is as follows (red part):

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()
        },

For more details, see:

Introduction to canvas interface:
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-canvas

Quick application development guidance document:https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper


Original link:https://developer.huawei.com/consumer/cn/forum/topic/0204404988672310224?fid=18

Original author: mayism