Анимация холста / реагирование / с запросом AnimationFrame - PullRequest
Новая
       48

Анимация холста / реагирование / с запросом AnimationFrame

0 голосов
/ 07 декабря 2018

У меня в приложении несколько анимаций холста, все работает плавно, кроме this , но теперь у меня проблема с анимацией Frame (мой подозреваемый).

Когда я загружаю компонент (animation1), а затем переключаюсь на компонент (animation 2), а затем возвращаюсь к первому компоненту, происходит что-то странное, анимация становится быстрее каждый раз, когда я возвращаюсь к этому компоненту и не надеваюне знаю причину.Анимация для обоих компонентов одинакова, перемещение объектов вверх и вниз.

Странно то, что на моей консоли скорость перемещения всегда одинакова даже после 6-7 переключений, но объекты движутся все быстрее и быстрее... Есть идеи, в чем может быть проблема?

Вот одна анимация, вторая очень похожа на эту: 

    import React, { Component } from 'react';
let loadBall = [];
let canvas;
let c;
let counterX = 40;
let counterY = 30;
let y =  counterY ;
class Loading extends Component {
    constructor(props){
        super(props)
        this.state = {
            vy: 0,
            time:this.props.time
        }
        this.loadingLoop = this.loadingLoop.bind(this);
    }
    componentDidMount(){
        canvas = document.getElementById('ball');
        canvas.height = 150;
        canvas.width = window.innerHeight;
        c = canvas.getContext('2d');
        this.loadingInit()
        this.loadingLoop()
        window.addEventListener('resize', () => {
            canvas.width = window.innerHeight;
            this.loadingInit()
        })
        this.loadingInit();
    }
    loadingLoop(){
        requestAnimationFrame(this.loadingLoop);
        c.clearRect(0,0, canvas.width, canvas.height);
        for (let i = 0; i < loadBall.length; i++) {
            loadBall[i].update();
        }
    }
    loadingInit(){
        loadBall = [];
        for (let i = 0; i < 3; i++) {
            let radius = 30//Math.floor(Math.random() * 20) + 15;
            let x =  (canvas.width / 2) - (radius * 4) + counterX;
            y = counterY;
            let color = colors[i];
            loadBall.push(new loadingBall(x,y, radius, color));
            counterY += 30;
            counterX += 70;
        }
    }
render() {
    return (
        <canvas id='ball' style={{position:'fixed', top: '50%', left: '50%',WebkitTransform:'translate(-50%, -50%)'}}></canvas>
    );
}
}

function loadingBall(x,y,radius,color){
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.move = 2
    this.update = () =>{
        if (this.y + this.radius + this.move >= canvas.height - 3) {
            this.move = -this.move    
        } 
        if (this.y - this.radius - this.move <= 3) {
            this.move = 2;
        }
        this.y += this.move;
        this.draw();
    }
    this.draw = () => {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        c.fillRect(this.x, this.y, this.radius, 5);
        c.fillStyle = this.color;
        c.fill();
        c.strokeStyle = this.color;
        c.stroke();
        c.closePath();
    }
}
export default Loading;

Любое предложение может быть полезным!

1 Ответ

0 голосов
/ 07 декабря 2018

Эта проблема, вероятно, вызвана тем, что ваш цикл рендеринга (т. Е. this.loadingLoop) не был остановлен после размонтирования компонента.В результате, когда компонент размонтирован, цикл рендеринга продолжает работать, а когда компонент монтируется снова, запускается новый цикл рендеринга - это вызывает два цикла рендеринга, работающих в тандеме, вызывая ощутимое «ускорение» анимации.

Одним из способов решения этой проблемы является добавление флага к вашему компоненту, который контролирует продолжение цикла рендеринга.Этого можно достичь, добавив следующее: 

constructor(props){
    super(props)
    this.state = {
        vy: 0,
        time:this.props.time
    }
    this.loadingLoop = this.loadingLoop.bind(this);

    // Add this flag to control if animation is allowed to continue
    this.stopAnimation = false;
}

componentDidMount(){

    // Add this to the start of componentDidMount to let animation 
    // start and continue while component is mounted
    this.stopAnimation = false;

    // ...
    // your existing code
    // ...
}

componentWillUnmount() {

    // When the component unmounts, set flag to stop animation
    this.stopAnimation = true;
}

loadingLoop(){

    // If the stopAnimation flag is not truthy, stop future
    // frames for this animation cycle
    if( this.stopAnimation ) {
       return
    }

    requestAnimationFrame(this.loadingLoop);

    c.clearRect(0,0, canvas.width, canvas.height);
    for (let i = 0; i < loadBall.length; i++) {
        loadBall[i].update();
    }
}
...