На прошлом уроке мы изучали библиотеку 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.
Скачайте и используйте.