Вы можете использовать JavaScript для создания сложной анимации, имеющей, но не ограничиваясь, следующие элементы:
- Фейерверк
- Эффект Fade
- Roll-in или Roll-out
- Ввод страницы или страница
- Движения объектов
Вам может быть интересна существующая анимационная библиотека на основе JavaScript: Script.Aculo.us.
JavaScript может использоваться для перемещения нескольких элементов DOM (img, div или любого другого элемента HTML) вокруг страницы в соответствии с каким-либо шаблоном, определяемым логическим уравнением или функцией.
JavaScript предоставляет следующие две функции, которые часто используются в анимационных программах.
- SetTimeout ( функция, продолжительность). Эта функция вызывает функцию после длительности миллисекунд.
- SetInterval ( функция, длительность) - Эта функция вызывает функцию каждой длительность миллисекунд.
- ClearTimeout ( setTimeout_variable ) - эта функция вызывает очистку любого таймера, установленного функциями
setTimeout().
JavaScript также может устанавливать несколько атрибутов объекта DOM, включая его положение на экране. Вы можете установить атрибут top и left объекта, чтобы поместить его в любом месте экрана. Вот его синтаксис.
// Set distance from left edge of the screen. object.style.left = distance in pixels or points; or // Set distance from top edge of the screen. object.style.top = distance in pixels or points;
Ручная анимация
Итак, давайте реализуем одну простую анимацию с использованием свойств объекта DOM и функций JavaScript следующим образом. Следующий список содержит различные методы DOM.
- Мы используем функцию JavaScript
getElementById()для получения объекта DOM, а затем присваиваем его глобальной переменнойimgObj. - Мы инициализировали функцию инициализации
init()для инициализацииimgObj, где мы установили ее положение и атрибуты. - Мы вызываем функцию инициализации во время загрузки окна.
- Наконец, мы вызываем функцию
moveRight(), чтобы увеличить левое расстояние на 10 пикселей. Вы также можете установить его на отрицательное значение, чтобы переместить его влево.
Попробуйте следующий пример.
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>
Автоматическая анимация
В приведенном выше примере мы увидели, как изображение перемещается вправо с каждым щелчком. Мы можем автоматизировать этот процесс, используя функцию JavaScript setTimeout() следующим образом, мы добавили больше методов.
Итак, давайте посмотрим, что здесь нового -
- Функция
moveRight()вызывает функциюsetTimeout()для установки позицииimgObj. - Мы добавили новую функцию
stop(), чтобы очистить таймер, установленный с помощьюSetTimeout()функцию и установить объект в его исходном положении.
Попробуйте следующий пример кода.
<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage1');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage1" src="/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>
Ролловер с событием мыши
Вот простой пример, показывающий опрокидывание изображения с событием мыши.
Давайте посмотрим, что мы используем в следующем примере -
- Во время загрузки этой страницы оператор «if» проверяет наличие объекта изображения. Если объект изображения недоступен, этот блок не будет выполнен.
- Конструктор
Image()создает и предварительно загружает новый объект изображения с именемimage1. - Src свойство присваивает имя внешнего файла изображения и называется
/images/html.gif. - Точно так же, мы создали IMAGE2 объект и назначен
/images/http.gifв этом объекте. - #(Хэш - метка) отключает ссылку, чтобы браузер не пытается перейти к URL при нажатии. Эта ссылка является изображением.
OnMouseOverобработчик событий срабатывает, когда пользователь движется мыши на ссылку, и onMouseOut обработчик события вызывается, когда мышь пользователя отходит от линии (изображения).- Когда мышь перемещается по изображению, изображение HTTP изменяется с первого изображения на второе. Когда мышь отодвигается от изображения, отображается исходное изображение.
- Когда мышь будет удалена от ссылки, на экране появится исходное изображение
html.gif.
<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type="text/javascript">
<!--
if(document.images){
var image1 = new Image(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href="#" onMouseOver="document.myImage.src=image2.src;" onMouseOut="document.myImage.src=image1.src;">
<img name="myImage" src="/images/html.gif" />
</a>
</body>
</html>
