Помогите разобраться с анимацией
всем привет. С книжки Девида Фланегена решил протестировать скрипт, но почему то он не работает.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> /** * AnimateCSS.js: * Этот файл определяет функцию с именем animateCSS(), служащую основой * для создания анимации на базе CSS. Аргументы функции: * * element: Анимируемый HTML-элемент. * numFrames: Общее число кадров в анимации. * timePerFrame: Количество миллисекунд отображения каждого кадра. * animation: Объект, определяющий анимацию; описывается далее. * whendone: Необязательная функция, вызываемая по завершении анимации. * Если функция указана, ей в качестве аргумента передается * значение аргумента element. * * Функция animateCSS() просто определяет платформу для анимации. Выполняемую * анимацию определяют свойства объекта animation. Каждое свойство должно * иметь то же имя, что и свойство CSS-стиля. Значением каждого свойства * должна быть функция, возвращающая значения для этого свойства стиля. * Каждой функции передается номер кадра и общий промежуток времени, прошедший * с начала анимации, а функция может использовать это для вычисления * значения стиля, которое она должна вернуть для данного фрейма. * Например, чтобы анимировать изображение так, чтобы оно передвигалось * из левого верхнего угла, вы можете вызвать функцию animateCSS так: * * animateCSS(image, 25, 50, // Анимировать изображение в течение 25 кадров * // по 50 мс каждый * { // Установить атрибуты top и left для каждого кадра: * top: function(frame,time) { return frame*8 + "px"; }, * left: function(frame,time) { return frame*8 + "px"; } * }); * **/ function animateCSS(element, numFrames, timePerFrame, animation, whendone) { var frame = 0; // Текущий номер кадра var time = 0; // Общее время анимации, прошедшее с начала // Определить вызов displayNextFrame() каждые timePerFrame миллисекунд. // Так будет отображаться каждый кадр анимации. var intervalId = setInterval(displayNextFrame, timePerFrame); // На этом работа animateCSS() завершается, но предыдущая строка гарантирует, // что следующая вложенная функция будет вызываться для каждого кадра анимации. function displayNextFrame() { if (frame >= numFrames) { // Проверить, не закончилась ли анимация clearInterval(intervalId); // Если да - прекратить вызовы if (whendone) whendone(element); // Вызвать функцию whendone return; // И завершить работу } // Обойти в цикле все свойства, определяемые объектом анимации for(var cssprop in animation) { // Для каждого свойства вызвать его функцию анимации, передавая // ей номер кадра и прошедшее время. Используем возвращаемое // функцией значение в качестве нового значения соответствующего // свойства стиля для указанного элемента. Используем блок // try/catch, чтобы игнорировать любые исключительные ситуации, // возникающие из-за неверных возвращаемых значений. try { element.style[cssprop] = animation[cssprop](frame, time); } catch(e) {} } frame++; // Увеличить номер кадра time += timePerFrame; // Увеличить прошедшее время } } </script> </head> <body> <div id="title" style=" position: absolute; top: 300px; width: 300px; height: 300px; background-color: green; clip: rect(auto 10px auto auto);">Текст</div> <script> // Анимируем элемент с идентификатором "title", используя 40 кадров // по 50 миллисекунд каждый animateCSS(document.getElementById("title"), 40, 50, { // Так устанавливаются свойства top и clip для каждого кадра: top: function(f,t) { return 300f*5 + "px"; } clip: function(f,t) {return "rect(auto "+f*10+"px auto auto)";} }); </script> </body> </html> Заранее спасибо! Я уже пол дня не могу понять в чем загвоздка |
А в книжке не было советов, как отлаживать скрипты? =)
Firebug, например, что пишет? |
Я разобрался) Ошибка банальная)))
animateCSS(document.getElementById("title"), 40, 50, { // Так устанавливаются свойства top и clip для каждого кадра: top: function(f,t) { return f*5 + "px"; }, clip: function(f,t) {return "rect(auto "+f*10+"px auto auto)";}}); перенес }); и ВСЕ!!! :D |
Часовой пояс GMT +3, время: 23:20. |