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

Вход на сайт

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

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

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

Сейчас проверила нашла причину не запускания // Создание контекста воспроизведения OpenGL и привязка его к панели на форме OpenGLControl1:=TOpenGLControl.Create(Self); with OpenGLControl1 do begin Name:='OpenGLControl1'; //вот тут...
Ну..кажется что то пошло не так http://pp.usera...
Комментарии на английском переведите на русский. Дополните код комментариями, чтоб было понятно как работает алгоритм
Пример, к которому вы оставили комментарий строит именно то самое изображение на языке с#, которое вам необходимо. Отличается только цветовая палитра.

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

Рейтинг@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 кб