For those about to rock (we salute you)

Дата публикации: 04.11.2013 13:41:30

This simple example produces the firework effect using JavaFX Script. The active use of random numbers brings variety to each firework volley.

Consider the following application. The Flash class extends the CustomNode class and implements the create method. This method starts an indefinite timeline and generates a lot of circles of different sizes.

  override function create() {     timer.play();     Group {       content: for (index in [1..18]) {         def length = 50 + 10 * random();         def radius =  2 +  2 * random();         for (delta in [1.0, 0.8, 0.6]) Circle {           fill: bind color           radius: delta * radius           centerX: bind delta * length * (1 - opacity)           transforms: Rotate {             angle: 20 * (index + random())           }         }       }     }   } 

Several circles with proportional radius and length (the maximum distance from the centre) are created on each iteration of the cycle. All circles are drawn using a single color that varies sometimes. Therefore I applied data binding here:

  fill: bind color.

Another data binding construction is used to calculate the current position of a circle:

  centerX: bind delta * length * (1 - opacity).

If the opacity value decreases, the circle is located farther from the center. The Rotate transformation defines an angle of a moving direction.

Now, consider key frames for animation.

      KeyFrame {         time: 0s         values: opacity => 0.0         action: function() {           def r =   0 + 255 * random();           def g = 100 + 155 * random();           def b =  50 + 205 * random();           color = Color.rgb(r, g, b);           translateX = 50 + random() * (scene.width  - 100);           translateY = 50 + random() * (scene.height - 100);         }       } 

When the animation cycle starts the opacity value is set to 0, and random numbers are used to calculate a color and position of the circle.

      KeyFrame {         time: 1s * random()         values: opacity => 1.0 tween Interpolator.DISCRETE       } 

Randomly the opacity value is set to 1.

      KeyFrame {         time: 3s + 1s * random()         values: opacity => 0.0       } 

Over approximately three seconds the opacity value smoothly changes to 0.

      KeyFrame {         time: 4s       } 

This key frame is necessary to avoid volley desynchronization. It specifies the exact duration of the timeline.

Stage {   title: "Firework (JavaFX sample)"   scene: Scene {     fill: Color.BLACK     width: 480     height: 320     content: for (index in [1..5]) Flash {     }   } } 

The previous code fragment adds several instances to the scene... et voilà!

It works even on mobile devices:

My special thanks to AC/DC for the title.

PS. This article was originally posted on the Java.net site.