Spritely

2015-11-12 10:21:52 / author: sharkov views 1423Total views: 1423 / 1Views for 7 days: 1
Thanks to Best cliparts
source article: http://spritely.net/documentation/

Spritely ўяўляе сабой просты убудова з толькі два ключавых метадаў, спрайт() і пан() якія проста аніміраваць фонавы малюнак ўласцівасці CSS элемента. Розніца паміж імі складаецца ў тым, што 'спрайт' выявы змяшчае два ці больш 'кадраў анімацыі, у той час як 'пан' выявы змяшчае бесперапыннае малюнак, якое ссоўваецца налева або направа, а затым паўтараецца. Як правіла, у любым выпадку, вы павінны выкарыстоўваць PNG-файл (з або без празрыстасці) для гэтага. Вы, магчыма, пажадае выкарыстоўваць празрысты GIF-файл для Internet Explorer 6 з, хоць гэта, верагодна, не выглядаюць так добра. Ваш HTML-элементы павінны быць ужо патрэбнага памеру вы хочаце, каб спрайт з'яўляцца, але фон малюнка, як правіла, будуць больш, чым HTML-элемент, і Spritely метады ўпраўлення фонавага малюнка ўнутры HTML-элемента.

ХУТКІ СТАРТ

Калі ты нецярплівы, каб апрабаваць Spritely і хочуць бачыць некаторыя аўтаномныя рабочыя прыклады, вы можаце спампаваць некаторыя ўзоры 0.4 код у выглядзе zip-файл.

ШТО НОВАГА Ў ВЕРСІІ 0.6?

Націсніце сюды, каб паглядзець, што новага ў версіі 0.6

АНИМИРОВАНИЕ ВЫЯВЫ З 'СПРАЙТ()' МЕТАД

Вось кароткі прыклад, каб вы пачалі... наступны метад ажыўляе адзін з птушка 'спрайт' летаюць на гэтай старонцы. У 'спрайт' складаецца з трох перыядаў у празрыстыя PNG-малюнка, дзе кожны кадр знаходзіцца бок аб бок:

Spritely

Цяпер нам проста трэба стварыць div з назвай 'птушка', стыль яго дакладна адпаведнага памеру (180x180 пікселяў ў дадзеным выпадку), і ажывіць яго з дапамогай спрайт() метад. Два варыянту, нам трэба, каб карысць ад " фпс " (кадраў у секунду) і 'no_of_frames', напрыклад, тры кадра на малюнку вышэй:

$('#bird').sprite({fps: 12, no_of_frames: 3});

Зрабіць мышкай прыцягнуць спрайт пры націску на экран, выкарыстоўвайце гэта:

$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$('body').flyToTap();

Актыўны() метад робіць гэты спрайт актыўнага спрайт на запуск - у адваротным выпадку спрайт з activeOnClick() становіцца актыўнай толькі тады, калі вы пстрыкніце па ім (або дакрануцца да яе з дапамогай iPhone і iPad).

У $('body').flyToTap() метад, назірае за клік на старонцы ў нейкі момант, пасля якіх току перанос завершаны, спрайт перамяшчаецца ў кропку націску. Пасля некалькіх другое, калі выпадковае рух метад быў ужыты (гл. ніжэй), затым яна адыходзіць зноў.

Каб прымусіць спрайт рухацца выпадковым чынам, у межах піксела абмежаванні (хуткасць у мілісекундах), выкарыстоўвайце гэта:

$('#bird')
.sprite({fps: 8, no_of_frames: 3})
.spRandom({
top: 70,
left: 100,
right: 200,
bottom: 340,
speed: 4000,
pause: 3000
});

ЗРУХ ФОНАВАГА МАЛЮНКА З 'ЛАТКА()' МЕТАД

Вось як вы можаце 'пан' фонавы малюнак, як пагоркі ў дэма уверсе гэтай старонкі:

Юрких

Каб зрабіць фон малюнка патэльні пастаянна налева, стварыце HTML-элемент div менш, чым само малюнак і выкарыстоўваць CSS, каб размясціць вашыя выявы ў якасці фонавага малюнка, пераканаўшыся, ўсталяваць фонавы малюнак, паўтор паўтор-х', напрыклад, яна паўтараецца бесперапынна на гарызантальнай восі.

