Анимация в JavaScript

Содержание

Слайд 2

События и узлы DOM

У каждого элемента DOM есть свой метод addEventListener, позволяющий

События и узлы DOM У каждого элемента DOM есть свой метод addEventListener,
прослушивать события, происходящие с ним.
Назначение обработчика на DOM кнопки:


Слайд 3

События и узлы DOM

addEventListener позволяет добавлять любое количество обработчиков.
Метод removeEventListener, вызванный с

События и узлы DOM addEventListener позволяет добавлять любое количество обработчиков. Метод removeEventListener,
такими же
аргументами, как addEventListener, удаляет обработчик.


Слайд 4

Объекты событий

В объектах событий хранится дополнительная информация о событии.


Слайд 5

Действия по умолчанию

При клике на ссылку – переход по ней.
При нажатии

Действия по умолчанию При клике на ссылку – переход по ней. При
на стрелку вниз – прокрутка страницы вниз.
По правому клику мыши – вывод контекстного меню.
И т.п.
Обработчики событий вызываются до того, как сработает действие по умолчанию.
Если нужно отменить действие по умолчанию можно вызвать метод preventDefault объекта события.
var link = document.querySelector("a");
link.addEventListener("click", function(event) {
console.log("Переход по ссылке отменен!");
event.preventDefault();
});

Слайд 6

События кнопок клавиатуры

Нажмите на клавишу V



Слайд 7

События кнопок клавиатуры

//Распознаем коды кнопок клавиатуры:

//какие символы были напечатаны

Переведите фокус на страницу и печатайте.



Слайд 8

Кнопки мыши

Получение точных координат места, где произошло событие мыши – свойства pageX

Кнопки мыши Получение точных координат места, где произошло событие мыши – свойства
и pageY – они содержат координаты в пикселях относительно верхнего левого угла.
.dot {
height: 8px; width: 8px;
background: blue;
position: absolute; }
addEventListener("click", function(event) {
var div = document.createElement("div");
div.className = "dot";
div.style.left = (event.pageX - 4) + "px";
div.style.top = (event.pageY - 4) + "px";
document.body.appendChild(div); });

Слайд 9

Движение мыши

При движении курсора мыши запускается событие «mousemove». Его можно использовать для

Движение мыши При движении курсора мыши запускается событие «mousemove». Его можно использовать
отслеживания позиции мыши.
p:hover { color: red }

Наведите мышь на этот параграф


События:
mousemove – сдвиг курсора мыши
mouseover или mouseout – уход с фокуса
scroll – прокручивание элемента
focus – получение фокуса элемента
blur – потеря фокуса

Слайд 10

Установка таймеров

Для отрисовки обновлений могут быть использованы методы для вызова некоторой функции,

Установка таймеров Для отрисовки обновлений могут быть использованы методы для вызова некоторой
через заданный промежуток времени.
setInterval(function, delay) – начинает периодически исполнять функцию каждые delay миллисекунд.
setTimeout(function, delay) – запускает выполнение указанной функции через delay миллисекунд.
requestAnimationFrame(callback) – сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию callback для обновления анимации перед следующей перерисовкой.

Слайд 11

Установка таймеров

Функция setTimeout схожа с requestAnimationFrame.
Она планирует запуск функции в будущем.
Первый

Установка таймеров Функция setTimeout схожа с requestAnimationFrame. Она планирует запуск функции в
аргумент – что произойдет, второй – через какое количество секунд.
//через две секунды фон страницы станет жёлтым
setTimeout(function() {
document.body.style.background = "yellow";
}, 2000);

Слайд 12

Установка таймеров

setInterval и clearInterval используются для установки таймеров, которые будут повторяться через

Установка таймеров setInterval и clearInterval используются для установки таймеров, которые будут повторяться
каждое указанное количество миллисекунд.
var ticks = 0;
var clock = setInterval(function() {
console.log("tick", ticks++);
if (ticks == 10) {
clearInterval(clock);
console.log("stop.");
}
}, 200);

