JavaFX许愿树程序:Effect功能的应用(2)

分类: JavaFX编程, 许愿树.
标签: ,

在上篇文章“JavaFX许愿树程序:Effect功能的应用(1)”中，我们介绍了用JavaFX作出白云蓝天绿树的构图。接下来我们制作冒泡的动画，使得在白云中不断有气泡升起。然后我们再画上星星。


JAVAFX相关参考文章：
JavaFX 多维数组
用JavaFX的Effect功能编写许愿树（1）
JavaFX 1.1和1.0的兼容性
JavaFX和Java之间的互操作性


我们创建一个JavaFX类Bubble.fx，它是javafx.scene.shape.Circle类的子类，然后加上动画就可以实现气泡升腾的效果，我们一起来看看代码： 


/*
 * Bubble.fx
 *
 * JavaFX技术交流  http://www.javafxblogs.com
 *
 */
package wishtree;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import java.lang.Math.*;

/**
 * @author Henry Zhang
 * JavaFX编程技巧及应用 http://www.javafxblogs.com
 */
public class Bubble extends Circle {

  var counter = 0;
  var startCounter = 10.0;

  var radiusDelta = -0.15;
  var destinationY:Double = 200;

  var timeline : Timeline =
    Timeline {
      repeatCount:   Timeline.INDEFINITE
      keyFrames : [
        KeyFrame {
          time : 100ms
          action: function () {
                    moveOneStep();
                  }
          }
      ]
    }

  init {
    effect = GaussianBlur { radius: 3}
    fill = Color.WHITE;

    radius = 4;
    resetStatus();
    timeline.play();
  }

  function moveOneStep() : Void {

    counter++;

    if ( counter > startCounter) {
      if ( not visible ) visible = true;

      centerY -= 2;
      radius += radiusDelta;

      if ( radius < 1 or radius > 4 )
        radiusDelta = -radiusDelta;
    }

    if ( centerY < destinationY+100 ) {
      visible = false;
      if ( opacity > 0.03 )
        opacity -= 0.03
      else
        opacity = 0;

      visible = true;
    }

    if ( centerY < destinationY ) {
      resetStatus();
    }
 } // JavaFX Game Demo   http://www.javafxgame.com

 function resetStatus(): Void {
   visible = false;
   centerY = 500 + random()*50;
   centerX = 200 + random()*350;
   counter = 0;
   startCounter = 80 + random()*400;

   destinationY = 150+random()*30;
   radius = 1 + random()*2;
   opacity = 0.6;
 }
}

首先，在init块和resetStatus()函数中我们初始化气泡的大小，透明度，位置等变量。我们在resetStatus()里调用了java.lang.Math里的随机函数random()，使得气泡的出现位置是随机的。从这可以看出JavaFX调用Java的便易性。在确定了初始状态后，我们定义一个动画的时间线（timeline）实例，里面只有一个关键帧（KeyFrame）。相关代码如下：

  var timeline : Timeline =
    Timeline {
      repeatCount:   Timeline.INDEFINITE
      keyFrames : [
        KeyFrame {
          time : 100ms
          action: function () {
                    moveOneStep();
                  }
          }
      ]
    }

. . . . 

  function moveOneStep() : Void {

    counter++;

    if ( counter > startCounter) {
      if ( not visible ) visible = true;

      centerY -= 2;
      radius += radiusDelta;

      if ( radius < 1 or radius > 4 )
        radiusDelta = -radiusDelta;
    }

    if ( centerY < destinationY+100 ) {
      visible = false;
      if ( opacity > 0.03 )
        opacity -= 0.03
      else
        opacity = 0;

      visible = true;
    }

    if ( centerY < destinationY ) {
      resetStatus();
    }
 }


每隔100ms，timeline都会调用处理函数moveOneStep()，从而可以不断改变气泡的状态，产生动画效果。在这个函数中，我们需要改变的实例变量有centerY,opacity,visible,radius。counter变量则是作为时间计数器，以控制状态的变化。这样，一个若隐若现、一张一弛不断上升的气泡就完成了。