Цяпер аніміраваць яго Spritely гэта 'пан()' метад:

$('#trees').pan({fps: 30, speed: 2, dir: 'left'});

Вы можаце рэгуляваць хуткасць (пікселяў за кадр) і колькасць кадраў у секунду незалежна адзін ад аднаго. Чаму? - За меншай хуткасці прывядзе да больш гладкай патэльні, тым не менш, вышэй кадраў у секунду можа прывесці да зніжэння прадукцыйнасці (асабліва на прыладах, як iPhone). Вы павінны будзеце эксперыментаваць, каб атрымаць правільны баланс паміж плыўнай анімацыяй і прадукцыйнасць старонкі.

Каб фонавы пласт малюнка адзін над адным, проста змесціце HTML-выявы адзін пад адным, і памяняйце 'Z-індэкса' CSS-ўласцівасці, затым ўсталюйце хуткасць кадраў у секунду і уласцівасцяў, каб даць ілюзію глыбіні. Больш далекія фонавы малюнак павінна рухацца павольней (менш кадраў у секунду), чым буйным планам адзін.

ШТО НОВАГА Ў ВЕРСІІ 0.6?

МЫ З НЕЦЯРПЕННЕМ ЧАКАЕМ ВЕРСІЮ 0.6. Чаму? ТАМУ ШТО ЦЯПЕР ЕСЦЬ SPRITELY ПАДЗЕЙ!

Spritely 0.6 з'явілася магчымасць выклікаць функцыю, калі спрайт дасягае першай, апошняй ці любы іншы каркас. Тры новыя опцыі ўведзеныя для гэтага: on_first_frame, on_last_frame і on_frame. Гэта надзвычай карысна, паколькі гэта азначае, што вы можаце змяніць 'дзяржава' спрайт на любы пазначаны кадр, або спыніць анімацыю ў цэлым.

Вось прыклад:

$('#sprite').sprite({
fps: 9,
no_of_frames: 24,
on_first_frame: function(obj) {
obj.spState(1); // change to state 1 (first row) on frame 1
},
on_last_frame: function(obj) {
obj.spStop(); // stop the animation on the last frame
},
on_frame: { // note - on_frame is an object not a function
8: function(obj) { // called on frame 8
obj.spState(2); // change to state 2 (row 2) on frame 8
},
16: function(obj) { // called on frame 16
obj.spState(3); // change to state 3 (row 3) on frame 16
}
}
});

ТАКСАМА НОВАЕ Ў 0.6:

Вы можаце зараз сказаць спрайт, каб пачаць гуляць на канкрэтнай раме:

$('#sprite').sprite({fps: 9, no_of_frames: 24, start_at_frame: 8}); 

ШТО НОВАГА Ў ВЕРСІІ 0.5?

НОВЫ СПОСАБ: ЗНІШЧЫЦЬ()

Spritely 0.5 ўводзіць метад Destroy (). Гэта прывядзе да скіду элемент цалкам і выдаляе ўсе анімацыі ад яго.

Напрыклад,

$('#balloons').destroy();

ШТО НОВАГА Ў ВЕРСІІ 0.4?

Дзве новыя функцыі, даступныя ў версіі 0.4:

ВЕРТЫКАЛЬНАЕ ПАНАРАМАВАННЕ

Доўгачаканы вертыкальнае панарамаванне цяпер даступная. Гэта азначае, што вы можаце паказаць 'уверх' або 'ўніз' у якасці напрамкі пры званку латка().

Напрыклад,

$('#balloons').pan({fps: 30, speed: 3, dir: 'up', depth: 70});

АНІМІРАВАНЫЯ СПРАЙТЫ НАЗАД

Цяпер можна гуляць спрайт ў зваротным кірунку (напрыклад, перамотка). Гэта дасягаецца з дапамогай "перамоткі" варыянт. Напрыклад,

    $('#bird')
.sprite({fps: 1, no_of_frames: 3, rewind: true})
.spRandom({top: 50, bottom: 200, left: 300, right: 320})
.isDraggable()
.activeOnClick()
.active();

