当前位置: 代码迷 >> Web前端 >> JavaFX示范-TimeLine和Animation的使用
  详细解决方案

JavaFX示范-TimeLine和Animation的使用

热度:167   发布时间:2012-09-08 10:48:07.0
JavaFX示例--TimeLine和Animation的使用

  这两天工作很忙,由于要进行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是顺序动画(一系列动画按顺序执行)。


  下面看一下源代码:

  

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类:

  

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了。

  

  

  相关解决方案