Слайд 13

Элемент холста Canvas

Canvas (холст) – это элемент из стандарта HTML5, который даёт

Элемент холста Canvas Canvas (холст) – это элемент из стандарта HTML5, который
разработчикам возможность создания динамической графики при помощи JavaScript.
context – объект, чьи методы предоставляют интерфейс для рисования графики.
Два стиля рисования:
2d для двумерной графики
webgl для трёхмерной графики при помощи интерфейса OpenGL.

Слайд 14

Элемент холста Canvas

HTML:

Before canvas




After canvas.


JavaScript:
var canv = document.querySelector("canvas");
var context =

Элемент холста Canvas HTML: Before canvas After canvas. JavaScript: var canv =
canv.getContext("2d");
context.fillStyle = "green";
context.fillRect(10, 10, 100, 50);

Слайд 15

Элемент холста Canvas

Рисуем закрашенный треугольник:

var ct = document.querySelector("canvas").getContext("2d");
ct.beginPath();
ct.moveTo(50, 10);
ct.lineTo(10, 70);
ct.lineTo(90, 70);
ct.fill();
ct.closePath();

Элемент холста Canvas Рисуем закрашенный треугольник: var ct = document.querySelector("canvas").getContext("2d"); ct.beginPath(); ct.moveTo(50,

Слайд 16

Элемент холста Canvas

Метод drawImage позволяет выводить на холст пиксельные данные.
var cx

Элемент холста Canvas Метод drawImage позволяет выводить на холст пиксельные данные. var
= document.querySelector("canvas").getContext("2d");
var img = document.createElement("img");
img.src = "img/hat.png";
img.addEventListener("load", function() {
for (var x = 10; x < 200; x += 30)
cx.drawImage(img, x, 10);
});

Слайд 17

Этапы рисования кадра

Очистить canvas – всё что было нарисовано ранее необходимо стереть.

Этапы рисования кадра Очистить canvas – всё что было нарисовано ранее необходимо
Например, при помощи метода clearRect().
Сохранить начальное состояние canvas – если меняете настройки (стили, трансформации и т.п.), которые затрагивают состояние canvas – следует сохранить это оригинальное состояние.
Нарисовать анимированные фигуры – шаг на котором рисуете кадр.
Восстановить состояние canvas – если вы сохраняли состояние, восстановите его, прежде чем рисовать новый.

Слайд 18

Управление анимацией

var width = 100, height = 100, frames = 4, currentFrame

Управление анимацией var width = 100, height = 100, frames = 4,
= 0;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = 'sprite.png';
function draw() {
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);

Слайд 19

Курсовая работа

Необходимо разработать игру «Кошки-мышки».
Описание:
На игровом поле бегают мышки, у каждой своя

Курсовая работа Необходимо разработать игру «Кошки-мышки». Описание: На игровом поле бегают мышки,
скорость и траектория движения. Игрок должен кликать на мышек, после чего та исчезает, а игрок зарабатывает баллы.
На игровом поле могут находиться не менее 10 мышек. Мышки должны быть трех разных размеров. Клик на маленькой мышке – 30 баллов, на средней – 20, на большой – 10.
Игровое поле должно содержать блок с заработанными баллами.
Дизайн игры должен соответствовать ее логике.

Слайд 20

Передача данных в html-файл

Передать данные в html-файл можно с помощью URL-адреса.
После адреса

Передача данных в html-файл Передать данные в html-файл можно с помощью URL-адреса.
ставиться знак вопроса (?), затем все аргументы, разделенные амперсандом (&).
"sample.html?value1&value2&value3"
Либо с помощью метода GET:
"sample.html?parametr1=value1¶metr2=value2"
Имя файла: Анимация-в-JavaScript.pptx
Количество просмотров: 50
Количество скачиваний: 0