ЗМЯНЯЮЧЫ КОЛЬКАСЦЬ КАДРАЎ У СЕКУНДУ

Цяпер вы можаце змяніць колькасць кадраў у секунду на кадраў у секунду() метад:

$('#bird').fps(30);
$('#hills').fps(12);

ЗМЯНЕННЕ ФОНУ ХУТКАСЦЯЎ АДНОСНА ІХ ГЛЫБІНІ

Цяпер, калі нашы шпалеры маюць глыбіню, мы можам легка змяніць іх хуткасць адносна адзін аднаго з $.spRelSpeed() метад.

Перамесціце паўзунок у згаданай вышэй дэма прагляд ўплыву глыбіні на хуткасць фонавых аб'ектаў, параўноўваючы яго з гэтым чынам:

Юрких

Каб змяніць фон адносна хуткасцяў, сумяшчаць усе фоны ў адным селектара jQuery і выкарыстоўваць spRelSpeed() метад:

$('#clouds, #hills').spRelSpeed(30);

... дзе "spRelSpeed' значэнне-гэта колькасць кропак для перамяшчэння, на раме, памятаючы пра тое, што менавіта адносна элемента па глыбіні. Такім чынам spRelSpeed(30), ужытых да аб'екта на глыбіні 100 будзе рухацца аб'ект у 30 пікселяў на кадр. Наносяць аб'ект на глыбіні 50 аб'ект будзе рухацца на 15 кропак на кадр. Вы можаце змяніць кадраў у секунду, асобна - гл. вышэй.

ЗМЯНЕННЕ ФОНАВАЙ ХУТКАСЦІ АБСАЛЮТНА

$.spSpeed() метад дазваляе Вам змяніць фон, хуткасць абсалютна (гэта эквівалентна глыбіні 100):

$('#hills').spSpeed(20); 

Яшчэ раз, хуткасць велічыня-гэта колькасць кропак для перамяшчэння, на раме.

ЗМЯНЯЕЦЦА НАПРАМАК ФОНАВАЙ АНІМАЦЫІ

У spChangeDir('левага') або spChangeDir('права') метады могуць быць выкарыстаны на фоне анімацыі, каб змяніць кірунак налева або направа адпаведна:

$('#hills').spChangeDir('left'); // change background direction left (travel right!)
$('#hills').spChangeDir('right'); // change background direction right (travel left!)

ЗМЯНЯЮЧЫ КІРУНАК АБО 'ДЗЯРЖАВА' СПРАЙТОВОЙ АНІМАЦЫІ

Каб змяніць кірунак спрайтов, вы павінны выкарыстоўваць іншы метад, $.spState(), і вам патрэбен іншы лад, з некалькімі радамі рамак, па адным радку для кожнага дзяржавы, як у наступным прыкладзе:

Spritely

Другі шэраг (летае задам наперад) уяўляе другое "дзяржава" спрайт, і вы таму мяняць свой кірунак з:

$('#bird').spState(2); // fly backwards (row 2 of the sprite)
$('#bird').spState(1); // fly forwards (row 1 of the sprite)

ПРЫПЫНКУ І ЗАПУСКУ АНІМАЦЫІ

Для прыпынку і запуску анімацыі спрайт і фону, выкарыстоўваць spStop(), spStart() і spToggle() метады:

$('#bird').spStop(); // stop a sprite or background animation at the current frame
$('#bird').spStop(true); // stop a sprite or background animation, returning to frame 1
$('#bird').spStart(); // start a sprite or background animation
$('#bird').spToggle(); // toggle a sprite or background animation on or off

ЗРАБІЦЬ СПРАЙТ ПЕРАЦЯГВАЦЬ

У isDraggable() метад дазволіць спрайт цягнуцца ў любую кропку экрана. Есць таксама тры параметру, якія могуць быць выкарыстаны з гэтым метадам; пуск, стоп, і перацягнуць. Гэтыя дадатковыя зваротныя выклікі будзе спрацоўваць у пачатку, у канцы ці падчас перацягвання элемента. Глядзіце прыклад ніжэй:

