Картинка с кадрами на javascript. Спрайты на javascript. Создание анимации из картинок на javascript.

На javascript можно создать анимацию из одного изображения представляющего из себя набор картинок - кадров.

Представте себе старую киноленту на которой множество кадров.
Если эту киноленту сделать в виде одного изображения, то движок который я здесь описываю превратит эту картинку (киноленту) в полноценный фильм.

Движок работает во всех браузерах в том числе в IE6 и выше.

Спрайты или картинки с кадрами - это изображения похожие на пленку с кадрами.

пример вертикального спрайта:

Пример использования спрайтов гуглом:
http://www.google.ru/logos/2011/henson.html

http://www.google.ru/logos/2011/henson11-hp-6ea.png
http://www.google.ru/logos/2011/henson11-hp-6ea-er.png
http://www.google.ru/logos/2011/henson11-hp-6ea-lr.png
http://www.google.ru/logos/2011/henson11-hp-4ga-l.png
http://www.google.ru/logos/2011/henson11-hp-4g.png
http://www.google.ru/logos/2011/henson11-hp-2o.png
http://www.google.ru/logos/2011/henson11-hp-3o.png
http://www.google.ru/logos/2011/henson11-hp-4g.png
http://www.google.ru/logos/2011/henson11-hp-6e.png
http://www.google.ru/logos/2011/henson11-hp-5l.png

Виды покадровых картинок, которые javascript движок превращает в анимацию:

1.

|1кадр|2кадр|3кадр|4кадр|5кадр|...|

2.

|1кадр|
|2кадр|
|3кадр|
|4кадр|
|5кадр|
|...|

3.

|1кадр|2кадр|3кадр|
|4кадр|5кадр|6кадр|
|7кадр|8кадр|9кадр|
...

Движок может проигрывать кадры последовательно либо в обратном порядке.
Количество кадров может быть сколько угодно, ограничений нет.
С помощью движка так же можно отображать кадры по их порядковому номеру.

Сразу перейдем к примеру, зайдите по ссылкам и подождите пока загрузятся сайты которые я сделал для вас:

http://zlatogorie2.onfind.net/

http://zlatogorie3.onfind.net/

Вся анимация на сайте сделана с помощью моего движка и покадровых картинок!!!

По ссылке скачивайте движок с примерами, обязательно!
В архиве много наглядных красивых примеров включая и те 2 сайта что выше.

http://nagon.net/uploads/files/58/58-5lxvnius6.zip

Вообще в архиве лежит 2 одинаковых движка, но с разными принципами работы:
1. анимация фонового изображения элемента
2. анимация картинки внутри элемента
В общем эти движки ничем не отличаются по функциональности.

Мануал находится в архиве, но я его тут все таки напишу:

В папке core_engine находятся следующие файлы
- cartoon_background.js - движок прогрывающий фоновое изображение элемента
- cartoon_image.js - движок проигрывающий изображение внутри элемента
- NRMSLib.js - модуль для проигрывания музыки
- scriptjava.js - фреймворк упрощающий программирование

Для использования движков вначале нужно подключить scriptjava.js

<script type="text/javascript" src="core_engine/scriptjava.js"></script>

Движки написаны на упрощеном javascript, поэтому подключать фреймворк scriptjava.js нужно раньше чем движки.

Движки cartoon_background.js и cartoon_image.js внешне работают одинаково, но имеют разный принцип работы.

cartoon_background.js
Этот движок проигрывает фоновое изображение элемента, делая фон анимацией.
Чтобы использовать этот движок, нужно вначале его подключить:

<script type="text/javascript" src="core_engine/cartoon_background.js"></script>

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

<div id="cartoon"></div>

У слоя обязательно должен быть id.

Чтобы запустить анимацию нужно запустить следующий javascript код:

