« memefx: A Set of Rich - Freely Evolving - JavaFX Components | Main | Drop the Checkered Flag: Solution to JavaFX Puzzler #2 »

March 31, 2009

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00e54f133d69883401156f9e5448970b

Listed below are links to weblogs that reference JavaFX with Passion! Puzzler #2: Animation:

Comments

adame_30

sorry, but i have to change the speed of this car wihle it ´s runing on the AnimationPath ??
can u help me please

Larry Dickson

/*
* Main.fx
*
* Created on 31-Mar-2009, 5:08:18 PM
*/

package pathtransition;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.ArcTo;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.animation.transition.AnimationPath;
import javafx.animation.transition.OrientationType;
import javafx.animation.transition.PathTransition;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;

/**
* @author larry
*/

def sceneWidth = 600;
def sceneHeight = sceneWidth;
def radius = sceneWidth * .25;
def duration = 10s;

def path8 = Path {
elements: [
MoveTo {
x: sceneWidth / 2,
y: sceneHeight / 2
}
ArcTo {
x: sceneWidth / 6,
y: sceneWidth / 9,
radiusX: radius
radiusY: radius
}
ArcTo {
x: sceneWidth / 2,
y: sceneHeight / 2
radiusX: radius
radiusY: radius
}
ArcTo {
x: sceneWidth - sceneWidth / 6
y: sceneHeight - sceneHeight / 9
radiusX: radius
radiusY: radius
sweepFlag: true

}
ArcTo {
x: sceneWidth / 2
y: sceneHeight / 2
radiusX: radius
radiusY: radius
sweepFlag: true
}
]
}

var goStop:
Boolean=false on replace{
if (goStop) {
pathTransition.play();
} else {
pathTransition.pause();
}
}

def car: Ellipse=Ellipse {
centerX: sceneWidth / 2
centerY: sceneWidth / 2
radiusX: 20
radiusY: 10
fill: Color.BLUE
onMouseClicked: function( e: MouseEvent ):Void {
goStop=(goStop == false);
}

}

def pathTransition = PathTransition {
duration: duration;
node: car
path: AnimationPath.createFromPath(path8)
orientation: OrientationType.ORTHOGONAL_TO_TANGENT
repeatCount: Timeline.INDEFINITE
interpolate: Interpolator.LINEAR
autoReverse: false
}

Stage {
title: "PathTransition Puzzler"
scene: Scene {
width: sceneWidth
height: sceneHeight
content: [path8,car]
}
}

Marc Brideau

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.*;
import javafx.scene.paint.Color;
import javafx.scene.*;
import javafx.scene.transform.Translate;
import javafx.animation.transition.PathTransition;
import javafx.animation.transition.AnimationPath;
import javafx.animation.transition.OrientationType;
import javafx.scene.input.MouseEvent;
import javafx.animation.Timeline;
import javafx.animation.*;

var sx: Number = 125;
var sy: Number = 125;
var running: Boolean = false;

def trackPath = [
MoveTo{x: sx y:sy}
ArcTo{x:25 y:25 radiusX:25 radiusY:25 sweepFlag:true }
ArcTo{x:125 y:125 radiusX:25 radiusY:25 sweepFlag:true}
ArcTo{x:225 y: 225 radiusX: -25 radiusY:-25 sweepFlag:false}
ArcTo{x:125 y:125 radiusX: -25 radiusY: -25 sweepFlag:false}
];

def car: Ellipse = Ellipse{
centerX: sx centerY: sy
radiusX:15 radiusY:10
fill: Color.BLUE
onMouseClicked: function(e: MouseEvent):Void{
if (running==true) {
aniTrackPath.pause();
running=false ;
}
else{
aniTrackPath.play();
running=true;
}
//aniTrackPath.rate = if(aniTrackPath.rate==1) 0 else 1;
//aniTrackPath.play();
}
};

var raceTrack: Path = Path{
elements: trackPath
stroke:Color.BLACK
strokeWidth:3
};


var aniTrackPath: PathTransition = PathTransition{
orientation: OrientationType.ORTHOGONAL_TO_TANGENT
rate:1
node:car
path: AnimationPath.createFromPath(Path{elements:trackPath})
repeatCount: Timeline.INDEFINITE
duration:10s
interpolate: Interpolator.LINEAR

};

Stage{
title:"Race Track"
scene: Scene{

width:350
height:350
content:[
Group {
transforms:[Translate{x:50, y:50}]
content:[raceTrack,car]
}
]
}
}
aniTrackPath.play();

acw1668

/* PathTransition Puzzler */

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.*;
import javafx.scene.paint.Color;
import javafx.animation.transition.*;
import javafx.animation.Timeline;

var pathTransition: PathTransition;

var path: Path = Path {
translateX: 50
translateY: 50
elements: [
ArcTo { x:100 y: 100 radiusX: 50 radiusY: 50 }
ArcTo { x:200 y: 200 radiusX: 50 radiusY: 50 sweepFlag: true }
ArcTo { x:100 y: 100 radiusX: 50 radiusY: 50 sweepFlag: true }
ArcTo { x:0 y: 0 radiusX: 50 radiusY: 50 }
]
}

var car: Ellipse = Ellipse {
centerX: 50 centerY: 50
radiusX: 20 radiusY: 10
rotate: -45
fill: Color.BLUE
onMouseClicked: function(me): Void {
if (pathTransition.paused) {
pathTransition.play();
} else {
pathTransition.pause();
}
}
}

pathTransition = PathTransition {
duration: 10s
node: car
path: AnimationPath.createFromPath(path)
orientation: OrientationType.ORTHOGONAL_TO_TANGENT
repeatCount: Timeline.INDEFINITE
}

Stage {
title: "PathTransition Puzzler"
width: 350
height: 350
scene: Scene {
content: [ path, car ]
}
}

pathTransition.play()

The comments to this entry are closed.