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?


Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 00:45
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 01:21
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:52
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:52
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:52
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:52
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:53
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:53
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 13:13
#permalink

Автор: best commercial pilot training in delhi (не зарегистрирован), дата: 19 декабря, 2022 - 06:19
#permalink

There are a few pros and cons to the best commercial pilot training in delhi that students should be aware of before enrolling. On the plus side, the CPL provides comprehensive training that covers all aspects of flying an aircraft. The curriculum is designed by experienced aviation professionals and is regularly updated to ensure that it meets the latest industry standards. In addition, the CPL offers access to a wide range of resources, including flight simulators, which can help students hone their skills and prepare for their practical exams.


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
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
Антиспам
2 + 2 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
gordon freeman
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

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

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