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

Вход на сайт

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

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

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

КРУГОВОЙ ФРАКТАЛ -ОШИБОЧНАЯ ПРОГРАММА! ПАПА ЗибЕрт
Можешь обяснить подробно что как работает, и почему массу не задаем
Здравствуйте, Ильгиз. Математика - царица наук (Карл Гаусс). Изучение математики начинается с детского сада, когда нас учат считать и выполнять простые арифметические операции. Любой, даже самый простейший алгоритм будет связан с арифметическими...
Я хотел узнать математика это обязательно в программирование. Пять лет назад просто из любопытства я увлекся HTML потом изучил CSS и JvaScript потом изучил PHP и Java. Как то не задумывался и начал смотреть форумы и узнал что без математики не...
Все верно, но так же необходимо зайти в: Компоновщик -> Ввод -> Дополнительные зависимости Здесь необходимо нажать изменить и в Дополнительные зависимости прописать это: SDL2.lib SDL2main.lib SDL2test.lib Без этого не заработает. (MVS 2015)

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

Яндекс.Метрика Рейтинг@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.

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