Михаил Ботов - Интерактивная анимация HTML5. Методические указания
Здесь можно купить и скачать "Михаил Ботов - Интерактивная анимация HTML5. Методические указания" в формате fb2, epub, txt, doc, pdf. Жанр: Руководства, издательство ЛитагентРидеро78ecf724-fc53-11e3-871d-0025905a0812. Так же Вы можете читать ознакомительный отрывок из книги на сайте LibFox.Ru (ЛибФокс) или прочесть описание и ознакомиться с отзывами.
Название:
Интерактивная анимация HTML5. Методические указания
Автор:
Издательство:
неизвестно
Жанр:
Год:
неизвестен
ISBN:
нет данных
Скачать:
Вы автор?
Книга распространяется на условиях партнёрской программы.
Все авторские права соблюдены. Напишите нам, если Вы не согласны.
Все авторские права соблюдены. Напишите нам, если Вы не согласны.
Как получить книгу?
Оплатили, но не знаете что делать дальше? Инструкция.
Описание книги "Интерактивная анимация HTML5. Методические указания"
Описание и краткое содержание "Интерактивная анимация HTML5. Методические указания" читать бесплатно онлайн.
Данная методичка раскрывает основные подходы к созданию интерактивных анимаций в рамках базового стека веб-технологий, опирающихся на стандарт HTML5. В частности рассмотрены: прямое манипулирование элементами DOM при помощи javascript, работа с тегами canvas и svg, в т. ч. с использованием SMIL.
Интерактивная анимация HTML5
Методические указания
Михаил Ботов
© Михаил Ботов, 2017
ISBN 978-5-4485-6305-8
Создано в интеллектуальной издательской системе Ridero
1 Анимация с помощью функции setinterval
Простую анимацию можно организовать при помощи функции setInterval (); Она циклически вызывает переданный ей метод через заданные интервалы времени до тех пор, пока не будет остановлена функцией clearInterval ();
Пример – смещение блока разметки вправо:
<script>
function move (elem) {
var left = 0; // начальное значение
function frame () {// функция для отрисовки
left++
elem.style. left = left + ’px’
if (left == 100) {
clearInterval (timer); // завершить анимацию
}
}
var timer = setInterval (frame, 100) // рисовать каждые 100мс
}
</script>
<div onclick="move(this.children [0])» class=«example_path»>
<div class=«example_block»> </div>
</div>
2 Анимация на jquery
2.1 События
Для реакции на действия пользователя и внутреннего взаимодействия элементов скриптов существует механизм событий.
Событие – это сигнал от браузера о том, что что-то произошло. Существует возможность определить реакцию скрипта на возникновение того или иного события, назначив ему функцию-обработчик. Данная функция (или функции, т. к. можно привязать несколько обработчиков к одному событию) будет вызываться всякий раз, когда нужное событие произойдет (например, пользователь кликнет по изображению). На вход функции обработчику передается специальный объект с информацией о произошедшем событии.
Существует много видов событий. Примеры функций библиотеки jQuery, позволяющие удобно привязывать обработчики к определенным событиям, показаны в приведенных ниже четырех таблицах.
Базовые события
События мыши
События загрузки страницы
События браузера
Всплывание события и его остановка
Нужно сказать, что при наступлении события обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности. Это называется всплыванием события.
Всплытие идёт вверх по иерархии DOM. Обычно событие будет всплывать наверх и наверх, до элемента <html>, а затем до document, а иногда даже до window, вызывая все обработчики на своем пути. Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.
Для остановки всплытия нужно вызвать метод event.stopPropagation ().
2.2 Функция animate
Jquey функция animate () выполняет определенную анимацию на заданном наборе элементов. Анимация происходит за счет плавного изменения их CSS-свойств. Функция имеет два варианта использования:
1).animate (properties, [duration], [easing], [callback])
где
properties – список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)
duration – продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением ’fast’ или ’slow’ (200 и 600 миллисекунд).
easing – изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание ниже)
callback – функция, которая будет вызвана после завершения анимации.
2).animate (properties, options)
где
properties – список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)
options – дополнительные опции. Должны быть представлены объектом, в формате опция: значение.
Варианты опций:
duration – продолжительность выполнения анимации (см. выше).
easing – изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускориться). (см. описание ниже)
complete – функция, которая будет вызвана после завершения анимации.
step – функция, которая будет вызвана после каждого шага анимации.
queue – булево значение, указывающее, следует ли помещать текущую анимацию в очередь анимаций. В случае false (по-умолчанию), анимация будет запущена сразу же, не вставая в очередь. Иначе она будет ждать завершения предыдущей анимации, стоящей в очереди.
specialEasing – позволяет установить разные значения easing, для разных CSS-параметров. Задается объектом, в формате параметр: значение.
Пример – изменение группы css-свойств по клику на кнопку:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<button id=«go»> Полить </button>
<div id=«block»> Газон </div>
<script>
// Произведем изменение нескольких css-величин в ходе одной анимации.
$("#go").click (function () {
$("#block").animate ({
width: «70%», // ширина станет 70%
opacity: 0.4, // прозрачность будет 40%
marginLeft: «0.6in», // отступ от левого края станет равным 6 дюймам
fontSize: «3em», // размер шрифта увеличится в 3 раза
borderWidth: «10px» // толщина рамки станет 10 пикселей
}, 1000); // анимация будет происходить 1 секунду
});
</script>
</body>
</html>
Задание «Скачущий мяч»
1) Сделать анимацию прыгающего мяча. Мяч начинает движение от верхней границы окна браузера, летит вниз, по достижении определенного уровня (пролететь должен не менее полэкрана) изменяет направление движения на противоположное – летит вверх. По достижении верхней границы окна – снова изменяет направление и летит вниз. И так в бесконечном цикле.
В точках разворота мяч должен немного сжиматься по вертикали.
2). По клику на мяч в точке экрана, на которой был совершен клик появляется текст, например, «Гол!», который уходит вправо, постепенно исчезая.
Элемент разметки для текста создается по клику, смещается вправо с изменением прозрачности и удаляется по достижении правого края экрана
3 canvas: рисование на холсте
Canvas – это HTML элемент, предназначенный для создания растровых изображений посредством javascript.
Важно отметить, что сам элемент canvas явлется частью DOM-модели документа, но все, что на нем изображается (фигуры, надписи) остается внутри него и в DOM не встраивается.
3.1 Нанесение изображений при помощи родного API
Canvas вставляется в разметку как и любой другой тег HTML. Работа с его содержимым осуществляется при помощи javascript.
Например:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>
</head>
<body>
<canvas id=«myCanvas» width=600px height=600px> … </canvas>
<script>
var canvas = document.getElementById («myCanvas»);
var context = canvas.getContext («2d»);
//Заливка
context.fillStyle = «#5F5»;
context.fillRect (10,10, 300, 300);
//надпись
context.font = «50px serif»
context.fillStyle = «#FF0000»;
context.fillText («Hello People!», 30, 90);
//фиолетовый прямоугольник
context.fillStyle = «violet»;
context.fillRect (25,25,150,150);
context.strokeStyle = «gray»; // цвет линии
context.lineWidth = 6; // толщина линии
context.strokeRect (150,150,150,150); // прямоугольник
context.clearRect (100,100,150,150); // очищаем прямоугольную область
</script>
</body>
</html>
Пример градиентной заливки
<script>
$ (function () {
var canvas = document.getElementById («myCanvas»);
var context = canvas.getContext («2d»);
//Линейный градиент
context.fillStyle = «#000000»;
var gradient = context.createLinearGradient (5,45,150,150);
gradient.addColorStop (0.0,«#00FF00»);
gradient.addColorStop (0.471428571, «#FF0000»);
gradient.addColorStop (1.0,«#0000FF»);
context.fillStyle = gradient;
context.fillRect (25,25,150,150);
//Радиальный градиент
var rad_grad = context.createRadialGradient (250,250,1, 150,250,120);
rad_grad.addColorStop (0,«#F00»);
rad_grad.addColorStop (0.5,«#0F0»);
rad_grad.addColorStop (1,«#00F»);
context.fillStyle = rad_grad;
context.fillRect (150,150,200,200);
});
</script>
Пример отрисовки фигуры «звезда»
//star
context.strokeStyle = «red»;
context.lineWidth = 10;
context.beginPath ();
context.moveTo (50,100);
context.lineTo (240,100);
context.lineTo (70,230);
context.lineTo (140,30);
context.lineTo (220,230);
context.closePath ();
context.stroke ();
Пример рисования кривой Безье
context.strokeStyle = «red»;
context.lineWidth = 7;
context.beginPath ();
context.moveTo (300, 400);
context. quadraticCurveTo (400, 500, 450,300);
//context.closePath ();
context.stroke ();
На «холст» можно загружать и уже имеющиеся растровые изображения из файлов. Для этого существует функция drawImage (). Ниже пример ее использования.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.
На Facebook
В Твиттере
В Instagram
В Одноклассниках
Мы Вконтакте
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Подписывайтесь на наши страницы в социальных сетях.
Будьте в курсе последних книжных новинок, комментируйте, обсуждайте. Мы ждём Вас!
Похожие книги на "Интерактивная анимация HTML5. Методические указания"
Книги похожие на "Интерактивная анимация HTML5. Методические указания" читать онлайн или скачать бесплатно полные версии.
Понравилась книга? Оставьте Ваш комментарий, поделитесь впечатлениями или расскажите друзьям
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Отзывы о "Михаил Ботов - Интерактивная анимация HTML5. Методические указания"
Отзывы читателей о книге "Интерактивная анимация HTML5. Методические указания", комментарии и мнения людей о произведении.