H5W3
当前位置:H5W3 > Andriod > 正文

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

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

华为开发者论坛发布于 今天 09:38

现象描述:

快应用中通过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

android
阅读 26发布于 今天 09:38
本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议

华为开发者论坛
华为开发者论坛是一个为开发者提供信息传播、开发交流、技术分享的交流空间。开发者可以在此获取技术干…
avatar

华为开发者论坛

华为开发者论坛是一个为开发者提供信息传播、开发交流、技术分享的交流空间。开发者可以在此获取技术干货、华为源码开放、HMS最新活动等信息,欢迎大家来交流分享!

296 声望
24 粉丝

0 条评论
得票时间

avatar

华为开发者论坛

华为开发者论坛是一个为开发者提供信息传播、开发交流、技术分享的交流空间。开发者可以在此获取技术干货、华为源码开放、HMS最新活动等信息,欢迎大家来交流分享!

296 声望
24 粉丝

宣传栏

现象描述:

快应用中通过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

本文地址:H5W3 » 【安卓】华为快应用在setInterval中绘制canvas动画卡顿,怎么破

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址