Programmēšana

Animācija Java sīklietotnēs

Šajā rakstā ir aprakstīts, kā ieviest animāciju, izmantojot Java sīklietotņu API. Tajā aprakstītas parasti lietotās metodes un sniegts vienkāršs piemērs, lai ilustrētu katru paņēmienu.

Animācijas pamattehnika

Java valodā ir iespējami daudzi animācijas veidi. Viņiem visiem kopīgs ir tas, ka tie rada kaut kādu kustību uz ekrāna, zīmējot secīgus kadrus ar samērā lielu ātrumu (parasti apmēram 10-20 reizes sekundē).

Mēs sāksim izveidot vienkāršu veidnes sīklietotni animāciju veikšanai un lēnām to izstrādāt, līdz nonāksim līdz diezgan pilnam sīklietotnei.

Izmantojot pavedienu

Lai ekrānu atjauninātu vairākas reizes sekundē, jāizveido jauns Java pavediens, kurā ir animācijas cilpa. Animācijas cilpa ir atbildīga par pašreizējā kadra izsekošanu un periodisku ekrāna atjauninājumu pieprasīšanu. Lai ieviestu pavedienu, jums vai nu jāizveido apakšklase Vītne vai ievērot Skrienams interfeiss.

Bieža kļūda ir animācijas cilpa ievietošana krāsot () sīklietotnes metode. Šādi rīkojoties, būs dīvainas blakusparādības, jo tas aiztur galveno AWT pavedienu, kas ir atbildīgs par visu zīmēšanu un notikumu apstrādi.

Kā piemēru es esmu uzrakstījis nelielu veidnes sīklietotni ar nosaukumu Example1Applet, kas ilustrē animācijas sīklietotnes vispārīgo izklāstu. Piemērs1Applet parāda, kā izveidot pavedienu un izsaukt pārkrāsot () metodi fiksētos intervālos. Kadru skaits sekundē tiek noteikts, ievadot sīklietotnes parametru. Šeit ir piemērs tam, ko jūs ievietojat savā HTML dokumentā:

Šeit ir piemērs1Applet.

Piezīme:

Šis sīklietotne vēl faktiski neko nezīmē uz ekrāna. Zīmēšana uz ekrāna ir paskaidrota vēlāk. Ņemiet vērā arī to, ka sīklietotne iznīcina animācijas pavedienu ikreiz, kad lietotājs pamet lapu (kā rezultātā tiek sīklietotne apstāties () metode). Tas nodrošina, ka sīklietotne netērēs CPU laiku, kamēr tā lapa nav redzama.

Uzturot nemainīgu kadru ātrumu

Iepriekš minētajā piemērā sīklietotne vienkārši guļ noteiktu laiku starp kadriem. Tam ir trūkums, ka jūs dažreiz gaidāt pārāk ilgi. Lai iegūtu 10 kadrus sekundē, nevajadzētu gaidīt 100 milisekundes starp kadriem, jo ​​jūs zaudējat laiku, vienkārši palaižot pavedienu.

Šis sīklietotne Example2Applet parāda, kā saglabāt labāku laiku. Tas vienkārši aprēķina pareizo kavēšanos starp kadriem, sekojot sākuma laikam. Tas aprēķina aplēsto nepieciešamo kavēšanos starp kadriem, pamatojoties uz pašreizējo laiku.

Šeit ir piemērs2Applet.

Katra rāmja krāsošana

Atliek krāsot katru rāmi. Iepriekšējos piemēros mēs zvanām pārkrāsot () katram rāmim, kas izraisa sīklietotnes krāsot () metodi. Piemēram3Applet ir a krāsot () metode, kas piesaista pašreizējā kadra numuru ekrānā.

Darbībā ir piemērs3Applet, kam seko kodu saraksts.

Piezīme:

Ja jūs norādāt, ka kadru ātrums ir ļoti augsts (teiksim, 100 kadri sekundē), palaist () metode piezvanīs pārkrāsot () 100 reizes sekundē. Tomēr tas ne vienmēr izraisīs 100 zvanu uz krāsot () sekundē, jo, pārāk ātri pārkrāsojot pieprasījumu, tie tiks sakļauti vienā ekrāna atjauninājumā. Tāpēc mēs sekojam pašreizējam kadra numuram palaist () metode drīzāk krāsot () metodi.

Ģenerē grafiku

