Задача триггера, прерывистое движение треугольника по кругу - PullRequest
Новая
       27

Задача триггера, прерывистое движение треугольника по кругу

2 голосов
/ 17 сентября 2011

Код ниже должен вращать треугольник вокруг "невидимого" круга.Он работает так, как я и предполагал, однако, треугольник, кажется, иногда заикается вокруг этого «круга».Кажется, что загрузка процессора и памяти этой вещи в порядке, поэтому мне интересно, если это проблема округления и рисования ... Помощь оценена.
PS Я использую SetInterval для установки частоты кадров.Для того, что я пытаюсь сделать, требуется частота кадров> 30.Благодарю.

var canvas = document.getElementById("game_area");
var context = canvas.getContext("2d");

var angle = 0;

var SinA = Math.sin(Math.PI);
var CosA = Math.cos(Math.PI);

var SinB = Math.sin(Math.PI-0.087);
var CosB = Math.cos(Math.PI-0.087);

var SinC = Math.sin(Math.PI+0.087);
var CosC = Math.cos(Math.PI+0.087);

canvas.width = 700;
canvas.height = 700;

var half = (canvas.width/2);

function on_enter_frame(){

    SinA = Math.sin(Math.PI+angle);
    CosA = Math.cos(Math.PI+angle);

    SinB = Math.sin(Math.PI-0.087+angle);
    CosB = Math.cos(Math.PI-0.087+angle);

    SinC = Math.sin(Math.PI+0.087+angle);
    CosC = Math.cos(Math.PI+0.087+angle);

    angle+=0.05;

    if (angle>(Math.PI*2)){
        angle=0;
    }

    context.clearRect(0,0,500,500);

    context.fillStyle = "#FFF";

    context.beginPath();
    context.moveTo(half+(SinA*50), half+(CosA*50));
    context.lineTo(half+(SinB*45), half+(CosB*45));
    context.lineTo(half+(SinC*45), half+(CosC*45));
    context.closePath();
    context.fill();
}

setInterval(on_enter_frame,30);

1 Ответ

0 голосов
/ 17 сентября 2011

См. http://paulirish.com/2011/requestanimationframe-for-smart-animating/ для объяснения requestAnimationFrame и почему его использовать.

Реальность такова, что ни requestAnimationFrame, ни setInterval не обеспечат надежную синхронизацию, хотя ваши шансы должны бытьлучше с requestAnimationFrame.Задержка может быть вызвана другими процессами на вашем компьютере или даже сборкой мусора в текущем процессе JS.

Поскольку синхронизация вашего цикла никогда не будет надежной, лучше основывать анимацию (в этомПоложение вашего орбитального треугольника) относительно реального времени (или времени, прошедшего с предыдущего кадра).

Я не вижу заикание, которое вы получаете, поэтому я не знаю, будет ли этоулучшения, но вы можете посмотреть на живой пример того, как requestAnimationFrame и прошедшее время используются здесь: http://jsfiddle.net/xpZxy/

...