Javascript.RU

Картинка с кадрами на 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,

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

=)

+2

Автор: Гость (не зарегистрирован), дата: 10 марта, 2013 - 18:45
#permalink

А можно ли эту анимацию по событию onclick проигрывать?


Автор: Цифровой (не зарегистрирован), дата: 5 июля, 2017 - 12:15
#permalink

А как можно сделать такую же анимацию, но только без спрайта? У меня есть просто набор картинок, не хочу лепить их в спрайт


Автор: Гость (не зарегистрирован), дата: 18 августа, 2017 - 10:47
#permalink

Можно ли анимацию сделать не в div, а в canvas?


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
3 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
gordon freeman
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum