На прошлом уроке мы изучали библиотеку raphael.js. Учились при помощи неё рисовать графические примитивы: прямоугольники, круги и т.п. На этом уроке рассмотрим создание и работу с анимацией при помощи библиотеки raphael.js.
Для движения используется функция animate.
Например, прямолинейное движение круга можно реализовать так:
circle.animate({ cx: 500, r: 15 }, 1000);
Здесь cx означает расстояние, которое пролетит круг: чем меньше параметр, тем меньше расстояние.
r - радиус круга: при равном 50 размер круга остаётся неизменным, при меньшем 50 уменьшается, при большем 50 увеличивается.
Последний параметр (вне фигурных скобок) отвечает за скорость движения круга: чем меньше параметр, тем большая скорость.
Таким образом, используя метод animate(), можно анимировать различные графические объекты.
Пример прямолинейного движения эллипса.
<html> <head> <title>Библиотека Raphael</title> <script type="text/javascript" src="raphael.js"></script> <script type="text/javascript"> window.onload = function() { var ph = document.getElementById("placeholder"); var paper = Raphael(10, 50, 5000, 5000); var c = paper.ellipse(100, 200, 30, 40).attr({fill: '#345'}); c.animate({ cx: 2000, r: 50 }, 6000); } </script> </head> <body> <div id="placeholder"></div> </body> </html>
Результат:
Анимация прямоугольника.
Rectangle.animate({ opacity: 0.6, x: 400, y: 100, width: 100, 'stroke-width': 10 }, 1000);
где
x, y – координаты начального состояния.
Opacity – прозрачность прямоугольника.
Width – ширина прямоугольника.
Stroke-width – ширина рамки прямоугольника.
Программа имеет вид:
<html> <head> <title>Библиотека Raphael</title> <script type="text/javascript" src="raphael.js"></script> <script type="text/javascript"> window.onload = function() { var ph = document.getElementById("placeholder"); var paper = Raphael(10, 50, 5000, 5000); var с = paper.rect(100, 50, 20, 50).attr({ fill: '#345' }); с.animate({ opacity: 0.3, x: 400, y: 1000, width: 1000, 'stroke-width': 10 }, 1000); } </script> </head> <body> <div id="placeholder"></div> </body> </html>
Результат:
Функция animate() может применяться и к изображениям из файлов. Например, можно задать прямолинейное движение для картинки формата PNG.
<html> <head> <title>Библиотека Raphael</title> <script type="text/javascript" src="raphael.js"></script> <script type="text/javascript"> window.onload = function() { var ph = document.getElementById("placeholder"); var paper = Raphael(10, 50, 5000, 5000); var c = paper.image("bush.png", 10, 10, 100, 100); c.animate({ opacity: 0.3, x: 400, y: 200, width: 100, 'stroke-width': 10 }, 2000); } </script> </head> <body> <div id="placeholder"></div> </body> </html>
Результат:
Так выглядит скругление прямоугольника.
<html> <head> <title>Библиотека Raphael</title> <script type="text/javascript</script> <script type="text/javascript"> window.onload = function() { var ph = document.getElementById("placeholder"); var paper = Raphael(10, 50, 5000, 5000); var c = paper.rect(100, 50, 20, 50).attr({ fill: '#345' }); c.animate({ cx: 2000, r: 50 }, 6000); } </script> </head> <body> <div id="placeholder"></div> </body> </html>
Результат:
Еще один пример анимации объекта с использованием функции setInterval(), которая сдвигает элемент через некоторый промежуток времени (миллисекунды).
setInterval(moveBlock, 100);
где moveBlock - функция сдвига объекта.
function moveBlock() { obj.style.left = i + 2; obj.style.top = i + 2; i++; }
Вот полный пример кода с анимацией:
<html> <head> <style type="text/css"> #block { position: absolute; background-color: red; width: 100px; height: 80px; color: white; } </style> </head> <body> <div id="block"></div> <script type="text/javascript"> var obj = document.getElementById("block"); var i = 0; function moveBlock() { obj.style.left = i + 2; obj.style.top = i + 2; i++; } setInterval(moveBlock, 100); </script> </body> </html>
Прикрепленный файл | Размер |
---|---|
Пример линейного движения | 31.92 кб |
Комментарии
Копирую код, библиотеку raphael скачала, а анимация все равно не работает. Использовала 3 браузера. В чем может быть проблема? setinterval работает, а animate - нет
Прикрепил к материалу простейший пример линейного движения с использованием библиотеки Raphael.js.
Скачайте и используйте.