JavaFX的Effect功能例子：编写许愿树程序(2)

javafxguy

浏览: 151128 次
性别:
来自: 北京

最近访客更多访客>>

springnet

ssunny

Arvinsky

769034965

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaFX编程

JavaFX 编程 360 Web JDK

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

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

/*
 * Bubble.fx
 *
 * JavaFX技术交流  http://javafxguy.iteye.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://javafxguy.iteye.com

*/

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 http://javafxguy.iteye.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://javafxguy.iteye.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  http://javafxguy.iteye.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.iteye.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 }
      }, // JavaFX Demo Game

      ImageView {
        x: 560
        y: 500
        image: tree2
      },
      ImageView {
        x: 460
        y: 470
        image: tree2
      }, // JavaFX Sample code
      ImageView {
        x: 60
        y: 500
        image: tree2
      },
      ImageView {
        x: 190
        y: 470
        image: tree2
      },

      tree, // “用JavaFX的Effect实现许愿树(1)”

      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 }
      },

      ImageView {
        x: 520
        y: 90
        image: Image {
          url: "{__DIR__}images/cloud2.png"
          preserveRatio: true
          width: 100
        }
        effect:  GaussianBlur { radius: 20}
      }, 
      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以上)：

参见：http://javafxguy.iteye.com

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

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

JavaFX的Effect功能例子：编写许愿树程序(3)

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论