Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.08.2012, 23:45
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

Как использовать sprit'ы?
Искал в гугле как использовать спрайты... Про то как использовать css-спрайты мне известно, но тут-то так не сделаешь...В общем, в гугле нашел ток какую-то библиотеку для создания анимации с помощью спрайтов, но даже на примере, который был в архиве с библиотекой, нифига не понял, тем более, что там используется jquery, а я с этим вабще не знаком... В общем, прошу помощи - объясните, позязя, мне-слоупоку, как всё-таки сделать анимацию из спрайтов с помощью этой библиотеки...и можно ли вабще без нее (еси да, то объясните, плз, как)? И как использовать спрайты в canvas'е (я знаю, что в canvas'е можно спрайты использовать, где-то видел, но тож не знаю как)? Помогите, позязя)))
Зы: внизу прикрепил библиотеку и один спрайт, на примере которого прошу показать, как это делается...
И да, в примере из архива с библиотекой есть часть кода, где написано, чтобы в ишаке с фоном не было проблем - мне на ишак срать, так что можно не изворачиваться =)
Изображения:
Тип файла: png arrow.png (1.5 Кб, 11 просмотров)
Вложения:
Тип файла: zip spriteAnimation.zip (58.3 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 06.08.2012, 00:15
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Hekumok,
лениво смотреть

Основа - это позиционирование фона
http://htmlbook.ru/css/background-position
т.е любое изо больше размера элемента - по сути явлется спрайтом

элемент - кадр - можно, к примеру, - создать вытянутый спрайт слево направо из кадров мультика и передвигая его с нужной скоростью(покадрово) - мы можем получить анимационную картинку - ну или,
- к примеру - из одной картинки моря (раза в два - три более кадра(ну или размера элемента по горизонтали) - плавно двигая(уже не покадрово) можно получить - волнение моря...
Ответить с цитированием
  #3 (permalink)  
Старый 06.08.2012, 00:23
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

Deff,
background-position это с css-спрайтами... И то, что вы написали, я знаю, но я не знаю, как это сделать!
Ответить с цитированием
  #4 (permalink)  
Старый 06.08.2012, 00:30
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Hekumok,
2-я картинка(прелоадер) http://s1.uploads.ru/i/nkepo.png просто двигает начальное смещение по Х в бекграуде
вот этого элемента <div id="preloader" style="background-position: -8px 0px"/> - красным - меняющаяся позиция
Первая картинка - делает тож самое - ток передвигает покадрово http://s1.uploads.ru/i/rZNAR.jpg (справо - налево
карочь -я походу не глядя описал оба случая

Последний раз редактировалось Deff, 06.08.2012 в 02:05.
Ответить с цитированием
  #5 (permalink)  
Старый 06.08.2012, 00:34
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

Deff, я знаю, что там идет смещение по иксу, но a как это сделать посекундно, чтоб как анимация? И как это сделать с другим спрайтом?
Ответить с цитированием
  #6 (permalink)  
Старый 06.08.2012, 00:45
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Hekumok,
движок выставляет setInerval
далее в нему(setInerval ) наращиваешь i++ и добавляешь к текущей позиции -выставляешь background-position: -XXXpx и смотришь: сравнялся ли правый край картинки( длина её известна) с правым краем твоего div - если сравнялся - сбрасываешь i на 0 и продолжаешь тоже самое. (*По кнопке стоп сlearInterval - что не ясно ?
Ответить с цитированием
  #7 (permalink)  
Старый 06.08.2012, 00:48
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

Deff, просто я тупой слоупок))) огромное вам спасибо =)
Ответить с цитированием
  #8 (permalink)  
Старый 06.08.2012, 00:50
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Hekumok,
Там ксать движение влево(у прелоадера) - поэтому к позиции не добавляешь - а вычитаешь - тогда картинка от 0 - движецо влево до упора правым краем
а у анимашки первой смещение не на 1 пиксел за такт - а на ширину кадра
Ответить с цитированием
  #9 (permalink)  
Старый 06.08.2012, 00:52
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

Deff, еще раз спасибо)))
Ответить с цитированием
  #10 (permalink)  
Старый 06.08.2012, 22:37
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

а как это сделать в canvas'е - там же низзя спрайт в див загнать и background-position смещать?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Как использовать фильтр в дереве ? ExtJS 3.4 ICEMAN3141592 ExtJS 4 02.03.2012 22:55
как использовать json AquaGen jQuery 15 20.01.2012 09:53
Как организовать RichEdit arma Элементы интерфейса 2 18.02.2010 14:57
Как использовать innerText yvarvara Общие вопросы Javascript 29 09.11.2009 05:54