Question

我有这个jsfiddle http://jsfiddle.net/t9L6g3bd/4/

// requestAnimationFrame Shim
(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame   || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var endPercent = 101;
var curPerc = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

context.lineWidth = 2;
context.strokeStyle = '#333';
animate();


function animate(current) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
    context.stroke();
    curPerc++;
    if (curPerc < endPercent) {
        requestAnimationFrame(function () {
            animate(curPerc / 100)
        });
    } else {
        ex(126, 126);
        cross(126, 126);
        //fadein(0);
    }
}

function fadein(a) {
    context.lineWidth = 1.5;
    context.globalAlpha = a;
    context.beginPath();
    context.moveTo(166, 84);
    context.lineTo(84, 166);
    context.stroke();
    context.beginPath();
    context.moveTo(166, 166);
    context.lineTo(84, 84);
    context.stroke();
    if (a != 0.8) {
        requestAnimationFrame(function () {
        fadein(a + 0.01);
        });
    }
}

    function ex(x, y) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.moveTo(84, x);
    context.lineTo(168, y);
    context.stroke();
    if (x != 168) {
        requestAnimationFrame(function () {
            ex(x + 1, y - 1)
        });
    }
}
function cross(x, y) {
    //    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.moveTo(84, x);
    context.lineTo(168, y);
    context.stroke();
    if (x != 84) {
        requestAnimationFrame(function () {
            cross(x - 1, y + 1)
        });
    }

}

我想知道是否有办法同时组合圆形动画和x，或者一个接一个地组合它们，以便它们都在屏幕上并且都有光滑的边缘

Answer 1

您需要重构代码。

Link to refactored jsfiddle

function animate() {

    if (curPerc < endPercent) {
            context.clearRect(0, 0, canvas.width, canvas.height);    
            drawCircle(curPerc / 100);
            fadeIn(curPerc / 100);
            curPerc++;
            requestAnimationFrame(function () {
                animate();
            });   
    }
}

基本上，您需要更改代码，以便只运行一个动画循环，并且在每个循环迭代中调用每个动画的更新函数。我会说，整体代码很难维护，你应该考虑进一步重构以纠正这个问题。希望这会有所帮助。

Answer 2

你确实应该只使用一个requestAnimationFrame，因为它的开销非常大，但主要是为了清晰的代码（很难知道是哪个对象是动画的）。
- ＆GT;＆GT;将所有动画数据存储到对象中，甚至让对象动画/绘制自己呢？通过这种方式，您可以清楚地分离关注点，并且更改动画的一个方面更加容易我开始在这个小提琴中做到这一点：

http://jsfiddle.net/0200h552/6/

动画循环变得非常简单：

function animate() {
    requestAnimationFrame(animate);
    context.clearRect(0, 0, canvas.width, canvas.height);
    //
    circle.draw();
    if (!circle.animate()) {
        ex.draw();
        cross.draw();
        ex.animate();
        cross.animate();
    }
}

以下是使用中的三个对象：

var circle = {
    x: centerX,
    y: centerY,
    radius: 75,
    curPerc: 0,
    endPercent: 101,
    animate: function () {
        if (this.curPerc < this.endPercent) {
            this.curPerc++;
            return true;
        }
        return false;
    },
    draw: function () {
        var perc = this.curPerc / this.endPercent;
        var oldAlpha = context.globalAlpha;
        context.globalAlpha = perc;
        context.beginPath();
        context.arc(this.x, this.y, this.radius, -(quart), ((circ) * perc) - quart, false);
        context.stroke();
        context.globalAlpha = oldAlpha;
    }
};

“前”：

var ex = {
    x: centerX,
    y: centerY,
    animate: function () {
        if (this.x != 168) {
            this.x++;
            this.y--;
            return true;
        }
        return false;
    },
    draw: function () {
        var x = this.x;
        var y = this.y;
        context.beginPath();
        context.moveTo(84, x);
        context.lineTo(168, y);
        context.stroke();
    }
};

十字架：

var cross = {
    x: centerX,
    y: centerY,
    animate: function () {
        if (this.x != 84) {
            this.x--;
            this.y++;
            return true;
        }
        return false;
    },
    draw: function () {
        var x = this.x;
        var y = this.y;
        context.beginPath();
        context.moveTo(84, x);
        context.lineTo(168, y);
        context.stroke();
    }
};

组合多个HTML5画布动画

2 个答案: