function tween(fig,param, shift, time)
{
var element = [];
var what = [];
var from = []; // Начальное значение
var to = []; // Конечная значение
var duration = time; // Длительность
var start = new Date().getTime(); // Время старта
var now;
var progress;
for (i = 0; i < fig.length;i++)
{
element[i] = fig[i];
what[i] = param[i];
from[i] = element[i][what[i]];
to[i] = element[i][what[i]]+shift[i];
}
setTimeout(function tweenTimer()
{
now = (new Date().getTime()) - start; // Текущее время
progress = now / duration; // Прогресс анимации
for (i = 0; i < element.length; i++)
{
element[i][what[i]] = (to[i] - from[i]) * progress + from[i];
}
draw();
if (progress < 1) // Если анимация не закончилась, продолжаем
setTimeout(tweenTimer(), mSPF);
else
for (i = 0; i < element.length; i++)
{
element[i][what[i]] = to[i];
}
}, mSPF);
}
//Отрисовка всех фигур
function draw()
{
ctx.clearRect(0,0,400,600);
//Рисуем фигуры
drawFigure(leftQ);
drawFigure(rightQ);
drawFigure(rect);
}
//отрисовка многоугольника
function drawFigure(fig)
{
ctx.strokeStyle = 'rgba(255,255,255,'+fig.alpha+')';
ctx.beginPath();
ctx.moveTo(fig.Xv[0], fig.Yv[0]);
for (i = 1; i < fig.Vc; i++) //Цикл, последовательно соединяющий вершины линиями
{
ctx.lineTo(fig.Xv[i], fig.Yv[i]);
}
ctx.lineTo(fig.Xv[0], fig.Yv[0]);
//ctx.stroke();
console.log('ololo');
ctx.fillStyle = 'rgba('+fig.color[0]+','+fig.color[1]+','+fig.color[2]+','+fig.alpha+')';
ctx.fill();
}
Вот, собственно, функция твина и функция отрисовки. mSPF = 40, но и при 200 ситуация не меняется. Картинка остается неподвижной вплоть до окончания анимации. (через заданное время она простомгновенно становится на конечную позицию). Фигуры у меня - четырехугольники, в твин передается ссылка на координаты, альфа канал и т.п. Как исправить?
Да, если поставить брэкпоинт на середине анимации, то фигура находится там, где должна находится в соответствии с анимацией
