Интерактивная анимация HTML5. Методические указания
Teksti czytaj za darmo:
- Rozmiar: 23 str. 4 ilustracje
- Kategoria: książki o komputerach, przewodnikiEdytuj
2.2 Функция animate
Jquey функция animate () выполняет определенную анимацию на заданном наборе элементов. Анимация происходит за счет плавного изменения их CSS-свойств. Функция имеет два варианта использования:
1).animate (properties, [duration], [easing], [callback])
где
properties – список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)
duration – продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением ’fast’ или ’slow’ (200 и 600 миллисекунд).
easing – изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание ниже)
callback – функция, которая будет вызвана после завершения анимации.
2).animate (properties, options)
где
properties – список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)
options – дополнительные опции. Должны быть представлены объектом, в формате опция: значение.
Варианты опций:
duration – продолжительность выполнения анимации (см. выше).
easing – изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускориться). (см. описание ниже)
complete – функция, которая будет вызвана после завершения анимации.
step – функция, которая будет вызвана после каждого шага анимации.
queue – булево значение, указывающее, следует ли помещать текущую анимацию в очередь анимаций. В случае false (по-умолчанию), анимация будет запущена сразу же, не вставая в очередь. Иначе она будет ждать завершения предыдущей анимации, стоящей в очереди.
specialEasing – позволяет установить разные значения easing, для разных CSS-параметров. Задается объектом, в формате параметр: значение.
Пример – изменение группы css-свойств по клику на кнопку:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button id=«go»> Полить </button>
<div id=«block»> Газон </div>
<script>
// Произведем изменение нескольких css-величин в ходе одной анимации.
$("#go").click (function () {
$("#block").animate ({
width: «70%», // ширина станет 70%
opacity: 0.4, // прозрачность будет 40%
marginLeft: «0.6in», // отступ от левого края станет равным 6 дюймам
fontSize: «3em», // размер шрифта увеличится в 3 раза
borderWidth: «10px» // толщина рамки станет 10 пикселей
}, 1000); // анимация будет происходить 1 секунду
});
</script>
</body>
</html>
Задание «Скачущий мяч»