Search the Community

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 ситуация не меняется. Картинка остается неподвижной вплоть до окончания анимации. Фигуры у меня - четырехугольники, в твин передается ссылка на координаты, альфа канал и т.п. Как исправить? Да, если поставить брэкпоинт на середине анимации, то фигура сдвинется.