Tagad animēsim kaut ko tādu, ko ir mazliet grūtāk uzzīmēt. Piemērs4Applet uzzīmē sinusa viļņu kombināciju. Katrai x koordinātai tas velk īsu vertikālu līniju. Visas šīs līnijas kopā veido vienkāršu diagrammu, kas mainās katram kadram. Diemžēl jūs atradīsit, ka šī pieeja izraisa daudz mirgošanas. Mirgošanas cēloni un dažus līdzekļus mēs paskaidrosim nākamajā sadaļā.

Darbībā ir piemērs4Applet, kam seko kodu saraksts.

Izvairieties no pārmērīgas mirgošanas

Mirgošanai, ko redzat piemērā 4Applet, ir divi iemesli: katra rāmja krāsošana aizņem pārāk ilgu laiku (pārkrāsošanas laikā nepieciešamā aprēķina apjoma dēļ), un viss fons tiek notīrīts pirms krāsot () tiek saukts. Kamēr notiek nākamā kadra aprēķins, lietotājs redz animācijas fonu.

Šis īsais laiks starp fona attīrīšanu un sinusa viļņa krāsošanu tiek uzskatīts par zibspuldzi. Dažās platformās, piemēram, datorā, mirgošana ir acīmredzamāka nekā X operētājsistēmā. Iemesls ir tāds, ka X Windows grafika ir buferēta, kas padara zibspuldzi nedaudz īsāku.

Jūs varat ievērojami samazināt mirgošanu, izmantojot divus vienkāršus trikus: Atjaunināt() metodi un izmantojot dubulto buferizāciju (dažreiz to sauc arī par izmantojot backbuffer).

Atjaunināšanas () metodes ignorēšana

Kad AWT saņem sīklietotnes pārkrāsošanas pieprasījumu, tas izsauc sīklietotnes Atjaunināt() metodi. Pēc noklusējuma Atjaunināt() metode notīra sīklietotnes fonu un pēc tam izsauc krāsot () metodi. Pārvarot Atjaunināt() metode, lai iekļautu zīmēšanas kodu, kas agrāk bija krāsot () metodi, mēs izvairāmies no tā, ka apleta visa platība tiek notīrīta ar katru pārkrāsošanu.

Tagad, kad fons vairs netiek automātiski iztīrīts, mums tas jādara pašiem Atjaunināt() metodi. Tagad mēs varam izdzēst katru grafika vertikālo līniju atsevišķi, pirms uzzīmējat jaunu līniju, pilnībā novēršot mirgošanu. Šis efekts ir parādīts piemērā 5Applet.

Darbībā ir piemērs5Applet, kam seko kodu saraksts.

Piezīme:

Ikreiz, kad jūs ignorējat Atjaunināt() metode, jums joprojām ir jāievieš krāsot (). Tas ir tāpēc, ka krāsot () metodi AWT zīmēšanas sistēma izsauc tieši ikreiz, kad sīklietotnes zīmēšanas apgabalā rodas "bojājumi", piemēram, kad no ekrāna tiek noņemts logs, kas aizsedz daļu sīklietojuma zīmēšanas laukuma. Jūsu krāsot () ieviešana var vienkārši piezvanīt Atjaunināt().

Dubultā buferizācija

Vēl viens veids, kā samazināt mirgošanu starp kadriem, ir dubultās buferizācijas izmantošana. Šo tehniku ​​izmanto daudzos animācijas sīklietotnēs.

Vispārējais princips ir tāds, ka jūs izveidojat attēlu ārpus ekrāna, zīmējat attēlā rāmi un pēc tam visu attēlu uz ekrāna ar vienu zvanu drawImage (). Priekšrocība ir tā, ka lielāko daļu zīmēšanas veic ārpus ekrāna. Ekrāna attēla galīgā krāsošana uz ekrāna parasti ir daudz efektīvāka nekā rāmja apgleznošana tieši uz ekrāna.

Sinusa viļņu sīklietotne ar dubulto buferizāciju ir parādīta piemērā6Applet. Jūs redzēsiet, ka animācija ir diezgan gluda, un, kad zīmējat rāmi, jums nav nepieciešami īpaši triki. Vienīgais trūkums ir tas, ka jums jāpiešķir ekrānā redzams attēls, kas ir tikpat liels kā zīmēšanas laukums. Ja zīmēšanas laukums ir ļoti liels, tas var prasīt diezgan daudz atmiņas.

Šeit ir piemērs6Applet darbībā, kam seko kodu saraksts.

Piezīme:

