Текст книги "Интерактивная анимация HTML5. Методические указания"
Автор книги: Михаил Ботов
Жанр: Компьютеры: прочее, Компьютеры
сообщить о неприемлемом содержимом
Текущая страница: 1 (всего у книги 2 страниц) [доступный отрывок для чтения: 1 страниц]
Интерактивная анимация 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 (). Ниже пример ее использования.
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<canvas id=«myCanvas» width=«578» height=«400»> </canvas>
<script>
var canvas = document.getElementById (’myCanvas’);
var context = canvas.getContext («2d’);
var imageX = 69;
var imageY = 50;
var imageXsize = 50;
var imageYsize = 50;
var srcX = 50;
var srcY = 40;
var imageObj = new Image ();
imageObj. onload = function () {
context. drawImage (this, srcX, srcY, 100,120, imageX, imageY, 300,210);
};
imageObj.src = 'Koala.jpg’;
</script>
</body>
</html>
Для попиксельной работы и содержимым canvas служит функция getImageData ().
Задание
В рамках тега canvas схематично изобразить солнце (круг с градиентной заливкой для размытости границ) над океаном (синий прямоугольник в нижней части изображения).
3.2 Спрайт-анимация без сторонних библиотек
Спрайт в данном контексте – это растровое изображение, представляющая из себя ленту (в одномерном случае) или таблицу (в двумерном случае) кадров-рисунков. Принцип создания анимации с его помощью такой же, как в кинематографе – пользователю последовательно с определенной скоростью показывают кадры, в результате чего создается иллюзия движения.
Направление движения окна просмотра («замочной скважины», через которую пользователь смотрит на спрайт) может определяться, например, в каком направлении (вверх/вниз/влево/вправо) пойдет персонаж.
Простой пример анимации на спрайтовом изображении показан ниже:
<!DOCTYPE html>
<head> </head>
<body>
<canvas id=«myCanvas» width=«100» height=«100»> </canvas>
<script>
var width = 100,
height = 100,
frames = 4,
currentFrame = 0,
canvas = document.getElementById («myCanvas»);
ctx = canvas.getContext («2d»);
image = new Image ()
image.src = 'sprite.png’;
var draw = function () {
ctx.clearRect (0, 0, width, height);
ctx. drawImage (
image,
0, height * currentFrame, width, height,
0, 0, width, height
);
if (currentFrame == frames) {
currentFrame = 0;
} else {
currentFrame++;
}
}
setInterval (draw, 100);
</script>
</body>
</html>
Задание
Реализовать спрайт-анимацию на своем (найденном в поисковике) изображении.
3.3 Библиотека Createjs
Работать с «холстом» удобнее не непосредственно, а через одну из готовых js-библиотек, скрывающих низкоуровневые операции за лаконичным объектно-ориентированным интерфейсом. Примером такой библиотеки может служить Createjs. Сайт проекта – http://www.createjs.com
Данная библиотека состоит из 4х частей – Easeljs, Tweenjs, Soudnjs, Preloadjs. Каждая специализируется на определенных задачах. Нам потребуются в основном Easeljs и Tweenjs. Мы также поверхностно коснемся Soundjs.
3.3.1 Работа с аудио
Soundjs позволяет API для работы со звуком на нашем проекте.
Пример, проигрывающий указанный аудио-файл, по событию клика на кнопку:
<html lang=«en»>
<head>
<script src="https://code.createjs.com/soundjs-0.6.2.min.js"> </script>
</head>
<body onload=«loadSound ();»>
<button onclick=«playSound ();" class=«playSound»> Play Sound </button>
<script>
var soundID = «Mozart – Presto»;
function loadSound () {
createjs.Sound.registerSound (
«Mozart – Presto.mp3»,
soundID);
}
function playSound () {
createjs.Sound.play (soundID);
}
</script>
</body>
</html>
Задание
Подключить к главной странице Вашего сайта аудиотрек.
3.3.2 Цепочка анимаций
Рассмотрим пример создания объекта на холсте и применения к нему серии анимаций. Так в примере ниже мы сперва создаем объект графической сцены, представляющий тег Canvas, затем создаем геометрическую фигуру и, конкретизировав ее как круг, добавляем на сцену. После чего мы описываем и запускаем цепочку повторяющихся анимаций. Анимации таким образом объединенные в цепочку выполняются последовательно.
<html>
<head>
<script
src="https://code.createjs.com/createjs-2015.11.26.min.js"> </script>
<script>
function init () {
var stage = new createjs.Stage («demoCanvas»);
var circle = new createjs.Shape ();
circle.graphics.beginFill («Crimson»).drawCircle (0, 0, 50);
circle. x = 100;
circle. y = 100;
stage.addChild (circle);
//анимации
createjs.Tween.get (circle, {loop: true})
.to ({x: 400}, 4000, createjs.Ease.getPowInOut (4))
.to ({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut (2))
.to ({alpha: 0, y: 125}, 100)
.to ({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut (2))
.to ({x: 100}, 800, createjs.Ease.getPowInOut (2));
createjs.Ticker.setFPS (60);
createjs.Ticker.addEventListener («tick», stage);
}
</script>
</head>
<body onload=«init ();»>
<canvas id=«demoCanvas» width=«500» height=«500» style=«outline: 1px solid black;"> </canvas>
</body>
</html>
В цепочке можно вызывать методы, останавливающие текущую анимацию (.pause ()) до особого распоряжения (.play (animation_name)) или просто на заданное количество миллисекунд (wait (ms)). Метод. call () позволяет запускать из нужного места цепочки свой произвольный код javascript.
Задание
Создать анимацию схемы объезда автомобилем препятствия на дороге. Вид сверху. Движения простые прямолинейные.
3.3.3 Связанные анимации нескольких объектов; движение по произвольной траектории
Мы можем объявить несколько анимаций (как для одного объекта, так и для нескольких), поставить на паузу и запускать при выполнении определенных условий, например, после выполнения одной из анимаций запускать другую.
К слову, перемещение объектов по холсту может описываться как через задание координат, так и через задание траектории – кривой, вдоль которой будет двигаться объект.
Пример – анимируем два объекта (представлен только javascript код, разметка такая же как в примерах выше)
function init () {
//создаем сцену, связывем с конкретным тегом Холста (через id canvas)
var stage = new createjs.Stage («demoCanvas»);
//формируем объект, который будем рисовать
var circle = new createjs.Shape (); //создали фигуру-заготовку
//детализируем
circle.graphics.beginFill («Crimson»).drawCircle (0, 0, 20);
circle. x = 100;
circle. y = 200;
//добавляем объект на сцену
stage.addChild (circle);
//обновляем сцену, чтобы добавленный (ые) объекты отобразилсь
stage. update ();
//визуализируем кривую, вдоль которой будет двигаться основной объект
var curve = new createjs.Shape ();
curve.graphics.beginStroke (’red’)
.moveTo (0,200)
.curveTo (0,400,200,400)
.curveTo (400,400,400,200)
.curveTo (400,0,200,0)
.curveTo (0,0,0,200);
stage.addChild (curve);
stage. update ();
//второй объект
var bomb = new createjs.Shape (); //создали фигуру-заготовку
bomb.graphics.beginFill («blue»).drawCircle (0, 0, 15);
bomb. x = 200;
bomb. y = 0;
stage.addChild (bomb);
//создаем анимацию-1 («взрыв») объекту-1
var explode = createjs.Tween.get (bomb)
.pause ()
.to ({sizeX:3, sizeY: 3, alpha: 0},1000)
//создаем анимацию-2 («падение») объекту-1
var flyDown = createjs.Tween.get (bomb)
.pause ()
.to ({y:200},1000)
.play (explode)
//организуем Движение объекта-2 вдоль произвольной траектории
createjs.MotionGuidePlugin.install (); //подключим плагин
//Используюя плагин Motion Guide зададим движение по кривой path
//path строится из кривых Безье. Задаем точки как для для moveTo
var goAround = createjs.Tween.get (circle)
.to ({guide: {
path: [0,200, 0,400,200,400, 400,400,400,200, 400,0,200,0]}
},1000)
.play (flyDown)
.wait (500)
.to ({guide: {
path: [200,0, 0,0,0,200]}
},1000);
createjs.Ticker.setFPS (60);
createjs.Ticker.addEventListener («tick», stage);
}
При необходимости выполнять какие-либо действия на каждом шаге анимации (например, ориентировать не круглый объект вдоль траектории, по которой он движется) можно воспользоваться методом. on (), привязывающим обработчика к событиям и событием «change».
Пример
var someAnimaion = createjs.Tween.get (circle);
someAnimaion
.to ({
guide: {
path: [0,200, 0,400,200,400, 400,400,400,200, 400,0,200,0],},
},3000)
goAround. on («change», miniRotate)
/*Поворот несимметричного объекта вдоль траектории движения*/
function miniRotate (event) {
var curr_x = event. target. target. x
var curr_y = event. target. target. y
var old_x = event. target. target. old_x
var old_y = event. target. target. old_y
//пересчитываем угол поворота через старые и новые коодинаты
// ….
//поворачиваем, корректируя направление
event.target.target.rotation = angle;
//сохраняем текущие координаты для расчета смещения на след. шаге
event. target. target. old_x = curr_x;
event. target. target. old_y = curr_y;
}
Задание
Создать анимацию движения марсохода по пересеченному рельефу.
Для удобства синхронизации и запуска определенных фрагментов многокомпонентной анимации существует класс Timeline. Например, несколько отдельных анимаций можно повесить на общую ось времени, пометив маркерами определенные моменты. А затем использовать эти метки для запуска анимации с нужного момента.
Пример
/*запускаем таймер сцены, 60 тиков в секунду*/
createjs.Ticker.setFPS (60);
createjs.Ticker.addEventListener («tick», stage);
/*создаем анимации и запускаем*/
var circle1_anim = createjs.Tween.get (circle1)
.to ({x: 400}, 2000, createjs.Ease.getPowInOut (4));
var circle2_anim = createjs.Tween.get (circle2, {position:1000})
//.set ({x: -100})
.to ({x: 200, alpha:1}, 500, createjs.Ease.getPowInOut (4))
.wait (1000)
.call (function () {
console. log («здесь обязательно будет полезный код…');
})
.to ({x: 300}, 1000, createjs.Ease.getPowInOut (4))
/*навешиваем анимации на общую ось времени с метками*/
var timeline = new createjs. Timeline (
[circle1_anim, circle2_anim],
{Round1:0, Round2:2000},
{loop: true}
);
//timeline.addTween (circle1_anim);
/*идем на стартовую точку общей оси времени и запускаем анимации*/
timeline. gotoAndPlay («start»);
//timeline. gotoAndStop («Round2»); //перейти к метке Round2 и замереть
3.3.4 Определение столкновений
Определение столкновения одного объекта с другим важно при написании игр или анимаций связанных между собой, но зависящих также и от выбора пользователя или случайных факторов, присутствующих в системе.
В createjs для этих целей объекты снабжены специальным методом – hitTest (), который проверяет вошла ли точка, координаты которой ему передали, во внутреннее пространства вызывающего объекта.
Рассмотрим несколько примеров.
Пример-1. Отлавливаем «столкновение» курсора мыши и неподвижного объекта.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
var stage, circle;
function init () {
stage = new createjs.Stage («demoCanvas»);
//нарисуем круг
circle = stage.addChild (new createjs.Shape ());
circle.graphics.beginFill («red»).drawCircle (50,50,50);
circle. x = 0;
circle. y = 0;
//на каждый тик таймера будем выполнять функцию tick
createjs. Ticker. on («tick», tick);
}
function tick (event) {
circle.alpha = 0.2;
//если курсор «столкнулся» с кругом – покажем это
if (circle.hitTest(stage.mouseX, stage.mouseY)) {
circle.alpha = 1;
}
stage. update (event);
}
</script>
</head>
<body onload=«init ();»>
<canvas id=«demoCanvas» width=«300» height=«100»>
alternate content
</canvas>
</body>
</html>
В случае подвижных объектов целесообразно пользоваться одним из семейства методов, переводящих x и y из одной системы координат в другую, например localToLocal () пересчитывает координтаы между локальными системами координат двух объектов. Возможен также пересчет в глобальную систему координат холста и обратно (globalToLocal () и localToGloabl ()).
Пример-2. Отслеживаем столкновение подвижного и неподвижного объектов
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
var stage, arm;
function init () {
stage = new createjs.Stage («demoCanvas»);
target = stage.addChild (new createjs.Shape ());
target.graphics.beginFill («red»).drawCircle (0,0,45)
.beginFill («white»).drawCircle (0,0,30)
.beginFill («red»).drawCircle (0,0,15);
target. x = 100;
target. y = 180;
arm = stage.addChild (new createjs.Shape ());
arm.graphics.beginFill («black»).drawRect (0,0,100,4)
.beginFill («blue»).drawCircle (100,0,8);
arm. x = 180;
arm. y = 100;
createjs. Ticker. on («tick», tick);
//createjs. Ticker. on («tick», stage);
}
function tick (event) {
arm.rotation += 5; //организуем вращение объекту arm
target.alpha = 0.2;
//переводим координаты из одной системы координат в другую
var pt = arm. localToLocal (100,0,target);
//отслеживаем столкновение
if (target. hitTest (pt. x, pt. y)) {target.alpha = 1;}
stage. update (event);
}
createjs.Ticker.setFPS (30);
</script>
</head>
<body onload=«init ();»>
<canvas id=«demoCanvas» width=«300» height=«300»>
alternate content
</canvas>
</body>
</html>
Пример-3. Фиксируем «столкновения» курсора мыши и группы подвижных объектов
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
var stage, holder;
function init () {
stage = new createjs.Stage («demoCanvas»);
holder = stage.addChild (new createjs.Container ());
holder. x = holder. y = 150;
for (var i=0; i <25; i++) {
var shape = new createjs.Shape ();
shape.graphics.beginFill (
createjs.Graphics.getHSL (
Math. random () *360,100,50
)
).drawCircle (0,0,30);
shape. x = Math. random () *300—150;
shape. y = Math. random () *300—150;
holder.addChild (shape);
}
createjs. Ticker. on («tick», tick);
}
function tick (event) {
holder.rotation += 3;
var len = holder.getNumChildren ();
for (var i=0; i <len; i++) {
var child = holder.getChildAt (i);
child.alpha = 0.1;
var pt = child.globalToLocal(stage.mouseX, stage.mouseY);
if(stage.mouseInBounds && child. hitTest (pt. x, pt. y)) {
child.alpha = 1;
}
}
stage. update (event);
}
</script>
</head>
<body onload=«init ();»>
<canvas id=«demoCanvas» width=«300» height=«300»>
alternate content
</canvas>
</body>
</html>
Задание
Анимация «Контрабанда»
На сцене должен быть Протяженный объект («граница») и Динамичный объект, движущийся по своей траектории через границу («контрабандист») в одну стророну и обратно в зацикленной анимации.
При пересечении границы она должна изменять свою прозрачность.
Внимание! Это не конец книги.
Если начало книги вам понравилось, то полную версию можно приобрести у нашего партнёра - распространителя легального контента. Поддержите автора!Правообладателям!
Данное произведение размещено по согласованию с ООО "ЛитРес" (20% исходного текста). Если размещение книги нарушает чьи-либо права, то сообщите об этом.Читателям!
Оплатили, но не знаете что делать дальше?
