Картинка с кадрами на 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,
_________________________
вот так вот все просто
=)
|
А можно ли эту анимацию по событию onclick проигрывать?
А как можно сделать такую же анимацию, но только без спрайта? У меня есть просто набор картинок, не хочу лепить их в спрайт
Можно ли анимацию сделать не в div, а в canvas?