Ja izmantojat dubulto buferizāciju, jums ir jāatspējo Atjaunināt() metodi, jo pirms rāmja krāsošanas nevēlaties, lai sīklietotnes fons tiktu notīrīts. (Jūs pats notīriet fonu, pievēršoties ārpus ekrāna redzamajam attēlam.)

Attēlu izmantošana

Tagad mēs pārrakstīsim paintFrame () metode ar metodi, kas animē dažus attēlus. Tas problēmai pievieno dažas nelielas komplikācijas. Attēli ir diezgan lieli, un tie tiek ielādēti pakāpeniski. Var paiet ilgs laiks, līdz attēli tiek pilnībā uzzīmēti, īpaši, ja tos ielādējat, izmantojot lēnu savienojumu. Tas ir iemesls, kāpēc drawImage () metode prasa ceturto argumentu, objektu ImageObserver. Attēlu novērotājs ir objekts, par kuru tiek paziņots, kad ir ieradies vairāk attēla datu. Lai iegūtu attēlus, kurus mēs izmantojam getImage () metodi.

Attēla pārvietošana pa ekrānu

Šajā pirmajā attēlu animējošajā sīklietotnē Example7Applet tiek izmantoti šādi divi attēli:

world.gif: car.gif:

Pasaules fons tiek izmantots kā fons, un divas reizes tam virsū tiek uzzīmēts automašīnas attēls, izveidojot divu automašīnu animāciju, kas sacenšas visā pasaulē.

Darbībā ir piemērs7Applet, kam seko kodu saraksts.

Attēlu secības parādīšana

Piemērs8Applet parāda, kā izveidot animāciju, izmantojot atsevišķus attēlus katram kadram. Šeit ir 10 izmantotie kadri:

T1.gif: T2.gif: T3.gif: T4.gif: T5.gif:

T6.gif:

T7.gif:

T8.gif:

T9.gif:

T10.gif:

Mēs joprojām izmantojam dubulto buferizāciju, lai novērstu mirgošanu. Iemesls ir tāds, ka katrs attēls, kuru mēs veidojam, ir daļēji caurspīdīgs, un tāpēc mums ir jāizdzēš katrs kadrs pirms nākamā zīmēšanas. Tas izraisītu mirgošanu bez dubultas buferizācijas.

Darbībā ir piemērs8Applet, kam seko kodu saraksts.

Piezīme:

Rādot attēlu secības, jums jābūt uzmanīgiem, lai pareizi izlīdzinātu attēlus. Vieglākais veids ir pārliecināties, vai visi attēli ir vienāda lieluma un tos var uzzīmēt vienā un tajā pašā vietā. Ja tas tā nav, jūsu sīklietotnei būs jāzīmē katrs rāmis ar citu nobīdi.

MediaTracker izmantošana, lai izvairītos no pakāpeniskas attēlošanas

Kad Java programma ielādē attēlu, tā var parādīt attēlu, pirms attēls ir pilnībā ielādēts. Lietotājs redz, ka attēls tiek atveidots vispirms nepilnīgi un pēc tam pakāpeniski arvien pilnīgāk, kad attēls tiek ielādēts. Šis pieaugošais displejs sniedz lietotājam atsauksmes (uzlabo uztverto veiktspēju) un ļauj programmai viegli veikt citus uzdevumus, kamēr attēls tiek ielādēts.

Ja runa ir par animāciju, fona attēliem var būt noderīga pakāpeniska attēla parādīšana, taču tā var būt ļoti traucējoša, ja to izmanto animētajiem attēliem. Tāpēc dažreiz ir vēlams pirms tās parādīšanas pagaidīt, līdz visa animācija ir ielādēta.

Jūs varat izmantot Jim Graham's MediaTracker klasē, lai izsekotu attēlu lejupielādi, aizkavējot animācijas rādīšanu, līdz viss attēlu kopums ir pilnībā lejupielādēts. Piemērs9Applet parāda, kā izmantot MediaTracker klasē, lai lejupielādētu attēlus vicinošajai hercoga animācijai.

Šeit ir piemērs9Applet darbībā, kam seko kodu saraksts.

Pievienojot skaņu

Animācijai ir viegli pievienot skaņu. Jūs varat izmantot getAudioClip () metodi, lai iegūtu objektu AudioClip. Vēlāk klipu var atskaņot vai nu kā nepārtrauktu cilpu, vai kā atsevišķu skaņu. Piemērs10Applet parāda, kā animācijas laikā atskaņot nepārtrauktu fona skaņu, kā arī atkārtotu skaņu.

