Tässä artikkelissa kuvataan animaation toteuttaminen Java-sovelman sovellusliittymän avulla. Siinä kuvataan yleisesti käytettyjä tekniikoita ja annetaan yksinkertainen esimerkki kunkin tekniikan havainnollistamiseksi.
Animaation perustekniikat
Java-muodossa voi olla monia animaatioita. Niillä kaikilla on yhteistä se, että ne luovat jonkinlaista liikettä näytölle piirtämällä peräkkäisiä kehyksiä suhteellisen suurella nopeudella (yleensä noin 10-20 kertaa sekunnissa).
Aloitamme luomalla yksinkertaisen mallisovelluksen animaatioiden tekemiseen ja kehittämällä sitä hitaasti, kunnes saavutamme melko täydellisen sovelman.
Langan avulla
Jos haluat päivittää näytön useita kertoja sekunnissa, sinun on luotava uusi Java-ketju, joka sisältää animaatiosilmukan. Animaatiosilmukka on vastuussa nykyisen kehyksen seurannasta ja säännöllisten näytön päivitysten pyytämisestä. Jos haluat ottaa ketjun käyttöön, sinun on joko luotava alaluokka Lanka tai noudattaa Ajettava käyttöliittymä.
Yleinen virhe on laittaa animaatio silmukka maali() sovelman menetelmä. Näin tekemällä on outoja sivuvaikutuksia, koska se kestää AWT-pääkierteen, joka on vastuussa kaikista piirustuksista ja tapahtumien käsittelystä.
Olen kirjoittanut esimerkkinä pienen mallisovelluksen, nimeltään Example1Applet, joka kuvaa animaatio-sovelman yleistä luonnosta. Esimerkki 1 Applet näyttää kuinka ketju luodaan ja soitetaan maalata uudelleen () menetelmä kiintein väliajoin. Kehysten määrä sekunnissa määritetään välittämällä sovelmaparametri. Tässä on esimerkki siitä, mitä asetat HTML-dokumenttiisi:
Tässä on esimerkki1Applet.
merkintä:
Tämä sovelma ei itse asiassa piirrä mitään näytölle. Näytölle piirtäminen selitetään myöhemmin. Huomaa myös, että sovelma tuhoaa animaatioketjun aina, kun käyttäjä poistuu sivulta (mikä johtaa sovelmiin lopettaa() menetelmää kutsutaan). Tämä varmistaa, että sovelma ei tuhlaa suorittimen aikaa, kun sen sivu ei ole näkyvissä.
Pidä vakio kuvataajuus
Yllä olevassa esimerkissä sovelma yksinkertaisesti nukkuu kiinteän ajan kehysten välillä. Tässä on haittapuoli, että joskus odotat liian kauan. Saadaksesi 10 kuvaa sekunnissa, sinun ei pitäisi odottaa 100 millisekuntia kehysten välillä, koska menetät jonkin aikaa vain säikeen ajamisesta.
Seuraava sovelma, esimerkki2Applet, näyttää, kuinka pidetään parempaa aikaa. Se yksinkertaisesti laskee oikean viiveen kehysten välillä seuraamalla alkamisaikaa. Se laskee arvioidun vaaditun viiveen kehysten välillä nykyisen ajan perusteella.
Tässä on esimerkki2Applet.
Jokaisen kehyksen maalaus
Jäljellä on maalata kukin kehys. Edellisissä esimerkeissä kutsumme maalata uudelleen () jokaiselle kehykselle, mikä aiheuttaa sovelmien maali() menetelmä kutsutaan. Esimerkissä 3Applet on a maali() menetelmä, joka vetää nykyisen kehyksen numeron näytölle.
Tässä on esimerkki 3Applet toiminnassa, jota seuraa koodiluettelo.
merkintä:
Jos määrität kuvataajuuden erittäin suureksi (sanotaan 100 kuvaa sekunnissa), juosta() menetelmä kutsuu maalata uudelleen () 100 kertaa sekunnissa. Tämä ei kuitenkaan aina johda 100 puheluun maali() sekunnissa, koska kun annat uudelleenmaalauspyynnön liian nopeasti, ne tiivistetään yhden näytön päivitykseen. Siksi pidämme kirjaa nykyisestä kehysnumerosta juosta() menetelmä pikemminkin kuin maali() menetelmä.
Luodaan grafiikkaa
Animoidaan nyt jotain, jota on vähän vaikeampi piirtää. Esimerkki 4Applet piirtää siniaaltojen yhdistelmän. Jokaiselle x-koordinaatille se piirtää lyhyen pystyviivan. Kaikki nämä viivat muodostavat yksinkertaisen kaavion, joka muuttuu jokaiselle kehykselle. Valitettavasti huomaat, että tämä lähestymistapa aiheuttaa paljon vilkkumista. Selitämme vilkkumisen syyn ja joitain korjaustoimenpiteitä seuraavassa osassa.
Tässä on esimerkissä 4Applet toiminnassa, jota seuraa koodiluettelo.
Vältä liiallista vilkkumista
Esimerkissä 4Applet näkyvällä vilkkumisella on kaksi syytä: jokaisen kehyksen maalaaminen vie liian kauan (uudelleenmaalauksen aikana tarvittavan laskentamäärän vuoksi) ja koko tausta tyhjennetään ennen maali() kutsutaan. Kun seuraavan kehyksen laskenta on käynnissä, käyttäjä näkee animaation taustan.
Tämä lyhyt aika taustan kirkastumisen ja siniaallon maalaamisen välillä nähdään salamana. Joillakin alustoilla, kuten PC, vilkkuminen on ilmeisempää kuin X-Windowsissa. Syynä on se, että X Windows -grafiikka on puskuroitu, mikä tekee salamasta hieman lyhyemmän.
Voit vähentää vilkkumista huomattavasti käyttämällä kahta yksinkertaista temppua: päivittää() - menetelmä ja kaksoispuskurointi (joskus tunnetaan nimellä käyttämällä takapuskuria).
Update () -menetelmän ohittaminen
Kun AWT vastaanottaa appletin uudelleenmaalauspyynnön, se kutsuu sovelmia päivittää() menetelmä. Oletuksena päivittää() method tyhjentää sovelman taustan ja kutsuu sitten maali() menetelmä. Ohittamalla päivittää() menetelmä sisällyttää piirustuskoodi, joka oli aiemmin maali() Menetelmällä vältetään appletin koko alueen tyhjentäminen jokaisen uudelleenmaalauksen yhteydessä.
Nyt kun taustaa ei enää poisteta automaattisesti, meidän on tehtävä se itse päivittää() menetelmä. Voimme nyt poistaa graafin jokaisen pystysuoran viivan erikseen ennen uuden viivan piirtämistä ja poistaa vilkkumisen kokonaan. Tämä vaikutus näkyy esimerkissä 5Applet.
Tässä on esimerkki 5Applet toiminnassa, jota seuraa koodiluettelo.
merkintä:
Aina kun ohitat päivittää() menetelmä, sinun on vielä toteutettava maali(). Tämä johtuu siitä maali() AWT-piirustusjärjestelmä kutsuu menetelmää suoraan aina, kun appletin piirustusalueelle tulee "vaurioita" - esimerkiksi kun ikkuna, joka peittää osan sovelman piirustusalueesta, poistetaan näytöltä. Sinun maali() toteutus voi yksinkertaisesti soittaa päivittää().
Kaksinkertainen puskurointi
Toinen tapa vähentää kehysten välistä vilkkumista on käyttää kaksoispuskuria. Tätä tekniikkaa käytetään monissa animaatio-sovelmissa.
Yleisenä periaatteena on, että luot näytön ulkopuolisen kuvan, piirrät kuvaan kehyksen ja lyö koko kuvan näytölle yhdellä puhelulla drawImage (). Etuna on, että suurin osa piirroksista tehdään näytön ulkopuolella. Näytön ulkopuolisen kuvan lopullinen maalaus ruudulle on yleensä paljon tehokkaampaa kuin kehyksen maalaus suoraan näytölle.
Kaksoispuskuroitu siniaalto-sovelma on esitetty esimerkissä 6Applet. Näet, että animaatio on melko sileä eikä sinun tarvitse erityisiä temppuja kehystä piirtäessäsi. Ainoa haittapuoli on, että sinun on osoitettava näytön ulkopuolinen kuva, joka on yhtä suuri kuin piirustusalue. Jos piirustusalue on erittäin suuri, se voi vaatia melko paljon muistia.
Tässä on esimerkissä 6Applet toiminnassa, jota seuraa koodiluettelo.
merkintä:
Kun käytät kaksoispuskurointia, sinun on ohitettava päivittää() menetelmä, koska et halua, että sovelman tausta tyhjennetään ennen kehyksen maalaamista. (Tyhjennät taustan itse vetämällä näytön ulkopuoliseen kuvaan.)
Kuvien käyttö
Nyt kirjoitamme paintFrame () menetelmä menetelmällä, joka animoi joitain kuvia. Tämä lisää ongelmaan pieniä komplikaatioita. Kuvat ovat melko suuria ja ne ladataan asteittain. Kuvien täydellisestä piirtämisestä voi kulua kauan, varsinkin kun lataat niitä hitaalla yhteydellä. Tämä on syy miksi drawImage () menetelmä ottaa neljännen argumentin, ImageObserver-objektin. Kuvan tarkkailija on objekti, josta ilmoitetaan, kun enemmän kuvatietoja on saapunut. Saadaksesi kuvia käytämme getImage () menetelmä.
Kuvan siirtäminen ruudun poikki
Tämä ensimmäinen kuvaa animoiva sovelma, esimerkki7Applet, käyttää seuraavia kahta kuvaa:
world.gif: car.gif:
Maailmankuvaa käytetään taustana, ja auton kuva piirretään sen päälle kahdesti, mikä luo animaation kahdesta autosta, jotka kilpailevat ympäri maailmaa.
Tässä on esimerkissä 7Applet toiminnassa, jota seuraa koodiluettelo.
Kuvasarjan näyttäminen
Esimerkki 8Applet näyttää kuinka animaatio luodaan käyttämällä erillisiä kuvia kullekin kehykselle. Tässä on 10 käytössä olevaa kehystä:
T1.gif: T2.gif: T3.gif: T4.gif: T5.gif:
T6.gif:
T7.gif:
T8.gif:
T9.gif:
T10.gif:
Käytämme edelleen kaksoispuskuria vilkkumisen poistamiseksi. Syynä on se, että jokainen tekemämme kuva on osittain läpinäkyvä, ja siksi meidän on poistettava kukin kehys ennen seuraavan piirtämistä. Tämä aiheuttaisi vilkkumisen ilman kaksinkertaista puskurointia.
Tässä on esimerkki8Applet toiminnassa, jota seuraa koodiluettelo.
merkintä:
Kun näytät kuvasarjoja, sinun on oltava varovainen kohdistamalla kuvat oikein. Helpoin tapa on varmistaa, että kuvat ovat kaikki samankokoisia ja että ne voidaan piirtää samaan paikkaan. Jos näin ei ole, sovelman on piirrettävä kukin kehys eri siirtymällä.
MediaTracker-sovelluksen käyttö inkrementaalisen näytön välttämiseksi
Kun Java-ohjelma lataa kuvan, se voi näyttää kuvan ennen kuvan lataamista kokonaan. Käyttäjä näkee kuvan renderoinnin ensin epätäydellisenä ja sen jälkeen vähitellen yhä täydellisemmäksi kuvan lataamisen aikana. Tämä inkrementtinäyttö antaa käyttäjälle palautetta (parantaa havaittua suorituskykyä) ja antaa ohjelman suorittaa helposti muita tehtäviä kuvan lataamisen aikana.
Animaation osalta inkrementaalinen kuvanäyttö voi olla hyödyllinen taustakuville, mutta se voi olla hyvin häiritsevä, kun sitä käytetään animoituihin kuviin. Siksi on joskus toivottavaa odottaa, kunnes koko animaatio ladataan, ennen kuin se näytetään.
Voit käyttää Jim Graham'sia MediaTracker luokka seuraamaan kuvien lataamista viivästyttämällä animaationäyttöä, kunnes koko kuvajoukko on ladattu kokonaan. Esimerkki 9Applet näyttää kuinka MediaTracker luokassa ladata kuvia heiluttavalle Duke-animaatiolle.
Tässä on esimerkki 9Applet toiminnassa, jota seuraa koodiluettelo.
Äänen lisääminen
Ääni on helppo lisätä animaatioon. Voit käyttää getAudioClip () menetelmä saada AudioClip-objekti. Myöhemmin voit toistaa leikkeen joko jatkuvana silmukkana tai yhtenä äänenä. Esimerkki 10Applet näyttää, kuinka jatkuva taustaääni ja toistuva ääni toistetaan animaation aikana.
Tässä on esimerkki10Applet toiminnassa, jota seuraa koodiluettelo.
merkintä:
Toistaessasi jatkuvaa ääntä, muista muistaa lopettaa se, kun käyttäjä poistuu sivulta (so. Tee se sovelmissasi) lopettaa() menetelmä).
Toinen huomautus:
Jatkuva ääni voi olla erittäin ärsyttävää. On hyvä tarjota käyttäjälle tapa sammuttaa ääni poistumatta sivulta. Voit antaa painikkeen tai yksinkertaisesti sammuttaa äänen, kun käyttäjä napsauttaa applettia.
Vinkkejä kuvien lataamiseen nopeammin
Monia kuvia käyttävän animaation lataaminen kestää kauan. Tämä johtuu pääasiassa siitä, että jokaiselle kuvatiedostolle tehdään uusi HTTP-yhteys, ja yhteyden muodostaminen voi viedä useita sekunteja, vaikka kaistanleveyttä on paljon.
Tässä osiossa kerromme kahdesta kuvamuodosta, joita sovelmasi voi käyttää kuvien lataamisen nopeuttamiseen.
Kuvanauhan käyttäminen
Voit parantaa lataamisen suorituskykyä käyttämällä yhtä kuvaa, joka sisältää useita animaatiokehyksiä. Voit tehdä yhdestä kehyksestä kuvan käyttämällä clipRect () operaattori. Alla on esimerkki kuvanauhasta, jota käytetään UnderConstruction-sovelmassa.
Appletti luo porausvaikutuksen poistamatta edellisiä kehyksiä. Tausta poistuu vain niin usein.
Tässä UnderConstruction on toiminnassa ja linkki lähdekoodiinsa.
Kehysten välinen pakkaus Flicillä
Jos haluat todella parantaa useista kehyksistä koostuvan animaation lataustehoa, sinun on käytettävä jonkinlainen kehysten välinen pakkaus.
Animaatiotyökalut
Tällä hetkellä (tammikuu 1996) on käytettävissä vain vähän työkaluja Java-pohjaisten animaatioiden luomiseen. Paras työkalu, jonka löysin, on DimensionX: n The Easy Animator (TEA) (aiemmin tunnettu nimellä JAM). Sen avulla voit luoda animaatioita vuorovaikutteisesti. Haluamme kannustaa kehittäjiä kirjoittamaan lisää työkaluja animaatioiden luomiseen Java-sovelluksessa.
Jos sinulla on muutama valmis kuva näytettäväksi, voit käyttää Animator-sovelmaa. Animaattorissa on monia parametreja, joiden avulla voit määrittää jatkuvia ääniä, kehyskohtaisia ääniä, yksittäisen kehyksen ajoituksen ja sijainnin, aloituskuvan, kehysten järjestyksen ja niin edelleen.
Sinun tulisi myös tarkistaa Gamelan-animaatio -sivu löytääksesi monia animaatioita käyttäviä sovelmia.
Johtopäätös
Toivon, että tämä artikkeli auttaa sovelmakehittäjiä kirjoittamaan enemmän ja parempia animaatio-sovelmia. Toivon myös, että parempia työkaluja tulee pian saataville.
Arthur van Hoff oli viime aikoihin saakka vanhempi insinööri Sun Microsystemsissä ja on ollut mukana Java-kielen kehittämisessä vuodesta 1993. Hän on ensimmäisen Java-kääntäjän kirjoittaja, joka on kirjoitettu kokonaan Java-kielellä. Hän lähti äskettäin Sunista perustamaan uuden yrityksen yhdessä Sami Shaion, Kim Polesen ja Jonathan Paynen kanssa. Uusi yritys keskittyy Java-sovellusten rakentamiseen. Kathy Walrath on Sun Microsystemsin tekninen kirjoittaja. Hän on ollut osa Java-tiimiä vuodesta 1993. Tällä hetkellä hän työskentelee Mary Campionen kanssa The Java Tutorial: Object-Oriented Programming for Internet, applet-parannettu opetusohjelma Java-kielen oppimiseen, applet-ohjelmointi ja Java GUI -ohjelmointi . Sen lisäksi, että Java-opetusohjelma on saatavilla verkossa, se julkaistaan myös tänä kesänä osana Addison-Wesley Java -sarjaa.Tämän tarinan "Animaatio Java-sovelmissa" julkaisi alun perin JavaWorld.
