Share
Odată cu apariția unor instrumente precum Adobe Edge și biblioteci precum EaselJS, mai multe resurse devin disponibile pentru dezvoltatorii care doresc să creeze conținut interactiv HTML5. Multe dintre aceste instrumente sunt destinate în mod special dezvoltatorilor Flash pentru a face ca tranziția de la panoul ActionScript la HTML5 să fie netedă. Acest articol va prezenta în revistă oCanvas, o bibliotecă HTML5 pe care dezvoltatorii ar putea să nu o găsească doar de neprețuit, ci și foarte ușor de utilizat.
Înainte de a ne arunca cu capul în explorarea oCanvas, să setăm rapid scena pentru modul în care funcționează canava HTML5. Dacă doriți o explicație mai detaliată cu privire la utilizarea canvasului HTML5, consultați acest tutorial.
Dacă cunoașteți ActionScript, știți deja o mulțime de JavaScript, care este locul unde se află puterea reală atunci când lucrați cu panza. Folosim API-ul de desen HTML5 pentru a crea conținutul nostru împreună cu un bun JavaScript pentru a face lucrurile interactive și dinamice. Dar, atunci când combinăm cele două, abordarea din spatele felului în care ne apropiem de punerea împreună a codului nostru este puțin diferită de ceea ce suntem obișnuiți cu ActionScript.
Pe scurt, pentru a utiliza API-ul Canvas nativ, atragem pixeli pe contextul desen al pânzei. Dar cheia de reținut este că lucrăm cu întreaga pânză, nu doar cu o singură formă sau imagine pe care am desenat-o. De fiecare dată când vrem să schimbăm ceva pe care l-am desenat, trebuie să reproiectăm întreaga pânză. Dacă vrem să animăm ceva, trebuie să redesemnăm panza din nou în JavaScript pentru a face ca lucrurile să se miște.
Această noțiune este foarte asemănătoare cu animația tradițională, în care animatorii trebuiau să deseneze fiecare poezie în ordinea lor și să-și facă camera să se miște foarte repede pentru a simula mișcarea. Dar dacă sunteți obișnuit cu structuri asemănătoare copacilor, cum ar fi DOM sau cu lista de afișări în Actionscript, această noțiune poate fi dificilă pentru a obține capul în jurul valorii. Această metodă de clătire și repetare a programării este mult diferită de lucrul cu obiecte pentru majoritatea dezvoltatorilor.
Din fericire pentru cei dintre noi care sunt atât de obișnuiți să lucreze cu obiecte, oCanvas aduce acea abordare familiară la panza HTML5. oCanvas este o bibliotecă JavaScript dezvoltată de Johannes Koggdal, cu intenția de a facilita dezvoltarea cu panza HTML5. Acesta vă permite să lucrați direct cu obiecte, să le modificați proprietățile și să le conectați la toate în timp ce vă ocupați de lucrurile din spatele scenei. Așa cum a pus cel mai bine Johannes pe blogul său:
Scopul meu a fost întotdeauna să fac foarte ușor pentru oameni să construiască lucruri pe panza pe baza obiectelor. Am hotărât numele oCanvas ca o contracție a "panzei obiectului".
Pentru a începe să folosim oCanvas, trebuie să includeți o copie a bibliotecii pe pagina noastră HTML. Putem referi fie la fișierul gazduit de CDN, fie la gazda unei copii locale. Salt pe site-ul oCanvas și puteți descărca fie o copie a bibliotecii, fie puteți lua referința la versiunea găzduită de CDN. Versiunea actuală este de 2.0 și a fost lansată acum câteva săptămâni, care a abordat multe dintre bug-urile care au fost lansate inițial. Pe site există o versiune miniaturală de producție, care este utilă atunci când sunteți gata să desfășurați proiectul. Există, de asemenea, o versiune de dezvoltare, care este necomprimată, dar este mai bine pentru depanare. Îmi place să creez o legătură directă către versiunea găzduită pentru o încărcare mai rapidă și cache-ul de către browser.
După ce faceți o referință la oCanvas, în continuare trebuie să configurați un element de canvas în corpul HTML și să creați o referință la acesta pentru a fi utilizat în Javascriptul nostru.
Ca întotdeauna, dacă plasați scriptul deasupra elementului de panza, trebuie să îl înfășurați într-o funcție, astfel încât să știți că DOM este gata. Sunt câteva moduri de a merge aici. Puteți să vă creați propria funcție și apoi să o numiți în elementul dvs. de corp atunci când se încarcă, cum ar fi:
funcția principal () // codul dvs. oCanvas
Sau vă puteți împacheta codul în built-in-ul lui oCanvas domReady () metodă. Acesta este echivalentul lui jQuery $ (Document) .ready (). În oCanvas folosim acest lucru:
oCanvas.domReady (funcția () // Codul dvs. aici);
Notă: Ai putea folosi jQuery $ (Document) .ready () dacă doriți.
Această bucată de cod este absolut necesară și este primul lucru pe care trebuie să-l scrieți când utilizați oCanvas.
var canvas = oCanvas.create (canvas: "#canvas", fundal: "# 0cc", fps: 60);
În acest cod vom stoca o referință la elementul de panza din documentul nostru și vom avea acces la instanța de bază, ceea ce vă va permite să începeți să creați obiecte. crea() metoda ia un obiect ca argument care controlează modul în care va funcționa oCanvas. Există numeroase proprietăți pentru a trece în crea() dar singura obligatorie este proprietatea canvasului: un selector CSS care trebuie să indice un element de panza din DOM.
Celelalte proprietăți trecute în codul de mai sus sunt proprietățile de fond și fps. Proprietatea de fundal vă permite să aplicați un fundal pe panza, care poate fi valorile culorilor CSS, gradientele și imaginile. Dacă este omisă, panza va fi transparentă. Proprietatea fps stabilește numărul de cadre pe secundă la care va funcționa animația. Valoarea prestabilită este de 30 fps.
Notă: În timp ce prezentăm multe dintre caracteristicile din programul oCanvas, vă recomand să verificați documentația bibliotecii pentru a obține o mai bună înțelegere a fiecărei secțiuni.
Există numeroase tipuri de obiecte de afișare pe care le puteți crea cu oCanvas. Puteți crea forme, cum ar fi dreptunghiuri, elipse, poligoane și linii, împreună cu imagini, texte și chiar foi de sprite. Pentru a crea un nou obiect de afișare, folosim modulul de afișare al lui oCanvas și specificăm ce tip de obiect de afișare dorim să creăm, precum și câteva proprietăți de bază - cum ar fi:
caseta var = canvas.display.rectangle (x: 50, y: 150, lățimea: 50, înălțimea: 50, umpleți: "# 000");
Apoi, pentru a adăuga-o pe ecran, noi numim o metodă familiară pentru dvs. Flash dezvoltatori ...
Da, un oldie, dar un goodie, ceea ce face adăugarea de obiecte la oCanvas un proces familiar. Deci, pentru a adăuga caseta noastră la pânză, am scrie:
canvas.addChild (box);
La fel ca în ActionScript, addChild () adaugă obiectul specificat ca copil al apelantului. Și la rândul său, copilul x și y vor fi relativ la părintele său. Deci, în acest caz, facem boxul un copil al pânzei, pe care l-am putea simplifica astfel:
box.add ();
adăuga() metoda adaugă, de asemenea, obiectul pe panza - care este cu adevărat același lucru ca canvas.addChild (caseta). Dar addChild () este cel mai util pentru adăugarea unui obiect ca copil la un obiect afișat deja creat, cum ar fi:
var pătrat = canvas.display.rectangle (x: 0, y: 0, lățime: 10, înălțimea: 10, umpleți: "# 990000"); box.addChild (pătrat);
Să aruncăm o privire asupra unora dintre diferitele tipuri de obiecte de afișare pe care le puteți crea în oCanvas.
Ai văzut deja un pătrat, dar putem folosi dreptunghi obiecte de afișare pentru a crea o mulțime de lucruri. Iată un dreptunghi cu un accident vascular cerebral albastru:
var rectangle = canvas.display.rectangle (x: 500, y: 100, lățimea: 100, înălțimea: 200, umplerea: "# 000", accidentul: "în afara 2px albastru");
completati proprietatea poate lua orice culoare CSS validă, împreună cu gradientele CSS și chiar modele de imagini.
Pentru a crea o elipsă am scrie:
var ellipse = canvas.display.ellipse (x: 100, y: 100, radius_x: 20, radius_y: 30, completați: "rgba (255, 0, 0, 0.5)");
Dacă doriți un cerc complet, înlocuiți-l doar radius_x și radius_y proprietăți cu un singur rază proprietate.
Crearea oricărui tip de poligon regulat este la fel de ușor - tot ce trebuie să faceți este să specificați numărul de laturi și raza pe care doriți să o aibă forma. Pentru a crea un triunghi:
var triunghi = canvas.display.polygon (x: 320, y: 145, fețe: 3, rază: 50, umpleți: "# 406618");
Ce zici de un pentagon?
var pentagon = canvas.display.polygon (x: 200, y: 50, fețe: 5, rotație: 270, rază: 40, umpleți: "# 790000");
Pentru a realiza acest lucru cu API-ul de canvas HTML5, ar trebui să desenați o mulțime de căi și să încercați să aflați ce poziții x și y să li se alăture. Am încercat să desenez un octogon pentru comparație, dar, după cum puteți vedea mai jos, am renunțat destul de ușor. Nu prea sigur ce ar trebui să fie.
Accentsconagua
var canvas = $ ("# canvas"); var ctx = canvas.get (0) .getContext ("2d"); ctx.fillStyle = '# 000'; ctx.beginPath (); ctx.moveTo (0, 0); ctx.lineTo (100,50); ctx.lineTo (50, 100); ctx.lineTo (0, 90); ctx.closePath (); ctx.fill (); Crearea obiectelor afișate cu imagini nu este mai simplă decât în oCanvas. Doar specificați o poziție x și y și calea spre fișierul imagine:
var copac = canvas.display.image (x: 100, y: 350, imagine: "tree.png");
O caracteristică frumoasă a obiectului de afișare a imaginii este ţiglă proprietate, care vă permite să creați cu ușurință o grilă a aceleiași imagini în loc să o desenați din nou și din nou.
oCanvas conține un obiect de afișare a textului și se ocupă de stilul fontului la fel ca și CSS.
var text = canvas.display.text (x: 70, y: 300, aliniați: "center", font: "bold 18px sans-serif", text: "oCanvas Rocks", umple: "purple");
Puteți utiliza multe dintre celelalte proprietăți de text pe care le cunoașteți din CSS. Consultați documentația privind textul pentru mai multe informații.
Toate obiectele de afișare moștenesc un grup comun de proprietăți și metode. Unele dintre cele mai comune proprietăți obiect afișare sunt: x, y, lățime, înălțime, rotire, scalareX, scalare, opacitate, umbră (utilizează sintaxa CSS-box-shadow) și zindex. Puteți verifica acest link pentru o listă completă a proprietăților de bază și a metodelor. Hai să aruncăm o privire asupra altora care merită atenți.
Această metodă este un economizor de timp mare, deoarece vă permite să setați cu ușurință originea în interiorul obiectului. Cu alte cuvinte, vă permite să setați punctul de înregistrare al obiectului. Dacă ați încercat vreodată să efectuați o rotație din centru cu ajutorul API-ului Canvas HTML5, știți cât de mare poate fi o durere de cap. Trebuie să faceți o serie de acțiuni de salvare a stării desenului, traducerea panzei, efectuarea rotației și restabilirea stării desenului. Cu origine proprietate puteți defini cu ușurință originea unui obiect:
var obj = canvas.display.image (x: 270, y: 270, origine: x: "centru", y: "centru");
Aceasta ar atrage imaginea din centrul ei; dacă vom roti obiectul, se va roti și din centrul său. În afară de "centru", puteți trece și în stânga sau în dreapta pentru pozițiile x și "sus" sau "jos" pentru pozițiile y. În plus față de utilizarea cuvintelor cheie predefinite, puteți furniza și numere pozitive sau negative ca valori ale locului unde să desenați obiectul. Originea implicită pentru toate obiectele de afișare este definită în partea stângă sus.
De asemenea, puteți utiliza funcția setOrigin () în orice moment pentru a defini originea unui obiect:
obj.setOrigin ("stânga", "partea de jos") Un id de obiect afișat, care este într-adevăr proprietate numai pentru citire, corespunde unde există obiectul în lista de tragere - pe care o puteți considera ca listă de afișare. Consider că este foarte util, deoarece poate servi ca un identificator unic în anumite situații, când ați putea căuta un obiect specific în codul dvs. Luați în considerare un fragment de bază, astfel:
Funcția getId (box.id) getId (id) if (id == 9) console.log ("CORRECT!" + id) altceva console.log ("WRONG! Proprietatea compoziției este echivalentul lui globalCompositeOperation în cadrul API nativ Canvas. Dacă nu sunteți familiarizați cu acesta, acesta determină în principal modul în care sunt redate pixelii atunci când sunt atrași pe pixeli deja existenți pe panza. Vă încurajez să citiți diferitele operațiuni de compunere pe care le puteți seta, dar cu oCanvas puteți seta pur și simplu operația dorită trecând-o ca un șir:
var forma = canvas.display.rectangle (x: 270, y: 270, lățimea: 180, înălțimea: 80, umpleți: "# ff6900", compoziția: "destination-atop");
Există multe operațiuni diferite pe care le puteți trece, dar cred că unul dintre lucrurile bune pe care le puteți face cu proprietatea compoziției este să creați măști între diferite obiecte de afișare. Consultați fișierul numit masks.html în pachetul de descărcare. Dacă v-ați bazat vreodată pe crearea de măști de straturi în aplicațiile Flash, vă veți bucura de aceasta.
Deoarece am menționat obiectele rotative mai devreme, puteți roti rapid un obiect cu roti() și rotateTo () metode:
obj.rotate (45);
De asemenea, puteți seta pur și simplu proprietatea de rotație:
obj.rotation = 45;
Există și mișcare() și MoveTo () metode care, după cum sugerează și numele acestora, vă permit să mutați un obiect cu o anumită sumă de pixeli pentru prima și pentru a specifica pozițiile x și y pentru acesta.
obj.moveTo (100, 100)
Aceeași idee funcționează pentru scară() și scaleTo () metode ():
(1,25, 0,25) obj.scaleTo (1,5, 1,5)
Am menționat addChild () inainte de; să nu uităm removeChild () și removeChildAt (). Și cum ar fi adăuga() metodă, putem face contrariul cu elimina().
O altă metodă foarte utilă este clona (), care vă permite să duplicați un obiect afișat și toate proprietățile acestuia.
caseta var = canvas.display.rectangle (x: 50, y: 150, lățimea: 50, înălțimea: 50, umpleți: "# 000"); var box2 = cutie.clona (x: 200)
Un mare plus pentru oCanvas este că puteți adăuga evenimente la anumite obiecte. OCanvas conține multe metode și proprietăți pentru a manipula cu ușurință mouse-ul, tastatura și chiar pentru a atinge evenimentele cu o singură metodă simplă.
Dacă sunteți familiarizat cu jQuery, probabil că deja știți unde merg cu asta.
canvas.bind ("faceți clic pe", funcția () canvas.background.set ("# efefef");); Toate acestea fac schimbarea culorii de fundal a pânzei, dar observați modul în care trecem prin "atingeți clic" - ceea ce ne permite ușor să adăugăm suport pentru dispozitivele mouse și touch.
Pe lângă evenimentele clic, puteți asculta și alte evenimente ale mouse-ului:mousedown, mouseup, mousemove, mouseenter, mouseleave și dblclick.
Un efect de rollover simplu ar putea arăta astfel:
box.bind ("mouseenter", funcția () canvas.background.set ("# 333");). ); Acesta este un exemplu de funcții de legare - care (nu sună ca o înregistrare ruptă) este o altă caracteristică jQuery folosită în oCanvas.
Dar, în loc să modificați pânza atunci când apare un eveniment de mouse, ce să modificați un obiect afișat? Acesta este în continuare HTML5 Canvas la urma urmei, așa că trebuie să ne amintim să apelați o metodă importantă pentru a spune pânzei să se actualizeze.
redesenare () (care este, de fapt, parte a modulului Draw, nu Modulul de evenimente) redă panza cu toate obiectele afișate care au fost adăugate. Deci, dacă doriți să efectuați o acțiune asupra unui anumit obiect și să aveți restul listei de tragere să rămână intact, trebuie să adăugați această linie simplă de cod funcțiilor noastre:
square.bind ("faceți clic pe", funcția () square.x + = 50; canvas.redraw ();); Ce bun este un ascultător al evenimentului dacă nu îl putem elimina?
rectangle.bind ("faceți clic pe", funcția onClick () this.fill = "# FF9933"; canvas.redraw (); rectangle.unbind ("faceți clic pe", onClick)); Nu avem nevoie de ele lega() pentru aceasta. Noi scriem doar:
circle.dragAndDrop ();
Acesta este probabil cel mai rapid și mai ușor cod de drag și drop pe care îl veți scrie vreodată.
Notă privind evenimentele: Când lucrați cu evenimente, este natural să doriți să obțineți cât mai multe informații despre eveniment. Din fericire, putem încă face acest lucru atunci când lucrăm cu oCanvas. De exemplu, dacă luăm mânerul de clic câteva linii în sus și vom înregistra evenimentul la consola, vom putea vedea toate proprietățile pe care le avem de la eveniment.
rectangle.bind ("faceți clic pe", funcția onClick (e) this.fill = "# FF9933"; canvas.redraw (); rectangle.unbind (" ); 
Pe lângă evenimentele mouse-ului, oCanvas are module întregi dedicate evenimentelor tastaturii și touch cu propriile lor metode și proprietăți unice. Aceste evenimente sunt, de asemenea, tratate cu lega() metodă. Sistemul de evenimente din oCanvas este un subiect foarte larg, așa încurajez să aruncăm o privire la secțiunea de evenimente din documentația și experimentarea.
Cu modulul Cronologie putem configura o bucla principală pentru aplicația noastră. Dacă creați un joc, acesta ar fi, în esență, jocul dvs. de joc. Îmi place să mă gândesc la asta ca la echivalentul unui ENTER_FRAME în Flash.
Este simplu de configurat - suntem doar numiți setLoop funcția și lanțul start() la aceasta metoda:
canvas.setLoop (funcție () triangle.rotation + = 5;). start ();
Dacă vrem să legăm setLoop () funcția unui eveniment - să spunem la un click de mouse - putem face ceva de genul:
canvas.setLoop (funcție () triangle.rotation + = 5;) button.bind ("faceți clic pe", funcția () canvas.timeline.start ()); Și am putea opri cronologia apelând pur și simplu:
canvas.timeline.stop ();
Utilizarea setLoop () este modalitatea de a merge pentru animații care vor apărea pe o perioadă lungă de timp și pentru a face față actualizărilor constante trebuie să faceți în întreaga aplicație. Dar oCanvas a construit metode pentru a trata animații mai simple și mai simple, care sunt de obicei necesare. Aceste metode sunt, de asemenea, practic preluate în mod verbală de la jQuery.
anima() metoda funcționează la fel ca în jQuery. Dacă nu sunteți familiarizați cu această parte a jQuery, gândiți-vă cum ar fi un motor tweening cum ar fi TweenMax sau Tweener for Flash. Puteți anima orice proprietate care poate fi setată cu o valoare numerică:
cerc.animate (y: circle.y - 300, scalingX: .5, scalingY: .5, "short", "ease-in", funcția () circle.fill = "# 45931e"; (););
Aici animăm poziția cercului și dimensiunea generală a cercului, aplicăm o anumită relaxare și, atunci când este terminată, executăm o funcție de apel invers care schimbă culoarea de umplere. Dar nu uitați să sunați redesenare ().
fadeIn (), fadeOut (), și fadeTo () Pentru a decolora un obiect înăuntru și în afară, am putea pur și simplu să sunăm:
square.fadeIn (); square.fadeOut ();
Pentru a atenua opacitatea la o valoare specifică, vom folosi fadeTo ():
square.fadeTo (.6);
Puteți defini, de asemenea, durata, relaxarea și furnizarea unei funcții de apel invers pentru aceste metode în același mod ca și cu anima() metodă.
oCanvas conține un modul de Scene foarte util care vă permite să separați cu ușurință aplicația dumneavoastră în diferite stări. Dezvoltatorii de jocuri ar putea aprecia acest lucru, deoarece este o abordare simplă pentru a vă descompune jocul în secțiuni diferite. Chiar și animatorii Flash de la școală veche ar putea asemăna modulul Scenes cu panoul Scene, care vă permite să creați literalmente scene diferite într-un proiect Flash.
Pentru a crea o scenă în oCanvas numim crea() metoda de returnare a scene obiect:
var intro = canvas.scenes.create ("intro", functie () // adauga obiecte afisate aici); În cadrul crea() metoda trece prin două argumente: numele scenei ca șir și o funcție în care adăugăm obiectul de afișare pe care dorim să-l adăugăm la acea scenă.
var introText = canvas.display.text (x: canvas.width / 2, y: canvas.height / 2, aliniați: "center", font: "bold 36px sans-serif" "# 133035"); var intro = canvas.scenes.create ("intro", funcția () this.add (introText);); Acum trebuie să încărcăm scena și aceste obiecte vor fi adăugate pe ecran:
canvas.scenes.load ( "intro");
Observați că trecem în numele pe care l-am dat scene când l-am creat.
Și, desigur, putem descărca o scenă în orice moment:
canvas.scenes.unload ( "intro");
Imaginați-vă cât de mult ar putea fi un economizor de timp dacă ați folosit scene și operatori de evenimente împreună.
Singurul dezavantaj real al lui oCanvas este că nu a câștigat atât de multă tracțiune în comunitatea de dezvoltare, așa cum ați putea ghici - sau cel puțin se pare că pentru moment. O parte din acest motiv pentru acest lucru, cred, se datorează popularității lui EaselJS. Se pare că există mult mai multe conștientizări și resurse mai mari decât cele pentru oCanvas, ceea ce este greu de crezut de când acesta a fost lansat pentru prima dată în martie 2011, dar din anumite motive a zburat sub radar.
Am folosit ambele biblioteci de ceva timp și pot spune sincer că sunt un mare fan al ambelor. EaselJS se simte cu siguranta mai mult ca si cum folosesti ActionScript si daca esti un dezvoltator Flash va fi usor de ridicat. Și, după cum am văzut, oCanvas putea să treacă de fratele lui JQuery pierdut în multe feluri. Deci, dacă sunteți un ActionScripter pur, ați putea gravita în mod natural spre EaselJS - mai ales că savaletul a fost scris special pentru a apela la dezvoltatorii Flash.
Cu toate acestea, am folosit Actionscript mult mai mult decât jQuery și eu personal găsesc oCanvas mai simplu de utilizat și mai puțin verbose de scris. Și chiar dacă EaselJS este destul de ușor de utilizat, sintaxa simplă din oCanvas doar o face un astfel de instrument de întâmpinare.
Dar, pe lângă o sintaxă mai simplă, oCanvas și EaselJS sunt în multe privințe destul de interschimbabile. Ambele biblioteci pot îndeplini mai mult sau mai puțin aceleași sarcini și există foarte puține diferențe în performanță, dacă există. Cu toate acestea, observ că funcția Ticker din programul EaselJS rulează puțin mai ușor decât oCanvas ' setLoop (deși aceasta ar putea fi doar o diferență bazată pe browser).
EaselJS are mult mai mult decât un API extins - mai ales când vine vorba de desen și efecte. Și dacă țineți cont de TweenJS și SoundJS, Easel este cu siguranță un instrument mai complet - mai ales dacă sunteți obișnuiți să utilizați o aplicație ca Flash care oferă un control fin asupra proiectelor dvs. Dar dacă sunteți nou în întregul joc HTML5, este posibil să loviți terenul cu oCanvas mult mai repede. Când am fost prima dată prezentată la oCanvas, mi sa părut atât de distractiv să joc. Totul este deja acolo pentru tine - toate metodele și evenimentele necesare pentru a începe să creați, manipulați și animați obiecte imediat.
Indiferent de biblioteca pe care o preferați, oCanvas și EaselJS sunt doar începutul a ceea ce cred că va fi un aflux de instrumente și resurse pentru a permite dezvoltatorilor să creeze cu ușurință aplicații bazate pe browser. Caracteristicile lui oCanvas detaliate în acest articol abia scarpină suprafața a ceea ce ar putea fi creat folosind această bibliotecă foarte puternică.
Cu toate acestea, nu este oCanvas (sau o altă bibliotecă pentru acest lucru) un motiv să nu învețe și să utilizeze API-ul HTML5 Canvas nativ. Dar dacă te afli într-o situație în care toți foștii tăi clienți Flash caută acum să-ți creezi aplicații HTML5 (ca și mine) și nu ai timp să înveți ceva asemănător matricei de transformare neprietenoase din API-ul Canvas nativ - oCanvas poate ușura cu ușurință curba de învățare.
