javafx实现一个很有意思的动画

说明:

动画中所有眼睛会随着橙色小球的移动而移动。

1、动画实现

javafx中动画实现相当简单。(不会的同学赶紧上手学习吧,很简单的^_^)

该动画中用到PathTransition类,用于定义小球移动轨迹。

然后分别用DoubleProperty对象bind小球的translateXProperty和translateYProperty

最后添加DoubleProperty对象的ChangeListener事件,当小球的位置发生变化时更新所有眼睛的眼球位置。

在线运行:运行地址

先贴图看看效果^_^

编码实现:

1、眼睛设计。

从图中可以很容易的发现,美国服务器,单眼睛由一个椭圆和一个小圆构成。

因此设计Eye类,包含两个成员变量Circle eye(眼球)和Ellipse ellipse(眼眶)

眼眶的位置是固定的,香港服务器,关键是眼球的位置的计算。

首先,我们需要计算目标位置和ellipse的圆心的连线的水平角度。

然后,我们可以通过ellipse的水平半径和该角度的余弦值计算eye的x坐标。

通过ellipse的垂直半径和该角度的正弦值计算eye的y坐标

最后,纠正以上计算出来的坐标。(如果目标位置在眼睛里面,那么眼球的位置就是目标位置)

以下代码用javafx2.*版本实现:

public class Eye extends Parent {CENTER_X = 42.5;CENTER_Y = 62.5;ELLIPSE_RADIUS_X = 40d;ELLIPSE_RADIUS_Y = 60d;private Circle eye;private Ellipse ellipse;public Eye() {create();}private void create() {// 设置椭圆:CENTER_X,CENTER_Y表示椭圆圆点位置,ELLIPSE_RADIUS_X,ELLIPSE_RADIUS_Y表示椭圆长、短轴半径ellipse = new Ellipse(CENTER_X, CENTER_Y, ELLIPSE_RADIUS_X,ELLIPSE_RADIUS_Y);ellipse.setStrokeWidth(5.0);ellipse.setStroke(Color.BLACK);ellipse.setFill(null);// 设置圆:CENTER_X,CENTER_Y表示圆圆点位置eye = new Circle(CENTER_X, CENTER_Y, 10d, Color.BLACK);this.getChildren().addAll(ellipse, eye);}public void updateMousePosition(double mouseX, double mouseY) {double localMouseX = mouseX – CENTER_X;double localMouseY = mouseY – CENTER_Y;angle = Math.atan2(localMouseY, localMouseX);eyeX = (ELLIPSE_RADIUS_X – 7.5) * Math.cos(angle);(Math.abs(localMouseX) < Math.abs(eyeX)) {eyeX = localMouseX;}double eyeY = (ELLIPSE_RADIUS_Y – 7.5) * Math.sin(angle);if (Math.abs(localMouseY) < Math.abs(eyeY)) {eyeY = localMouseY;}eye.setCenterX(eyeX + CENTER_X);eye.setCenterY(eyeY + CENTER_Y);}}

确实很简单,服务器空间,赶快下载源代码看看效果吧。

源码下载

人之相识,贵在相知;人之相知,贵在知心。

javafx实现一个很有意思的动画

相关文章:

你感兴趣的文章:

标签云: