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

Вход на сайт

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

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

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

Всем у кого не работает. файл wizard.script Ещё одно упоминание Glut32 в строке "if (!VerifyLibFile(dir_nomacro_lib, _T("glut32"), _T("GLUT's"))) return false;" меняем на "if (!VerifyLibFile(dir_nomacro_lib, _T("freeglut"), _T("GLUT's"))) return...
Не получается, емаё
огромное спасибо за подробное объяснение про 3д графику на питоне, в интернете очень мало подобной информации
dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(

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

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
HTML 5 + JavaScript

Анимация с помощью библиотеки JCanvas (JQuery)

В предыдущем уроке, мы с Вами уже познакомились с библиотекой JCanvas, научились создавать различные фигуры, присваивать им имена, объединять в группы и тд.
Сейчас мы рассмотрим как можно взаимодействовать с этими объектами, а именно создавать с ними анимацию.

Итак приступим
Для начала создадим проект с подключенными библиотеками
(пример можно скачать в прикрепленных файлах к уроку jQuery: знакомство с jCanvas)

Анимация слоев в 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).rar40.61 кб
Animate Jcanvas (rotate).rar40.38 кб