$('#bird').isDraggable({
start: function() {
// Fade sprite to 70% opacity when at the start of the drag
$('#bird').fadeTo('fast', 0.7);
},
stop: function() {
// Return sprite to 100% opacity when finished
$('#bird').fadeTo('fast', 1);
},
drag: function() {
// This event will fire constantly whilst the object is being dragged
}
});

Звярніце ўвагу, што isDraggable() метад патрабуе jQueryUI.

СПАЛУЧАЮЧЫ ДЗЕЯННІ, КАБ ВЫРАБІЦЬ АДНО ДЗЕЯННЕ

Вы можаце, вядома, сумяшчаць дзеянні ў адзіны метад, так што вы можаце кантраляваць рух ўсей сцэны. Наступны код, напрыклад, вызначае метад 'fly_forwards_quickly ()', што вы можаце кіраваць з дапамогай аднаго кліку:

var fly_quickly_forwards = function() {
$('#bird')
.fps(20)
.spState(1);
$('#clouds, #hills')
.spRelSpeed(30)
.spChangeDir('left');
};

Звярніце ўвагу, што рэкамендуецца для стварэння ўсіх метадаў у адзін аб'ект замест стварэння старонкі зменных, аднак мы ўключылі ў прыведзеным вышэй прыкладзе для прастаты.

МАЛЮЕМ СПРАЙТ ГУЛЯЦЬ ЗА ФІКСАВАНАЕ КОЛЬКАСЦЬ ПЕРЫЯДАЎ

Яшчэ адзін новы метад, даступны ў версіі 0.2, хоць і не паказалі ў дэма, з'яўляецца магчымасць стварыць спрайт, які гуляе за фіксаванае колькасць перыядаў, а затым спыняецца:

// play a sprite for a maximum of 30 frames
$('#my_sprite').sprite({fps: 9, no_of_frames: 3, play_frames: 30});

БОЛЬШ ПРЫКЛАДАЎ

Больш прыкладаў кода можна знайсці, прачытаўшы зыходны код гэтай старонкі - і не забывайце, што вы можаце камбінаваць з іншымі Spritely і jQuery метады для стварэння складаных анімацый.

Вордпресс

У нас есць implimented Spritely у TwentyEleven змаўчанні WordPress тэма ў якасці прыкладу, каб паказаць, як вы можаце дадаць Spritely каб вашы карыстацкія тэмы WordPress.

Дваццаць Адзінаццаць - Spritely

АДНО ЗАКЛЮЧНАЕ СЛОВА ЗАСЦЯРОГІ...

Выкарыстоўваць Spritely скупа. Трохі Spritely праходзіць доўгі шлях, але празмерна амбіцыйных выкарыстанне гэтых метадаў можа прывесці да зніжэння прадукцыйнасці, асабліва на мабільных прыладах. Трохі руху на вялікі старонцы можа быць лепш, чым вялікі рух на невялікай тэрыторыі. Калі ласка, праверце Spritely старанна для вашай мэтавай аўдыторыі/платформаў, перш чым распрацаваць свой сайт як прадукцыйнасць можа змяняцца ў залежнасці ад платформы.

paper4pc
Add a comment:
Sign in

See also

simula page

Старонка SIMULA

2015-11-02 16:53:03

(з) Ярек Скленар "Гэта было паляпшэннем у параўнанні з большасцю яго пераемнікаў " (Тоні Хоар каментар пра Алголе 60) Аб'ектна-арыентаванае Мадэляванне (ААС) можна...

НАВУКА ПАЛКА

Навуковая палка

2015-11-09 16:36:42

Архіў рэцэнзій на кнігі, слупкі і каментары Фрэда Борца Сардэчна запрашаем у мой архіў...

Teaching & Learning

Аб Выкладання І Навучання

2015-11-02 17:08:33

У сваей найбольш радыкальнай моманты, скажу Няма такога паняцця, як вучэнне. Калі я спрабую быць больш удумлівым, я дадам, "есць толькі вучоба,...

Living Life Dangerously

Я веру ў жывой жыцця небяспечна

2015-11-02 17:01:23

"Я веру ў жывой жыцця небяспечна" (Прынц Валійскі) Я гулец. Я смелы гулец. Я азартны гулец. Я іду прама наперад. Мой...