JavaFX示例--TimeLine和Animation的使用

来源：互联网发布：52单片机引脚图电路图编辑：程序博客网时间：2024/05/29 13:23

这两天工作很忙，由于要进行Android平板上的一个项目的final release，前天晚上加班到11点多，昨天晚上加班到凌晨4点多。所以之前说的Sourceforge的首页也才做了一部分。不过，由于项目final release，今天比较轻松，写了几个JavaFX的示例。

上面就是一个简单的示例。

示例的演示地址:http://wjfxgame.sourceforge.net/examples/exp1/AniTest.html

点击Start开始动画。

主要是应用了JavaFX中的Timeline和Animation。

Timeline在之前的博文中，很多地方用到了。也就是一个时间轴，然后通过添加关键帧来形成动画。

而Animation，主要是对Node进行动画处理。JavaFX中的动画在javafx.animation包中。而Animation有两个子类，Timeline和Transition。也就是说，按照API中的层级关系来看，Timeline是Animation的一种。

当然，我们也就不必纠结标题中的Timeline和Animation了。

Transition共有10个子类，分别是：FadeTransition, FillTransition, ParallelTransition, PathTransition, PauseTransition, RotateTransition, ScaleTransition, SequentialTransition, StrokeTransition, TranslateTransition。

其实子类虽多，但动画的基本效果都可以根据命名前缀来判断。基本都是Node属性的改变，像边框色，填充色，透明度，缩放，旋转，平移，按路径移动和暂停。

只有ParallelTransition是并行动画(一系列动画同时进行)，SequentialTransition是顺序动画(一系列动画按顺序执行)。

下面看一下源代码:

[java] view plaincopy
import javafx.animation.*;  
import javafx.event.ActionEvent;  
import javafx.event.EventHandler;  
import javafx.scene.control.ToggleButton;  
import javafx.scene.control.ToggleGroup;  
import javafx.scene.effect.Bloom;  
import javafx.scene.layout.HBox;  
import javafx.scene.layout.Pane;  
import javafx.scene.paint.Color;  
import javafx.scene.shape.*;  
import javafx.util.Duration;  
  
/** 
 * 
 * @author wing 
 */  
public class TestPane extends Pane{  
    private ParallelTransition mAnimList;  
      
    private Timeline timeline;  
      
    private HBox hBox;  
    private ToggleButton start, pause, stop;  
    private ToggleGroup btnGroup;  
      
    private double duration = 200;  
    public TestPane(){  
        btnGroup = new ToggleGroup();  
        start = new ToggleButton("Start");  
        start.setToggleGroup(btnGroup);  
        start.setOnAction(new EventHandler<ActionEvent>() {  
  
            @Override  
            public void handle(ActionEvent arg0) {  
                timeline.play();  
                checkUIState();  
            }  
        });  
          
        pause = new ToggleButton("Pause");  
        pause.setToggleGroup(btnGroup);  
        pause.setOnAction(new EventHandler<ActionEvent>() {  
  
            @Override  
            public void handle(ActionEvent arg0) {  
                timeline.pause();  
                checkUIState();  
            }  
        });         
   
        stop = new ToggleButton("Stop");  
        stop.setToggleGroup(btnGroup);  
        stop.setOnAction(new EventHandler<ActionEvent>() {  
  
            @Override  
            public void handle(ActionEvent arg0) {  
                timeline.stop();  
                checkUIState();  
            }  
        });     
          
        hBox = new HBox(10);  
        hBox.getChildren().addAll(start, pause, stop);  
          
        hBox.setTranslateX((Anitest.WIDTH - 200) / 2);  
        hBox.setTranslateY(20);  
          
        getChildren().add(hBox);  
          
          
        timeline = new Timeline();  
          
        timeline.setCycleCount(Timeline.INDEFINITE);  
        KeyFrame keyFrame = new KeyFrame(Duration.millis(duration), new EventHandler<ActionEvent>() {  
  
            @Override  
            public void handle(ActionEvent event) {  
                createObject();  
            }  
        });  
        timeline.getKeyFrames().add(keyFrame);  
    }  
      
