说明:
动画中所有眼睛会随着橙色小球的移动而移动。
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);}}
确实很简单,服务器空间,赶快下载源代码看看效果吧。
源码下载
人之相识,贵在相知;人之相知,贵在知心。