下一步，我们再创建一个Star类，用来显示悬挂的“愿望星”。每颗星星可以看作是个10个结点连线组成的多边形，所以我们通过扩展Polygon类来编制星星的代码，一起来看看：

/*
 * Star.fx
 *
 * http://www.javafxblogs.com
 * http://developers.sun.com.cn/blog/henry
 */

package wishtree;

import javafx.scene.effect.DropShadow;
import javafx.scene.paint.*;
import javafx.scene.shape.Polygon;
import java.lang.Math.*;

/**
 * @author Henry Zhang
 *
 * http://www.javafxblogs.com
 *
 */

public class Star extends Polygon {
  def r1 : Double = 18;
  def r2 : Double = r1 / 1.6;

  var r = [r1, r2];

  var strokeColor =
    [ Color.PINK, Color.YELLOW, Color.GOLDENROD, Color.CYAN,
      Color.PURPLE, Color.BLUEVIOLET, Color.CORAL, Color.CRIMSON ];
  var fillColor =
    [ Color.GOLD, Color.BLUE, Color.RED, Color.DARKSLATEBLUE,
      Color.DARKORANGE, Color.MAGENTA, Color.BROWN, Color.CHOCOLATE ];

  init {
    // compute the coordinates of the star polygon
    points = for ( i in [0..9] ) [
      r[i mod 2] * cos( toRadians(i*36) ),
      r[i mod 2] * sin( toRadians(i*36) )
    ];

    blocksMouse = true;
    strokeWidth = 1; // 本文 发 表 于 http://www.javafxblogs.com/
    var which : Integer = random() * sizeof(strokeColor) as Integer;

    stroke = strokeColor[which];

    fill = LinearGradient {
             startX: 0 startY: 0  endX: 0  endY: 1.0
             proportional: true
             stops: [
                     Stop { offset: 0.1 color: Color.WHITE }
                     Stop { offset: 1.0 color: fillColor[which] }
                    ]
           };
    effect = DropShadow { color: Color.WHITE };
  }
}

在init块中，我们用for语句来计算星星的10个接点，每次循环产生一个节点的(x,y)坐标，共计10组，最后产生的一个sequence赋值给points变量，我们可以看到JavaFX的代码非常简洁：

    points = for ( i in [0..9] ) [
      r[i mod 2] * cos( toRadians(i*36) ),
      r[i mod 2] * sin( toRadians(i*36) )
    ];


fill变量我们再次采用了LinearGradient的渐变效果，填充的颜色是随机选择的。我们还增加了DropShadow的影子效果，在星星的背后加上了白色的影子，增强了视觉效果。blocksMouse属性是屏蔽鼠标事件传给星星下面的其他图形。


这个星星类产生的实例位置都是在坐标（0，0）的位置，在下面的程序中，我们会通过改变translateX和translateY的值，动态地把星星挂在树上。


我们对Main.fx略为修改一下，首先把数个泡泡加入scene中：

     for ( i in [1..5] ) Bubble { }


然后在许愿树的图形上增加鼠标点击的处理，每当点击到树叶和树枝时，会在该处挂上一颗星星，在鼠标事件（MouseEvent）中，x,y属性可以告诉我们点击的位置，然后我们就可以设置星星出现的地方。通过insert操作，我们把新创建的星星增加到scene中。注意，这里采用了currentIndex计数器来确保星星是出现在云层下方，我们可以看到被云层遮掩的星星：

var tree : ImageView = ImageView {
  x: 80
  y: 0
  image: Image {
           url: "{__DIR__}images/tree.png"
           width: 640
           preserveRatio: true
         }
  onMousePressed:
    function(e:MouseEvent) : Void {
      if ( e.y < 343 ) {
        var s = Star{ translateX: e.x translateY: e.y } ;
        insert s after stage.scene.content[currentIndex++];
      }
    }
};


完整的代码如下：

/*
 * Main.fx
 *
 * http://www.javafxblogs.com
 *
 */
package wishtree;

