Концепт спритеова постоји већ неко време. То је једна од најчешће коришћених техника у индустрији игара за убрзавање процеса приказивања анимација на екрану. У овом чланку ћемо посебно размотрити како нам ова техника може помоћи да побољшамо корисничко искуство на веб страницама уз помоћ ЦСС Спритеса у следећем редоследу:
- Шта је Сприте?
- Шта је ЦСС Сприте - брзи преглед?
- Пример како помаже у веб развоју?
- Предности употребе ЦСС Спритеова
- Шта програмер мора да уради када ради са ЦСС Спритес?
- Како направити ЦСС Сприте табелу?
- Како радити са ЦСС Спритес-ом?
- Компаније које користе ЦСС Спритес
Шта је Сприте?
Сприте је појединачна слика која је део веће сцене у игри. Вишеструки спритеови се затим комбинују у велику слику која се назива сприте лист. Једном када се лист спритеа учита у меморију, различити спритови се прикажу у брзом низу дајући илузију анимације. То се истовремено ради на десетине до стотине различитих спритеова да би се створила сцена у игри.
Основна идеја је да је много брже учитати слику и приказати њен део где год је то потребно у поређењу са учитавањем више слика и приказати их.
Шта је ЦСС Сприте: Брзи преглед?
ЦСС сприте је техника коју веб програмери често користе за оптимизацију перформанси веб страница. У овој техници се више мањих слика обично истих димензија комбинује у једну велику слику која се назива а сприте лист или сет плочица . Овај сприте лист се затим користи за приказ појединачних елемената где год су нам потребни.
Обично су елементи попут логотипа, стрелица за навигацију, дугмади укључени у сприте лист, јер су готово истих димензија и често се користе на веб страници.
Пример како помаже у веб развоју?
Генерално, током дизајнирања веб страница слике се чувају и користе као појединачне датотеке. Дакле, када корисник отвори веб страницу, прегледач мора да направи ХТТП захтев за сваку од ових датотека, преузме их засебно и прикаже. То доводи до већег времена учитавања странице, јер одређена веб страница може имати велики број мањих слика попут дугмади, икона, логотипа.
ЦСС спритеови помажу програмерима да комбинују ове често коришћене мале слике у једну велику слику. Тада прегледач мора да преузме само једну датотеку на коју се затим користиприказати тражени одељак померањем слике.
Предности употребе ЦСС Спритеова
Две су главне предности употребе ЦСС спритеова у односу на нормалне слике:
Брже учитавање странице: Повећава време учитавања странице пошто се слике коришћене на веб страници појављују чим се лист преузме.
Већа пропусност и мања потрошња ресурса: Не само да ова техника побољшава доживљај крајњег корисника убрзавањем учитавања странице,али такође смањује загушеност мреже јер се даје мањи број ХТТП захтева.
Шта програмер мора да уради када ради са ЦСС Спритес-ом?
Када ради са појединачним сликама, програмер може једноставно радити са ХТМЛ ознаком и по потреби га стилизујте у ЦСС. Али када ради са ЦСС Спритес, програмер треба да уради две специфичне ствари:
- Израда сприте листа
Док развија веб страницу ако програмер одлучи да користи ЦСС спритеове, он / она мора прво да креира сприте лист спајањем свих жељених елемената попут дугмади, логотипа итд. У облику мреже. То се може урадити помоћу било ког програма за уређивање слика, на пример Пхотосхоп или Гимп. Доступни су и многи алати на мрежи који вам помажу да направите лист спритеа. О овим алатима се говори касније у овом чланку.
- Приступите одређеном елементу сприте-а помоћу ЦСС позадина-позиција имовина
Једном када је сприте лист спреман, програмер тада мора да користи ЦСС атрибуте за приступ различитим деловима листа.
- ширина: Ширина спритета
- висина: Висина спритета
- позадина: Упућивање на лист спритеа
- Положај у позадини: Вредности помака (у пикселима) за приступ само траженом делу листа спритета
Како направити ЦСС Сприте табелу?
Можете користити било који софтвер за уређивање слика да бисте своје мање слике распоредили у мрежу, али у наставку се разматрају два лакша метода:
1. Алат за стварање сприте листова на мрежи
ЛИНК: топтал.цом/девелоперс/цсс/сприте-генератор/
јава цастинг двоструко на инт
Овај алат није само бесплатан за употребу већ вам пружа и потребан ЦСС код који се може користити приликом референцирања на сприте лист. Такође, можете петљати око различитих својстава, попут подметања између елемената и промене њиховог поравнања.
2. Генерисање сприте листа са Сприти-јем
Ако користите Грунт, Ноде или Гулп, можете инсталирати пакет под називом Сприти који ће вам помоћи да направите лист спритеа у различитим форматима као што су ПНГ, ЈПГ итд.
Прво, мораћете да инсталирате Сприти користећи:
нпм инсталирај сприти -г
Затим, да бисте генерисали сприте лист, користите следећу наредбу:
сприти ./излаз-директориј/ ./улаз-директориј/*.пнг
Како радити са ЦСС Спритес-ом?
У овом примеру ћемо користити следећи лист спритеа:
Као што видите на горњој слици, шест икона (Инстаграм, Твиттер и Фацебоок) распоређено је у мрежасти образац. У првом реду имамо нормално стање, а у другом реду имамо стање лебдења (слика која се појави када на њих задржимо курсор миша).
Ако сте сприте лист направили помоћу алата о којима смо горе говорили, тада већ знате помаке потребне у ЦСС-у, али ако сте користили неки други алат или вам је једноставно дат неки сприте лист, онда не брините, разговараћемо о методи која помоћи ће вам да надокнадите потребан елемент.
Погледајмо сада врло једноставан начин за добијање потребних помака за сваку од шест икона помоћу МС Паинт-а. Можда није идеално решење за рад са спритовима, али пошто има функцију која пружа координате курсора миша, може се користити за добијање потребних Кс и И координата.
Прво отворите слику листа спритеа (мрежа која садржи све мање слике) и ставите курсор миша у горњи леви угао спритета који желите да зграбите.
Једном када имате координате горње леве тачке вашег спритеа (горња лева Инстаграм слика), можете приказати овај одређени сприте где год је потребно помоћу ЦСС кода:
позадина: урл ('имг_спритес.пнг')
бацкгроунд-поситион: 0 0
ширина: 125пк
висина: 125пк
Ширину и висину користимо као 125 пиксела јер су наше иконе те димензије. Да бисмо преузели следећу слику (Твиттер) у истом реду, користимо следећи код:
позадина: урл ('имг_спритес.пнг')
позиција у позадини: -128пк 0пк
ширина: 125пк
висина: 125пк
Обратите пажњу на атрибут положаја позадине у горњем исечку. (-128пк, 0) значи да померамо наш сприте лист улево за 128 пиксела (узимајући у обзир растојање између елемената) и 0 пиксела на И-оси. Ако бисмо приступили икони твиттер ховер, тада би наш атрибут бацкгроунд-поситион био:
позиција у позадини: -128пк -128пк
На овај начин, сада можемо приступити свакој компоненти нашег сприте листа користећи ЦСС. Прођимо кроз комплетан ХТМЛ и ЦСС код како то учинити.
Корак 1: Писање потребног ХТМЛ кода
У доњем коду једноставно додајемо три везе. Такође, повезаћемо наш ХТМЛ са табелом стилова (сцреен.цсс).
Корак 2: Писање потребног ЦСС-а. Прво ћемо обликовати нашу заједничку класу икона. Овде видите да се позивамо на сприте лист који смо креирали.
/ * Дељена икона Класа * /
спан.ицон линк,
спан.ицон а: посећено{
приказ:блокирати
увлачење текста:-9999пк
позадинска слика: урл (./ имг_спритес.пнг)
позадина-понављање:без понављања
}
Корак 3: Добијање појединачних икона са сприте листа помоћу померања.
/ * Инстаграм икона * /
распон.инстаграм линк,
распон.инстаграм а: посећено{
ширина:125пк
висина:125пк
позадина-положај:0 0
}
/ * Твиттер икона * /
спан.твиттер линк,
спан.твиттер а: посећено{
ширина:125пк
висина:125пк
позадина-положај:-128пк 0
}
/ * Фацебоок икона * /
спан.фацебоок линк,
спан.фацебоок а: посећено{
ширина:125пк
висина:125пк
позадина-положај:-257пк 0
фибоначијев код ц ++
}
Корак 4: Преузимање икона лебдења са сприте листа помоћу померања.
распон.инстаграм а: ховер{позадина-положај:0 -128пк}
спан.твиттер а: ховер{позадина-положај:-128пк -128пк}
спан.фацебоок а: ховер{позадина-положај:-255пк -128пк}
Компаније које користе ЦСС Спритес
Многа велика имена у индустрији користе ЦСС Спритес да би побољшали одзив својих веб локација. Компаније попут Гоогле-а, Фацебоок-а, Амазон-а у великој мери користе ову методу, јер им ово помаже да смање број ХТТП захтева по сесији за одређеног корисника. Ово је огромна корист ако узмемо у обзир да ове компаније у сваком тренутку опслужују милионе купаца.
Сад кад сте схватили шта су ЦСС спритеови и како са њима радити, корак сте ближе свом путу ка учењу ЦСС-а. Концепти попут сприта мењају игру у данашње време, јер је програмерима постало изузетно важно да са веб странице издвоје сваки делић перформанси.
Погледајте наш који долази са обуком уживо коју воде инструктори и искуством у стварном животу. Овај тренинг чини вас вештима за рад са позадинским и предњим веб технологијама. Обухвата обуку о веб развоју, јКуери-ју, Ангулар-у, НодеЈС-у, ЕкпрессЈС-у и МонгоДБ-у.
Имате питање за нас? Молимо вас да га спомињете у одељку за коментаре на блогу „ХТМЛ Имагес“ и јавићемо вам се.