Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

torrvic, возможно, Вам нужно добавить -lGLU
Извините за тупой вопрос. У меня при сборке Вашего примера выходит ошибка: "undefined reference to gluLookAt". Не могу найти в какой библиотеке находится эта функция. У меня задано: -lGL -lglut ... Искал в /usr/lib таким образом: nm lib*so* | grep...
Здравствуйте. Спасибо за проект. У меня вопрос, по какой причине определение принадлежности точки многоугольнику работает некорректно, если координаты из больших чисел состоят, например: int[] vertex = new int[] {...
Сейчас проверила нашла причину не запускания // Создание контекста воспроизведения OpenGL и привязка его к панели на форме OpenGLControl1:=TOpenGLControl.Create(Self); with OpenGLControl1 do begin Name:='OpenGLControl1'; //вот тут...
Ну..кажется что то пошло не так http://pp.usera...

Счетчики и рейтинг

Рейтинг@Mail.ru
Среда программирования: 
HTML 5 + JavaScript

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

Комментарии

Маргарита аватар
Опубликовано Маргарита в 6. Апрель 2015 - 16:54.

Копирую код, библиотеку raphael скачала, а анимация все равно не работает. Использовала 3 браузера. В чем может быть проблема? setinterval работает, а animate - нет

admin аватар
Опубликовано admin в 6. Апрель 2015 - 18:20.

Прикрепил к материалу простейший пример линейного движения с использованием библиотеки Raphael.js.

Скачайте и используйте.