В предыдущем уроке, мы с Вами уже познакомились с библиотекой JCanvas, научились создавать различные фигуры, присваивать им имена, объединять в группы и тд.
Сейчас мы рассмотрим как можно взаимодействовать с этими объектами, а именно создавать с ними анимацию.
Итак приступим
Для начала создадим проект с подключенными библиотеками
(пример можно скачать в прикрепленных файлах к уроку jQuery: знакомство с jCanvas)
JCanvas предоставляет метод animateLayer () для анимации свойств слоя jCanvas.
Метод animateLayer () принимает до пяти аргументов:
1. Индекс или имя слоя, который нужно анимировать. Сам объект слоя также является допустимым значением.
2. Объект, содержащий свойства для анимации и их конечные значения
3. Продолжительность анимации в миллисекундах (необязательно, по умолчанию 400)
4. Ослабление анимации (опция, по умолчанию - 'swing')
5. Функция обратного вызова, которая запускается при завершении анимации (необязательно).
Рассмотрим пример
(создадим холст и нарисуем на нем круг)
var $myCanvas = $('#myCanvas') $myCanvas.drawRect({ layer: true, fillStyle: '#9999FF', x: 0, y: 0, width: 600, height: 300, fromCenter: false, }) // Рисуем окружность .drawArc({ layer: true, name: 'red_ellipse', fillStyle: '#FF0000', strokeStyle: '#000', strokeWidth: 1, fromCenter: false, radius: 45, y: 10, x: 10, })
Мы присвоили нашей окружности свойство name: 'red_ellipse', теперь используем метод animateLayer () зададим сдвиг окружности по X
$(function(){ var $myCanvas = $('#myCanvas') $myCanvas.drawRect({ layer: true, fillStyle: '#9999FF', x: 0, y: 0, width: 600, height: 300, fromCenter: false, }) .drawArc({ layer: true, name: 'red_ellipse', fillStyle: '#FF0000', strokeStyle: '#000', strokeWidth: 1, fromCenter: false, radius: 45, y: 10, x: 10, }) $('canvas').animateLayer('red_ellipse', { x: '+=490', }, 1000); })
Разберем данный участок кода, более подробнее:
$('canvas').animateLayer('red_ellipse', { // обращаемся к слою с помощью его имени x: '+=490', // задаем изменение его текущей X координаты }, 1000); // за 1000 миллисекунд, выполняем анимацию, заданную в теле метода
Результат:
Обратите ВНИМАНИЕ, данная анимация выполниться всего один раз. (Зацикливание анимации происходит из-за gif изображения)
Немного усложним движение нашей окружности и с помощью метода setInterval() зациклим нашу анимацию.
setInterval() - стандартный внутренний таймер-планировщик в JavaScript, который позволяет задавать вызов функции через заданный период времени.
$(function(){ var $myCanvas = $('#myCanvas') $myCanvas // зададим фон Canvas .drawRect({ layer: true, fillStyle: '#9999FF', x: 0, y: 0, width: 600, height: 300, fromCenter: false, }) // рисуем окружность .drawArc({ layer: true, name: 'red_ellipse', fillStyle: '#FF0000', strokeStyle: '#000', strokeWidth: 1, fromCenter: false, radius: 45, y: 10, x: 10, }) animate(); // вызываем функцию animate() setInterval(animate, 4000); // вызываем функцию animate() каждые 4 секунды }) function animate() { // для удобства вынесем в ф-цию animate() всю нашу анимацию $('canvas').animateLayer('red_ellipse', { x: '+=490', // сдвиг по X (сдвиг вправо) }, 1000); // выполнение сдвига за 1 сек $('canvas').animateLayer('red_ellipse', { y: '+=190', // сдвиг по Y (сдвиг вниз) }, 1000); // выполнение сдвига за 1 сек $('canvas').animateLayer('red_ellipse', { x: '-=490', // сдвиг по X (сдвиг влево) }, 1000); // выполнение сдвига за 1 сек $('canvas').animateLayer('red_ellipse', { y: '-=190', // сдвиг по Y (возвращаем окружность в начальное положение) }, 1000); // выполнение сдвига за 1 сек }
Результат:
Данный пример прикрепляю ниже
Рассмотрим метод в котором будем использовать "Функцию обратного вызова"
Реализуем не только сдвиг фигуры, а так же изменим его размер, цвет и осуществим поворот
var $myCanvas = $('#myCanvas') var $myCanvas = $('#myCanvas') $myCanvas.drawRect({ layer: true, name: 'box', fillStyle: '#36c', x: 50, y: 50, width: 1, height: 1 }); // Аминирование свойств слоя $('canvas') .animateLayer('box', { x: 150, y: 150, width: 100, height: 50 }, 1000, function(layer) { // Функция обратного вызова $(this).animateLayer(layer, { fillStyle: 'rgb(204, 51, 51)', x: 250, y: 100, rotate: 360 }, 500); });
Результат
Данный пример прикрепляю ниже
Вы также можете анимировать все слои в группе слоев, используя метод animateLayerGroup().
Метод принимает те же основные аргументы, что и метод animateLayer()
.animateLayerGroup('name', { // Тело анимации }, 500);
Остановка анимации
Подобно методу stop () jQuery вы можете остановить любую анимацию слоя в процессе, вызвав метод stopLayer ().
Остановка анимации для всех слоев
$('canvas').stopLayer(0);
Остановка анимации для слоя с именем box
$('canvas').stopLayer('box');
Остановка анимации для групп слоев с именем myGroup
$('canvas').stopLayerGroup('myGroup');
Задержка анимации
Подобно методу jQuery delay () вы можете задержать очередь анимации любого уровня, вызвав метод delayLayer ().
Метод принимает два аргумента: имя слоя / индекс и количество миллисекунд для задержки анимации.
Задержка анимации на 500 миллисекунд для слоя с именем "myBox"
$('canvas').delayLayer('myBox', 500);
Задержка анимации на 500 миллисекунд для группы слоев с именем "myBox"
$('canvas').delayLayerGroup('myGroup', 500);
Заключение:
Мы рассмотрели самые основные методы для аминирование объектов с помощью библиотеки JCanvas, данная библиотека очень проста в изучение и имеет большее применение в будущем.
| Прикрепленный файл | Размер |
|---|---|
| Animate Jcanvas (circle).rar | 40.61 кб |
| Animate Jcanvas (rotate).rar | 40.38 кб |