[JS UI&DOM] Анимации с Canvas/SVG


12

Здравейте, колеги.

Поиграх си следобеда и направих един Супер Марио(не Марио Балотели,а оригиналния)  дето се разкарва наляво-надясно по екрана. Накратко - използвам kineticjs, за да си манипулирам човечето. Самото човече го зареждам от sprite изображение и от там вземам различните му state-ове. За фона използвам обект image като си помагам с Raphael, за да си генерирам SVG-то.

За да може генерирания canvas,т.е. човечето да е над картинката, съм задал z-index в стилизирането.

Тук  можете да намерите задачата.

ДЕМО

ПС: Понеже съм ползвал VS, ако пускатае директно html файла няма да се отвори коректно. Трябва да се изтрие ../ от пътищата до снимките и ще бачка или трябва да стане така.

Поздрави :)




Отговори



0
Дай Live link някъде, че да може да видим Демо. Btw от тоя GitHub, някой знае ли как се сваля цяла папка ?

от nzhul (3415 точки)


0
отстрани има Download ZIP :) За демото - ще се опитам по-късно да кача
ПС: ZIP-a не става за отделен проект,а за цялото хранилище:)

от mita4itu (1969 точки)

0
Е точно това ми е въпроса - аз може да не искам да ти свалям цялото хранилище, понеже то може да е огромно, а просто да искам да сваля само няколко файла или дадена папка. За това питам ако някой знае дали е възможно това.

от nzhul (3415 точки)



6

Това е моя супер Марио, виждам че с Митака сме гледали един и същ туториал :) На моя му добавих освен движение със стрелките, също така и при mouse click, както и touch за мобилни устройства(тествано - работи) :)


от penjurov (1466 точки)


0
Давайте линк с демо, че е ебаси мъката да downloadваш от github. Може в jsFiddle или някъде другаде.

от nzhul (3415 точки)

0
Сложих в директорията на гита и Архивен файл, поне така можеш да го свалиш с 2 клика.

от penjurov (1466 точки)



0

Това ли е домашното за анимации? Аз не знам кога съм свалил презентацията от системата, но в моята има три задачи: някакви самолети, "Камъните падат' и движение по Архимедова спирала. Кога успяхте да подмените презентациите? angry . Над 2 часа съм загубил да решавам старо домашно


от Hades12 (284 точки)


0
Това явно е било домашното от лекцията за училищната Академия :) аз лично изгубих почти цял ден с него преди да разбера,че са го сменили :)

от mita4itu (1969 точки)


0
Някой може ли да ми каже защо не ми се зачиства рисунката, след като се придвижи до новата позиция. Ето кода: http://pastebin.com/HNqdkkLT

от m.tonkov (161 точки)


0
Защо не пробваш remove, а не clear. Виж тук има нещо подобно : http://stackoverflow.com/questions/9824284/understanding-canvas-kineticjs-layer-clearing

от penjurov (1466 точки)

0
ами пробвах го и не се получава :(

от m.tonkov (161 точки)



11

Здравейте Колеги,

Според мен в условието на задачата се изисква да се създаде анимиран фон чрез SVG, а човечето да ходи надясно без да спира, като за реализирането му се използват спрайтове и Canvas.

Ето тук  може да разгледате и моето виждане за решение на задачата.

Background-a съм го направил анимиран само с SVG, а канваса с KineticJS.

А ето тук може да видите демо.

Ако на демото не виждате движещото се човече, си рефрешнете страницата.


от bankoff (3997 точки)


0

При положение че използвам Kinetic и Raphael, как мога да накарам Kinetic-а да застене върху Raphael? Пробвах с .toBack(), но не се получи.

Ето задачката ми:

https://www.dropbox.com/sh/lq29hxqrzy3wviq/AAB7ldski17sCiQBbhLvV3EKa

Също за това изпълнение на задачата, може ли жокер как да го движа наляво-надясно със стрелките? Направих sprite за наляво. Трябва ли целия код в marioImage.onload да се пренапише и за обратната посока?


от ivan.mihov1 (4988 точки)


0
Аз съм го направил със z-index

от penjurov (1466 точки)

0
Задай: position: absolute; top:0px; bottom: 0px; z-index: 1000; на елемента съдържащ Kinetic




5

Линк към кода

DEMO


Решението за sprite-a е от tutorial-a на kinetic.js. Фона зад марио е направен с Raphael - 2 правоъгълника за небето и земята. Дървото - image, на който е зададен animation с .repeat(Infinity).

 

За тези които се чудят как да си намерят x, y, width и height за sprite-a едно online tool-че, което ми помогна доста.

http://www.spritecow.com/




2

Ето и от мен едно решение.

Код

Демо (ако не се зареди от първия път - рефреш)

Спрайтовете ми бяха удобни за движение наляво. Фонът е статичен, а когато Марио излезе от едната страна, се появява от другата.


от easlavov (4118 точки)


1

Ето и моя вариант на Супер Марио:

Код --> Демо

Не знам защо, но тия анимации много ме затормозяват :D.

Задачата я реших по примера от този сайт: sample

Марио се движи със стрелките напред и назад, но не успях да го изрисувам с лице наляво като се движи назад.


от Tanis (75 точки)


0

 Мисля, че задачата е почти готова, но не успявам да зачистя старата анимация. Когато натисна ново копче или пусна старото, новата анимация се натрупва върху старата. На функцията moveRight() се опитах да го реализирам, но не се получава. Някой може ли да погледне къде е сбъркано:

  https://www.dropbox.com/sh/lq29hxqrzy3wviq/AAB7ldski17sCiQBbhLvV3EKa

П.С. Тези анимации са ми пълна мъгла...


от ivan.mihov1 (4988 точки)