    /** 
     * 检测start pause stop三个按钮的状态 
     */  
    public void checkUIState(){  
        start.setDisable(false);  
        pause.setDisable(false);  
        stop.setDisable(false);  
        switch(timeline.getStatus()){  
            case RUNNING:  
                start.setDisable(true);  
                break;  
            case PAUSED:  
                pause.setDisable(true);  
                break;  
            case STOPPED:  
                stop.setDisable(true);  
                break;  
        }  
    }  
      
      
    /** 
     * 创建一个Object 并执行动画,在这里创建了一个ParallelTransition，并在其中添加了随机左右上下平移的TranslateTransition，透明度逐渐变为0的FadeTransition和逐渐放大0.2倍的ScaleTransition。将刚创建的Object与组合这个三个动画的ParallelTransition绑定，然后执行ParallelTransition。 
     */  
    public void createObject() {  
        double width = Math.max(50, Math.random() * 200);  
        double height = Math.max(50, Math.random() * 200);          
        double x = Math.min(Math.random() * Anitest.WIDTH, Anitest.WIDTH - width);  
        double y = Math.max(Math.random() * (Anitest.HEIGHT - 100), 100);  
          
        double dx = Math.random() * 50;  
        double dy = Math.random() * 50;  
        final Shape shape = new Circle(x, y, width / 2);  
        shape.setEffect(new Bloom(50));  
        shape.setFill(Color.rgb((int) (Math.random() * 255), (int) (Math.random() * 255), (int) (Math.random() * 255)));  
        getChildren().add(shape);  
        mAnimList = new ParallelTransition(  
                shape,  
                TranslateTransitionBuilder.create().byX(Math.random() > 0.5 ? dx : -dx).byY(Math.random() > 0.5 ? dy : -dy).duration(Duration.millis(1000)).build(),  
                FadeTransitionBuilder.create().toValue(0).duration(Duration.millis(1000)).build(),  
                ScaleTransitionBuilder.create().byX(0.2).byY(0.2).duration(Duration.millis(800)).build());  
        mAnimList.play();  
        mAnimList.setOnFinished(new EventHandler<ActionEvent>() {  
  
            @Override  
            public void handle(ActionEvent arg0) {  
                getChildren().remove(shape);  
            }  
        });  
    }  
}  

并在动画结束的时候，将刚创建的Object进行移除操作。

这里的Transition都是用各自的Builder来创建。

至于为何这里会继承Pane，主要是这些示例我之后都会加进Sourceforge首页的站点中，在那个App里会使用到。

下面是Main类:

[java] view plaincopy
import javafx.application.Application;  
import javafx.scene.Scene;  
import javafx.scene.layout.StackPane;  
import javafx.scene.paint.Color;  
import javafx.stage.Stage;  
  
/** 
 * @author wing 
 * 2012/8/30 
 */  
public class Anitest extends Application {  
    public static final int WIDTH = 800;  
    public static final int HEIGHT = 600;  
    public static void main(String[] args) {  
        launch(args);  
    }  
      
    @Override  
    public void start(Stage primaryStage) {  
        TestPane mPane = new TestPane();  
        StackPane root = new StackPane();  
        root.getChildren().add(mPane);  
        Scene scene = new Scene(root, WIDTH, HEIGHT);  
        scene.setFill(Color.BLACK);  
        primaryStage.setScene(scene);  
        primaryStage.setTitle("JavaFX示例--TimeLine和Animation的使用");  
        primaryStage.show();  
    }  
}  

Main类就不做解释了，都是很基本的内容。

转载请注明出处:http://blog.csdn.net/ml3947/

---------------------------------------------------------

本来是尝试在博文中嵌入Applet，尝试了半天没成功，但是又看到以前一直关注的一位牛人博客里嵌入过。顿感奇怪中。准备以后再看看。

所以就直接给了演示的地址。如果系统没安装JavaFX的时候，应该会提示你安装新版Java去。因为JRE7中已经包含了JavaFX了。

0 0