Михаил Ботов - Интерактивная анимация HTML5. Методические указания

specialEasing – позволяет установить разные значения easing, для разных CSS-параметров. Задается объектом, в формате параметр: значение.

Пример – изменение группы css-свойств по клику на кнопку:

div {

background-color:#bca;

width:100px;

border:1px solid green;

}

Полить

// Произведем изменение нескольких 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 секунду

});

Задание«Скачущий мяч»

1) Сделать анимацию прыгающего мяча. Мяч начинает движение от верхней границы окна браузера, летит вниз, по достижении определенного уровня (пролететь должен не менее полэкрана) изменяет направление движения на противоположное – летит вверх. По достижении верхней границы окна – снова изменяет направление и летит вниз. И так в бесконечном цикле.

В точках разворота мяч должен немного сжиматься по вертикали.

2). По клику на мяч в точке экрана, на которой был совершен клик появляется текст, например, «Гол!», который уходит вправо, постепенно исчезая.

Элемент разметки для текста создается по клику, смещается вправо с изменением прозрачности и удаляется по достижении правого края экрана

Canvas – это HTML элемент, предназначенный для создания растровых изображений посредством javascript.

Важно отметить, что сам элемент canvas явлется частью DOM-модели документа, но все, что на нем изображается (фигуры, надписи) остается внутри него и в DOM не встраивается.

Canvas вставляется в разметку как и любой другой тег HTML. Работа с его содержимым осуществляется при помощи javascript.

Например :

https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"

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); // очищаем прямоугольную область

Пример градиентной заливки

$ (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);

});

Пример отрисовки фигуры «звезда»

//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 () . Ниже пример ее использования.

Текст предоставлен ООО «ЛитРес».

Прочитайте эту книгу целиком, на ЛитРес.

Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.