var cartoon_background1=new cartoon_background();//создаю новый экземпляр обьекта, имя придумываю сам
cartoon_background1.play({
	id:'cartoon',//id div элемента
	src:'test_img/test.png',//ссылка на изображение
	frames_x:60,//количество кадров на изображении по x
	frames_y:1,//количество кадров на изображении по y
	width:12120,//ширина изображения в пикселях
	height:193,//высота изображения в пикселях
	fps:24,//скорость показа кадров в секунду, можно писать дробные числа
	reverse:false,//если true то проигрывается с конца в начало
	playandstop:false,//если true то проиграть 1 раз и передать управление функции next
	next: function () {//выполнится только если playandstop==true
		//сюда можно пысать следующий код который будет выполняться после завершения анимации
		//к примеру можно вставить следующую анимацию с другим изображением
	}
});

В любой момент анимацию можно остановить так:

cartoon_background1.stop();

Если нужно отобразить какой то кадр то вначале нужно запустить анимаци, сразу ее остановить и отобразить нужный кадр:

cartoon_background1.getframe(2,1);//получаю 2 кадр по x из 1-ой строки (как клетки в шахматной доске)

cartoon_image.js
Этот движок проигрывает изображение внутри элемента, делая само изображение анимацией.
Чтобы использовать этот движок, нужно вначале его подключить:

<script type="text/javascript" src="core_engine/cartoon_image.js"></script>

Далее в html код нужно вставить слой div внутри которого находится изображение img:

<div id="block">
	<img id="cartoon" border="0" />
</div>

У слоя и изображения обязательно должны быть id.

Чтобы запустить анимацию нужно запустить следующий javascript код:

var cartoon_image1=new cartoon_image();//создаю новый экземпляр обьекта, имя придумываю сам
cartoon_image1.play({
	id:['block','cartoon'],//id div элемента и img элемента
	src:'test_img/test.png',//ссылка на изображение
	frames_x:60,//количество кадров на изображении по x
	frames_y:1,//количество кадров на изображении по y
	width:12120,//ширина изображения в пикселях
	height:193,//высота изображения в пикселях
	fps:24,//скорость показа кадров в секунду, можно писать дробные числа
	reverse:false,//если true то проигрывается с конца в начало
	playandstop:false,//если true то проиграть 1 раз и передать управление функции next
	next: function () {//выполнится только если playandstop==true
		//сюда можно пысать следующий код который будет выполняться после завершения анимации
		//к примеру можно вставить следующую анимацию с другим изображением
	}
});

В любой момент анимацию можно остановить так:

cartoon_image1.stop();

Если нужно отобразить какой то кадр то вначале нужно запустить анимаци, сразу ее остановить и отобразить нужный кадр:

cartoon_image1.getframe(2,1);//получаю 2 кадр по x из 1-ой строки (как клетки в шахматной доске)

Движки cartoon_background.js и cartoon_image.js внешне очень похожи, даже практически одинаковы, поэтому далее я буду рассматривать движок cartoon_image.js

На странице можно проигрывать одновременно несколько анимаций.
Для того чтобы составить анимацию из нескольких изображений нужно поместить последующей анимации в функцию

next: function () {//выполнится только если playandstop==true
	//сюда можно пысать следующий код который будет выполняться после завершения анимации
	//к примеру можно вставить следующую анимацию с другим изображением
}

установив

playandstop:true,

А чтобы анимация шла по кругу, код нужно поместить в функцию и по завершению последовательного проигрыша нескольких анимаций снова запускать фунцию.
В итоге должно получиться чтото типа такого:

