Блог

я создал свои кадры анимации, используя SVG и функцию transform inside 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 amp;amp; 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)
    }
  

все отлично работает со скоростью ~ 60 кадров в секунду до наведения курсора мыши на элементы SVG!

я сделал gif, чтобы показать это :

Падение кадров в секунду при наведении курсора мыши

затем я провел еще один тест без анимации и с учетом загрузки моего процессора :

Загрузка процессора при наведении курсора мыши

и у меня нет никакого события мыши на моих элементах svg!

я думаю, что это нормально для браузера проверять события! idk, но что я могу сделать для достижения наилучшей производительности без снижения кадров в секунду в моих анимациях, это способ удалить все из элементов svg? чтобы получить лучшую производительность?

или я должен использовать другой способ сделать это?

РЕДАКТИРОВАТЬ: я провел свой тест на Windows 10 и Google Chrome 84, мне нужен лучший способ для работы во всех операционных системах и браузерах!