На идею создания небольшого движка покадровой анимации меня подтолкнул гугл.
Виды покадровых картинок, которые 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