import javafx.scene.effect.GaussianBlur;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/**
 * @author Henry Zhang
 * JavaFX编程 http://javafxguy.javaeye.com
 * JavaFX技术交流应用 http://www.javafxblogs.com
 */

var xx = 170;
var yy = 430;

var currentIndex = 0;

var tree : ImageView = ImageView {
   x: 80
   y: 0
   image: Image {
            url: "{__DIR__}images/tree.png"
            width: 640
            preserveRatio: true
          }
  onMousePressed:
    function(e:MouseEvent) : Void {
      if ( e.y < 343 ) {
        var s = Star{ translateX: e.x translateY: e.y } ;
        insert s after stage.scene.content[currentIndex++];
      }
    }
  };

var tree2 =
  Image {
    url: "{__DIR__}images/tree2.png"
    width: 130
    preserveRatio: true
 };

var stage =
  Stage {
    title: "Wish Tree"
    width: 830
    height: 620
    resizable: false

    scene: Scene {
             fill: LinearGradient {
                     startX: 0,
                     startY: 0.0,
                     endX: 0,
                     endY: 1.0
                     proportional: true
                     stops: [ Stop { offset: 0.0 color: Color.web("#14acf8") },
                              Stop { offset: 1.0 color: Color.web("#a4e6f8") }]
                   }

    content: [
      ImageView {
        x: 50
        y: 280
        image: Image {
                 url: "{__DIR__}images/cloud2.png"
                 preserveRatio: true
                 width: 160
               }
        effect: GaussianBlur { radius: 25 }
      },
      ImageView {
        x: 520
        y: 300
        image: Image {
            url: "{__DIR__}images/cloud2.png"
            preserveRatio: true
            width: 150
            }
        effect:  GaussianBlur { radius: 33 }
      }, 

      ImageView {
        x: 560
        y: 500
        image: tree2
      },
      ImageView {
        x: 460
        y: 470
        image: tree2
      }, // JavaFX Sample code http://www.javafxgame.com
      ImageView {
        x: 60
        y: 500
        image: tree2
      },
      ImageView {
        x: 190
        y: 470
        image: tree2
      },
      tree,
      ImageView {
        x: 120
        y: 360
        image: Image {
          url: "{__DIR__}images/sign.png"
          width: 180
          preserveRatio: true
        }
      },
      ImageView {
        x: 20
        y: 60
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 250
        }
        effect: GaussianBlur { radius: 40 }
      }, // United States American Citizenship Test
      ImageView {
        x: 520
        y: 90
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 100
        }
        effect:  GaussianBlur { radius: 20}
      }, // United States Citizenship Application
      ImageView {
        x: 620
        y: 190
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 180
        }
        effect:  GaussianBlur { radius: 25}
      },
      ImageView {
        x: 600
        y: 380
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 150
        }
        effect:  GaussianBlur { radius: 33 }
      },
      ImageView {
        x: 0
        y: 490
        image: Image {
          url: "{__DIR__}images/cloud.png"
        }
        effect:  GaussianBlur { radius: 30 }
      },
      for ( i in [1..5] ) Bubble { },
      Text {
        x:170
        y: 450
        content: "许愿树"
        fill: Color.YELLOW
        font: Font.font ( null, FontWeight.BOLD, 30);
        effect: PerspectiveTransform {
                  ulx: xx    uly: yy
                  urx: xx+80 ury: yy-10
                  llx: xx-2  lly: yy+40
                  lrx: xx+80 lry: yy+38
                }
        }
      ]
    }
}

//用JavaFX的Effect功能编写许愿树程序
var idx =
  for ( n in stage.scene.content )
    if ( n == tree ) indexof n
    else [] ;

currentIndex = idx[0];

现在代码基本完整了，每次点击愿望树，都会生成一个五彩的星星，快来点击下面点击下面截图挂颗愿望星吧(JDK 1.5以上的环境,最好是JDK1.6 U10以上)：



点击启动许愿树程序


点击启动许愿树程序



在下一篇文章中，我们介绍如何把愿望写在星星上。

（ 未完待续, 完整代码可在下一篇文章中下载 ）

评论 (0) 2009年05月15日