Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.02.2014, 15:55
Новичок на форуме
Отправить личное сообщение для AntiVIRUZ Посмотреть профиль Найти все сообщения от AntiVIRUZ
 
Регистрация: 16.02.2014
Сообщений: 1

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

Да, если поставить брэкпоинт на середине анимации, то фигура находится там, где должна находится в соответствии с анимацией
Ответить с цитированием
  #2 (permalink)  
Старый 16.02.2014, 18:56
Аватар для zlodeeev
Кандидат Javascript-наук
Отправить личное сообщение для zlodeeev Посмотреть профиль Найти все сообщения от zlodeeev
 
Регистрация: 11.07.2012
Сообщений: 113

Скинь весь код на http://jsfiddle.net/
__________________
Saying that Java is nice because it works on all OS's is like saying that anal sex is nice because it works on all genders...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как "заморозить" конечный результат css анимации? FINoM Общие вопросы Javascript 8 28.12.2011 17:52