- •Дисциплина «Программное обеспечение компьютерных сетей» Специальность 230105 Лабораторная работа №1, 2. «Использование встроенных объектов и функций».
- •Практическое задание.
- •Вопросы для контроля.
- •Дисциплина «Программное обеспечение компьютерных сетей» Специальность 230105 Лабораторная работа №3. «Создание пользовательских объектов и обработка событий».
- •Свои методы объектов
- •Доступ к объекту через this
- •Функция-конструктор, «new»
- •Создание методов в конструкторе
- •Приватные свойства
- •Открытие и закрытие окон
- •Открытие окон
- •Закрытие окон
- •Использование фреймов
- •Модификация фреймов
- •Обращение и управление среди фреймов
- •Пример Фреймов
- •Обращение к окнам и фреймам
- •Обращение к свойствам, методам, и обработчикам события окна
- •Обращение к окну подчиненной формы или гиперсвязи
- •Управление окнами
- •Практическое задание.
- •Событие submit
- •Взаимосвязь событий submit и click
- •Метод submit
- •Практическое задание.
- •Структура анимации
- •Временная функция delta
- •Линейная delta
- •В степени n
- •Back: стреляем из лука
- •Упругая анимация
- •Реверсивные функции (easeIn, easeOut, easeInOut)
- •Графопостроитель
- •Сложные варианты step
- •Подсветка цветом
- •Набор текста
- •Сценарии, которые могут работать в разных браузерах
- •Доступ к таблицам стилей
- •Свойства таблиц стилей
- •Добавление и удаление правил
- •Изменение стилей элементов
- •Имена классов элементов
- •Практическое задание.
- •Контрольные вопросы.
Структура анимации
У анимации есть три основных параметра:
delay
Время между кадрами (в миллисекундах, т.е. 1/1000 секунды). Например, 10мс.
duration
Общее время, которое должна длиться анимация, в мс. Например, 1000мс.
step(progress)
Функция step(progress) занимается отрисовкой состояния анимации, соответствующего времени progress.
Каждый кадр выполняется, сколько времени прошло: progress = (now-start)/duration. Значениеprogress меняется от 0 в начале анимации до 1 в конце. Так как вычисления с дробными числами не всегда точны, то в конце оно может быть даже немного больше 1. В этом случае мы уменьшаем его до 1 и завершаем анимацию.
Создадим функцию animate, которая получает объект со свойствами delay, duration, step и выполняет анимацию.
01 |
function animate(opts) { |
02 |
|
03 |
var start = new Date; // сохранить время начала |
04 |
|
05 |
var timer = setInterval(function() { |
06 |
|
07 |
// вычислить сколько времени прошло |
08 |
var progress = (new Date - start) / opts.duration; |
09 |
if (progress > 1) progress = 1; |
10 |
|
11 |
// отрисовать анимацию |
12 |
opts.step(progress); |
13 |
|
14 |
if (progress == 1) clearInterval(timer); // конец :) |
15 |
|
16 |
}, opts.delay || 10); // по умолчанию кадр каждые 10мс |
17 |
|
18 |
} |
Пример
Анимируем ширину элемента width от 0 до 100%, используя нашу функцию:
1 |
function stretch(elem) { |
2 |
animate({ |
3 |
duration: 1000, // время на анимацию 1000 мс |
4 |
step: function(progress) { |
5 |
elem.style.width = progress*100 + '%'; |
6 |
} |
7 |
}); |
8 |
} |
Кликните для демонстрации: Открыть в новом окне
Функция step может получать дополнительные параметры анимации из opts (через this) или через замыкание.
Следующий пример использует параметр to из замыкания для анимации бегунка:
01 |
function move(elem) { |
02 |
var to = 500; |
03 |
|
04 |
animate({ |
05 |
duration: 1000, |
06 |
step: function(progress) { |
07 |
// progress меняется от 0 до 1, left от 0px до 500px |
08 |
elem.style.left = to*progress + "px"; |
09 |
} |
10 |
}); |
11 |
|
12 |
} |
Кликните для демонстрации: Открыть в новом окне