Programmering

JavaFX 2 Animation: Path Transitions

En av de prangende aspektene ved JavaFX 2 er animasjonsstøtten. Det innsiktsfulle Opprette overganger og tidslinjeanimering i JavaFX dekker bruk av både overganger og tidslinjer i JavaFX 2. I dette blogginnlegget tilpasser jeg et eksempel gitt i den veiledningen for å spesifikt demonstrere Path Transitions.

Eksempel 2 ("Path Transition") vist i Opprette overganger og tidslinjeanimering i JavaFX demonstrerer å lage en bane med klasser fra JavaFX 2 "former" -pakken: javafx.scene.shape.Path, javafx.scene.shape.MoveTo og javafx .scene.shape.CubicCurve. Det eksemplet viser deretter instantiering av en javafx.animation.PathTransition og bruk av en instantiated javafx.scene.shape.Rectangle for å bevege seg langs den opprettet banen.

I kodelisten min nedenfor har jeg gjort noen små endringer i eksempel 2 i Opprette overganger og tidslinjeanimering i JavaFX. Jeg har spesifikt endret den bevegelige formen fra et rektangel til en sirkel, lagt til to "endeknotter" til banen som to separate sirkler, og lagt til muligheten til å endre stevens opasitet sammen med de animerte sirkelbevegelsene. Den fine bivirkningen ved å bruke null opasitet er at selve banen ikke vises, og det ser ut som sirkelen beveger seg fritt. Jeg prøvde å dele hver hoveddel av dette opp i sin egen private metode for å gjøre det lettere å se "biter" av funksjonalitet.

JavaFxAnimations.java

pakke dustin. eksempler; importere java.util.List; importere javafx.animation.PathTransition; importere javafx.animation.Timeline; importere javafx.application.Application; importere javafx.scene.Group; importere javafx.scene.Scene; importere javafx.scene.paint.Color; importer javafx.scene.shape. *; importere javafx.stage.Stage; importere javafx.util.Duration; / ** * Enkelt eksempel som demonstrerer JavaFX-animasjoner. * * Litt tilpasset fra eksempel 2 ("Path Transition") som er gitt i * "Opprette overganger og tidslinjeanimasjon i JavaFX" * (//docs.oracle.com/javafx/2.0/animations/jfxpub-animations.htm). * * @forfatter Dustin * / offentlig klasse JavaFxAnimations utvider applikasjonen {/ ** * Generer sti som animasjonen vil forekomme på. * * @param pathOpacity Opacity of the path representation. * @return generert sti. * / privat sti generereCurvyPath (endelig dobbel stiOpacity) {endelig sti sti = ny sti (); path.getElements (). legg til (ny MoveTo (20,20)); path.getElements (). legg til (ny CubicCurveTo (380, 0, 380, 120, 200, 120)); path.getElements (). legg til (ny CubicCurveTo (0, 120, 0, 240, 380, 240)); path.setOpacity (pathOpacity); returvei; } / ** * Generer stiovergangen. * * @param form Form for å reise langs stien. * @param sti Sti å bli reist på. * @retur PathTransition. * / privat PathTransition genererer PathTransition (endelig form, endelig sti) {endelig PathTransition pathTransition = ny PathTransition (); pathTransition.setDuration (Duration.seconds (8.0)); pathTransition.setDelay (Duration.seconds (2.0)); pathTransition.setPath (sti); pathTransition.setNode (form); pathTransition.setOrientation (PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT); pathTransition.setCycleCount (Tidslinje.INDEFINITET); pathTransition.setAutoReverse (true); returveiOvergang; } / ** * Bestem stiens opasitet basert på kommandolinjeargumentet hvis det er angitt * eller null som standard hvis ingen numerisk verdi er oppgitt. * * @return Opacity å bruke for sti. * / privat dobbel determPathOpacity () {final Parameters params = getParameters (); endelige listeparametere = params.getRaw (); dobbel pathOpacity = 0,0; hvis (! parameters.isEmpty ()) {prøv {pathOpacity = Double.valueOf (parameters.get (0)); } fangst (NumberFormatException nfe) {pathOpacity = 0.0; }} return pathPacacity; } / ** * Bruk animasjon, emnet for denne klassen. * * @param group Group der animasjonen er brukt. * / private void applyAnimation (final Group group) {final Circle circle = new Circle (20, 20, 15); sirkel.setFill (Color.DARKRED); endelig sti bane = genererCurvyPath (determinerePathOpacity ()); group.getChildren (). legg til (sti); group.getChildren (). legg til (sirkel); group.getChildren (). legg til (ny sirkel (20, 20, 5)); group.getChildren (). legg til (ny sirkel (380, 240, 5)); endelig PathTransition overgang = generere PathTransition (sirkel, bane); transition.play (); } / ** * Start JavaFX-applikasjonen * * @param stage Primærfasen. * @throws Unntak Unntak kastet under applikasjonen. * / @ Overstyr offentlig ugyldig start (siste trinnet) kaster Unntak {endelig Gruppe rootGroup = ny gruppe (); endelig scenescene = ny scene (rootGroup, 600, 400, Color.GHOSTWHITE); scene.setScene (scene); stage.setTitle ("JavaFX 2 Animasjoner"); scene.show (); ApplyAnimation (rootGroup); } / ** * Hovedfunksjon for å kjøre JavaFX-applikasjonen. * * @param argumenter Kommandolinje argumenter; valgfritt første argument er * opasiteten til banen som skal vises (0 gjør banen * usynlig). * / public static void main (final String [] argumenter) {Application.launch (argumenter); }} 

Følgende serie med skjermbilder viser dette enkle JavaFX-animasjonseksemplet i aksjon. De er oppført i rekkefølge etter synkende opasitet (fra 1,0 til 0,0).

Demonstrasjon av tilpasset PathTransition Eksempel (Opacity 1.0)

Demonstrasjon av tilpasset PathTransition Eksempel (Opacity 0.2)

Demonstrasjon av tilpasset PathTransition Eksempel (Opacity 0,05)

Demonstrasjon av tilpasset PathTransition Eksempel (Opacity 0.0)

Hvert av de ovennevnte skjermbildene ble tatt etter å ha kjørt applikasjonen med det angitte kommandolinjeargumentet (1, 0,2, 0,05 og 0).

Dette tilpassede eksemplet har vist bruk PathTransition for å animere en nodes bevegelse langs den foreskrevne banen (jeg har blogget om bruk av Path og noen av dens alternativer før). Utviklere kan implementere sitt eget derivat av Transition, og det støttes også andre overføringer (som FadeTransition, ParallelTransition og SequentialTransition).

Det er en enkel prosess å raskt begynne å bruke JavaFX 2-animasjon ved hjelp av de medfølgende overgangsklassene.

Opprinnelig innlegg tilgjengelig på //marxsoftware.blogspot.com/ (Inspirert av faktiske hendelser)

Denne historien, "JavaFX 2 Animation: Path Transitions" ble opprinnelig utgitt av JavaWorld.

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