Покадровая анимация на javascript, спрайтовая анимация

в 22:10, , рубрики: javascript, scriptjava, Веб-разработка, покадровая анимация, Программирование, спрайты, метки: , , ,

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

image

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

1.

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

2.

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

3.

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

В итоге я написал два движка которые позволяют создавать анимацию из спрайтов.
cartoon_background.js
cartoon_image.js

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

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

cartoon_background.js

В том месте где будет анимация нужно вставить слой

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

Чтобы запустить анимацию нужно выполнить следующий 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

В том месте где будет анимация нужно вставить слой с изображением

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

Чтобы запустить анимацию нужно выполнить следующий 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-ой строки (как клетки в шахматной доске)

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

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

Пример можно скачать отсюда

Автор: olololchik


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js