如何解决如何在SVG动画上获得最佳性能mouseOver上的FPS下降
我使用SVG制作了动画帧,并在requestAnimationFrame()
函数内部进行了转换:
moveSVG: () => {
if (Melo.onAir) {
const N = 4 * 60 / Melo.tempo;
const beatLen = 1 / 16 * N;
const c16 = 16 * Melo.measures;
let diff = Melo.nextBeat + (Melo.audioContext.currentTime - Melo.nextWhen) / beatLen;
while (diff < 0) {
diff = diff + c16;
}
if (diff > Melo.songLength - 1) {
diff = Melo.songLength - 1
}
const tapSize = Melo.tapSize
const y = diff * tapSize;
Melo.yPos = y;
const yVal = `translate(0 ${-y - tapSize})`;
Melo.linesGroup.setAttribute("transform",yVal);
const telorans = tapSize;
class animated {
constructor(element,beat) {
this.element = element
this.mover();
this.remover(beat);
}
mover() {
this.element.forEach(elem => {
this.ele = elem.ele;
this.len = elem.len;
this.beg = elem.beg - tapSize;
this.end = elem.end;
this.note = elem.pitch;
let newPos = (y - this.end) + this.len + tapSize;
if (newPos > this.len) newPos = this.len;
if (newPos > -tapSize && newPos < tapSize) {
this.score(newPos);
}
this.animation(newPos)
})
}
animation(newPos) {
const eleG = this.ele.children.group;
eleG.children[1].style.fill = 'red';
eleG.setAttribute('style',`transform: translateY(${newPos}px)`);
}
remover(beat) {
if (y > this.element[0].end || !Melo.onAir) {
Melo.anime = Melo.anime.filter(item => item !== beat);
}
}
}
Melo.anime.forEach(beat => {
let notes = Melo.noteProg[beat];
if (notes) {
new animated(notes,beat)
}
});
}
requestAnimationFrame(Melo.moveSVG)
}
在SVG元素上使用mouseOver之前,一切都可以以〜60fps正常运行!
我做了一个gif来显示:
然后我又进行了一次测试,没有动画并且使用了CPU:
我的svg元素上没有任何鼠标事件!
我认为浏览器检查事件是正常的! idk,但是在动画不降低FPS的情况下,如何才能获得最佳性能,这是从svg元素中删除所有内容的方法吗?以获得更好的性能?
还是我应该使用另一种方式做到这一点?
编辑: 我在Windows 10和Google chrome 84上进行了测试,我需要在所有操作系统和浏览器上都能正常工作的最佳方法!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。