function playcartoon() {
var cartoon_image1=new cartoon_image();//создаю новый экземпляр обьекта, имя придумываю сам
cartoon_image1.play({
	id:['block','cartoon'],//id div элемента и img элемента
	src:'test_img/test1.png',//ссылка на изображение
	frames_x:60,//количество кадров на изображении по x
	frames_y:1,//количество кадров на изображении по y
	width:12120,//ширина изображения в пикселях
	height:193,//высота изображения в пикселях
	fps:24,//скорость показа кадров в секунду, можно писать дробные числа
	reverse:false,//если true то проигрывается с конца в начало
	playandstop:true,//если true то проиграть 1 раз и передать управление функции next
	next: function () {//выполнится только если playandstop==true
		var cartoon_image2=new cartoon_image();//создаю новый экземпляр обьекта, имя придумываю сам, другое
		cartoon_image2.play({
			id:['block','cartoon'],//id div элемента и img элемента
			src:'test_img/test2.png',//ссылка на изображение
			frames_x:60,//количество кадров на изображении по x
			frames_y:1,//количество кадров на изображении по y
			width:12120,//ширина изображения в пикселях
			height:193,//высота изображения в пикселях
			fps:24,//скорость показа кадров в секунду, можно писать дробные числа
			reverse:false,//если true то проигрывается с конца в начало
			playandstop:true,//если true то проиграть 1 раз и передать управление функции next
			next: function () {//выполнится только если playandstop==true
				playcartoon();//по завершении анимации начинаю все сначала
			}
		});
	}
});
}
//запускаю анимацию
playcartoon();

Обратите внимание что везде стоит

playandstop:true,

Чтобы проигрывать анимацию в обратном порядке нужно установить

reverse:true,

Иногда требуется проиграть анимацию в одном порядке, а потом сразу в обратном и так по кругу.
Вот пример как это делается:

function playcartoon() {
var cartoon_image1=new cartoon_image();//создаю новый экземпляр обьекта, имя придумываю сам
cartoon_image1.play({
	id:['block','cartoon'],//id div элемента и img элемента
	src:'test_img/test.png',//ссылка на изображение
	frames_x:60,//количество кадров на изображении по x
	frames_y:1,//количество кадров на изображении по y
	width:12120,//ширина изображения в пикселях
	height:193,//высота изображения в пикселях
	fps:24,//скорость показа кадров в секунду, можно писать дробные числа
	reverse:false,//если true то проигрывается с конца в начало
	playandstop:true,//если true то проиграть 1 раз и передать управление функции next
	next: function () {//выполнится только если playandstop==true
		var cartoon_image2=new cartoon_image();//создаю новый экземпляр обьекта, имя придумываю сам, другое
		cartoon_image2.play({
			id:['block','cartoon'],//id div элемента и img элемента
			src:'test_img/test.png',//ссылка на изображение
			frames_x:60,//количество кадров на изображении по x
			frames_y:1,//количество кадров на изображении по y
			width:12120,//ширина изображения в пикселях
			height:193,//высота изображения в пикселях
			fps:24,//скорость показа кадров в секунду, можно писать дробные числа
			reverse:true,//если true то проигрывается с конца в начало
			playandstop:true,//если true то проиграть 1 раз и передать управление функции next
			next: function () {//выполнится только если playandstop==true
				playcartoon();//по завершении анимации начинаю все сначала
			}
		});
	}
});
}
//запускаю анимацию
playcartoon();

Как я уже писал в самом начале, изображение может иметь разный вид.

Для анимации в виде горизонтального изображения

|1кадр|2кадр|3кадр|4кадр|5кадр|...|

нужно устанавливать

frames_y:1,
frames_x:количество кадров на изображении,

Для анимации в виде вертикального изображения

|1кадр|
|2кадр|
|3кадр|
|4кадр|
|5кадр|
|...|

нужно устанавливать

frames_y:количество кадров на изображении,
frames_x:1,

Для анимации в виде прямоугольного изображения

|1кадр|2кадр|3кадр|
|4кадр|5кадр|6кадр|
|7кадр|8кадр|9кадр|
...

нужно устанавливать

frames_y:количество кадров по вертикале,
frames_x:количество кадров по горизонтале,

При установке

reverse:true,

кадры будут проигрываться в обратном порядке

1.

|...|5кадр|4кадр|3кадр|2кадр|1кадр|

2.

|...|
|5кадр|
|4кадр|
|3кадр|
|2кадр|
|1кадр|

3.

...
|9кадр|8кадр|7кадр|
|6кадр|5кадр|4кадр|
|3кадр|2кадр|1кадр|

Скорость показа анимации устанавливается с помощью

fps:24,

Число 24 означает что в секунду сменится 24 кадра.
Можно так же написать дробное число, например

fps:0.1,

_________________________
вот так вот все просто

=)