Šeit ir piemērs10Applet darbībā, kam seko kodu saraksts.

Piezīme:

Atskaņojot nepārtrauktu skaņu, jums jāatceras to pārtraukt, kad lietotājs pamet lapu (t.i., dariet to savā sīklietotnē apstāties () metode).

Vēl viena piezīme:

Nepārtraukta audio var būt ļoti kaitinoša. Ieteicams lietotājam nodrošināt iespēju izslēgt audio, neatstājot lapu. Varat nodrošināt pogu vai vienkārši izslēgt audio, kad lietotājs noklikšķina uz sīklietotnes.

Padomi, kā ātrāk ielādēt attēlus

Animācijas, kas izmanto daudzus attēlus, lejupielāde prasīs daudz laika. Tas galvenokārt ir saistīts ar faktu, ka katram attēla failam tiek izveidots jauns HTTP savienojums, un savienojuma izveide var ilgt vairākas sekundes pat tad, ja ir pietiekami daudz joslas platuma.

Šajā sadaļā mēs jums pastāstīsim par diviem attēlu formātiem, kurus jūsu sīklietotne var izmantot, lai ātrāk lejupielādētu attēlus.

Attēla sloksnes izmantošana

Lejupielādes veiktspēju var uzlabot, izmantojot vienu attēlu, kurā ir vairāki animācijas rāmji. Izmantojot attēlu, var attēlot vienu kadru no attēla clipRect () operators. Zemāk ir attēlu sloksnes piemērs, kas tiek izmantots UnderConstruction sīklietotnē.

Aplets rada urbšanas efektu, neizdzēšot iepriekšējos kadrus. Fons tiek notīrīts tikai tik bieži.

Šeit darbojas UnderConstruction ar saiti uz tā pirmkodu.

Starp kadru saspiešana, izmantojot Flic

Ja jūs patiešām vēlaties uzlabot animācijas, kas sastāv no vairākiem kadriem, lejupielādes veiktspēju, jums jāizmanto kaut kāda veida kadru saspiešana.

Animācijas rīki

Šajā brīdī (1996. gada janvāris) ir pieejami daži rīki, kas palīdzēs jums izveidot Java darbināmas animācijas. Labākais rīks, ko es varētu atrast, ir DimensionX's The Easy Animator (TEA) (iepriekš pazīstams kā JAM). Tas ļauj interaktīvi veidot animācijas. Mēs vēlamies mudināt izstrādātājus uzrakstīt vairāk rīku animāciju izveidei Java.

Ja jums ir daži gatavi attēli, kurus parādīt, varat izmantot Animator sīklietotni. Animatorā ir daudz parametru, kas ļauj norādīt nepārtrauktas skaņas, kadram raksturīgas skaņas, atsevišķu kadru laiku un pozīcijas, starta attēlu, kadru secību utt.

Jums vajadzētu arī apskatīt Gamelan Animation lapu, lai atrastu daudz sīklietu, kas izmanto animāciju.

Secinājums

Es ceru, ka šis raksts palīdzēs sīklietotņu izstrādātājiem rakstīt vairāk un labākus animācijas sīklietotnes. Es arī ceru, ka drīz būs pieejami labāki rīki.

Artūrs van Hofs vēl nesen bija vecākais inženieris uzņēmumā Sun Microsystems un kopš 1993. gada bija iesaistīts Java valodas izstrādē. Viņš ir pirmā Java kompilatora autors, kas pilnībā rakstīts Java valodā. Nesen viņš pameta Sun, lai kopā ar Sami Šaio, Kimu Polese un Džonatanu Peinu izveidotu jaunu uzņēmumu. Jaunais uzņēmums koncentrēsies uz Java lietojumprogrammu veidošanu. Kathy Walrath ir Sun Microsystems tehniskais autors. Viņa ir daļa no Java komandas kopš 1993. gada. Pašlaik viņa strādā ar Mēriju Kampioni pie Java Tutorial: Object-Oriented Programming for Internet, Applet-uzlabota apmācība Java valodas apguvei, sīklietu programmēšana un Java GUI programmēšana . Papildus tam, ka Java apmācība ir pieejama tiešsaistē, tā šovasar tiks publicēta arī kā Addison-Wesley Java sērijas sastāvdaļa.

Šo stāstu "Animācija Java sīklietotnēs" sākotnēji publicēja JavaWorld.

$config[zx-auto] not found$config[zx-overlay] not found