DOC-08-03 动画基础

24 八, 2015 官方文档翻译 javafxchina Permalink

JavaFX中的动画可以分为时间轴动画和过渡两种。本章将为每种类型提供一些样例。

Timeline和Transition都是javafx.animation.Animation的子类。关于一些详细的类、方法和其它特性的更多信息，请查看API文档。

过渡(Transitions)

JavaFX中的Transition提供了在一条内部时间轴上展现动画的手段。Transition可以被组合用来创建并行或串行的多重动画。请查看“并行过渡(Parallel Transition)”和“串行过渡(Sequential Transition)”章节的详细信息。下面的章节将提供一些Transition动画样例。

褪色过渡(Fade Transition)

Fade Transition在给定的时间内修改节点的不透明度。

例3-1中的代码片段展示了应用在一个矩形上的Fade Transition。首先创建了一个圆角矩形，然后对它应用了一个Fade Transition。

例3-1 褪色过渡

final Rectangle rect1 = new Rectangle(10, 10, 100, 100);
rect1.setArcHeight(20);
rect1.setArcWidth(20);
rect1.setFill(Color.RED);
...
FadeTransition ft = new FadeTransition(Duration.millis(3000), rect1);
ft.setFromValue(1.0);
ft.setToValue(0.1);
ft.setCycleCount(Timeline.INDEFINITE);
ft.setAutoReverse(true);
ft.play();

final Rectangle rect1 = new Rectangle(10, 10, 100, 100);

rect1.setArcHeight(20);

rect1.setArcWidth(20);

rect1.setFill(Color.RED);

...

FadeTransition ft = new FadeTransition(Duration.millis(3000), rect1);

ft.setFromValue(1.0);

ft.setToValue(0.1);

ft.setCycleCount(Timeline.INDEFINITE);

ft.setAutoReverse(true);

ft.play();

路径过渡(Path Transition)

Path Transition在给定的时间内将一个节点沿着一个路径从一端移动到另一端。

图3-1 路径过渡

例3-2中的代码片段展示了应用在一个矩形上的路径过渡。这个动画会在矩形达到路径端点时反转。代码中首先创建了一个圆角矩形，然后创建了一个新的PathTransition并应用到了矩形之上。

例3-2 路径过渡

final Rectangle rectPath = new Rectangle (0, 0, 40, 40);
rectPath.setArcHeight(10);
rectPath.setArcWidth(10);
rectPath.setFill(Color.ORANGE);
...
Path path = new Path();
path.getElements().add(new MoveTo(20,20));
path.getElements().add(new CubicCurveTo(380, 0, 380, 120, 200, 120));
path.getElements().add(new CubicCurveTo(0, 120, 0, 240, 380, 240));
PathTransition pathTransition = new PathTransition();
pathTransition.setDuration(Duration.millis(4000));
pathTransition.setPath(path);
pathTransition.setNode(rectPath);
pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
pathTransition.setCycleCount(Timeline.INDEFINITE);
pathTransition.setAutoReverse(true);
pathTransition.play();

final Rectangle rectPath = new Rectangle (0, 0, 40, 40);

rectPath.setArcHeight(10);

rectPath.setArcWidth(10);

rectPath.setFill(Color.ORANGE);

...

Path path = new Path();

path.getElements().add(new MoveTo(20,20));

path.getElements().add(new CubicCurveTo(380, 0, 380, 120, 200, 120));

path.getElements().add(new CubicCurveTo(0, 120, 0, 240, 380, 240));

PathTransition pathTransition = new PathTransition();

pathTransition.setDuration(Duration.millis(4000));

pathTransition.setPath(path);

pathTransition.setNode(rectPath);

pathTransition.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);

pathTransition.setCycleCount(Timeline.INDEFINITE);

pathTransition.setAutoReverse(true);

pathTransition.play();

并行过渡(Parallel Transition)

Parallel Transition是指在同一时间内执行多个过渡效果。

例3-3中的代码片段展示了一个Parallel Transaction，它在一个矩形上应用了淡出淡入、移动、旋转和缩放过渡。

图3-2 并行过渡

例3-3 并行过渡

Rectangle rectParallel = new Rectangle(10,200,50, 50);
rectParallel.setArcHeight(15);
rectParallel.setArcWidth(15);
rectParallel.setFill(Color.DARKBLUE);
rectParallel.setTranslateX(50);
rectParallel.setTranslateY(75);
...
        FadeTransition fadeTransition = 
            new FadeTransition(Duration.millis(3000), rectParallel);
        fadeTransition.setFromValue(1.0f);
        fadeTransition.setToValue(0.3f);
        fadeTransition.setCycleCount(2);
        fadeTransition.setAutoReverse(true);
        TranslateTransition translateTransition =
            new TranslateTransition(Duration.millis(2000), rectParallel);
        translateTransition.setFromX(50);
        translateTransition.setToX(350);
        translateTransition.setCycleCount(2);
        translateTransition.setAutoReverse(true);
        RotateTransition rotateTransition = 
            new RotateTransition(Duration.millis(3000), rectParallel);
        rotateTransition.setByAngle(180f);
        rotateTransition.setCycleCount(4);
        rotateTransition.setAutoReverse(true);
        ScaleTransition scaleTransition = 
            new ScaleTransition(Duration.millis(2000), rectParallel);
        scaleTransition.setToX(2f);
        scaleTransition.setToY(2f);
        scaleTransition.setCycleCount(2);
        scaleTransition.setAutoReverse(true);
        
        parallelTransition = new ParallelTransition();
        parallelTransition.getChildren().addAll(
                fadeTransition,
                translateTransition,
                rotateTransition,
                scaleTransition
        );
        parallelTransition.setCycleCount(Timeline.INDEFINITE);
        parallelTransition.play();

Rectangle rectParallel = new Rectangle(10,200,50, 50);

rectParallel.setArcHeight(15);

rectParallel.setArcWidth(15);

rectParallel.setFill(Color.DARKBLUE);

rectParallel.setTranslateX(50);

rectParallel.setTranslateY(75);

...

FadeTransition fadeTransition =

new FadeTransition(Duration.millis(3000), rectParallel);

fadeTransition.setFromValue(1.0f);

fadeTransition.setToValue(0.3f);

fadeTransition.setCycleCount(2);

fadeTransition.setAutoReverse(true);

TranslateTransition translateTransition =

new TranslateTransition(Duration.millis(2000), rectParallel);

translateTransition.setFromX(50);

translateTransition.setToX(350);

translateTransition.setCycleCount(2);

translateTransition.setAutoReverse(true);

RotateTransition rotateTransition =

new RotateTransition(Duration.millis(3000), rectParallel);

rotateTransition.setByAngle(180f);

rotateTransition.setCycleCount(4);

rotateTransition.setAutoReverse(true);

ScaleTransition scaleTransition =

new ScaleTransition(Duration.millis(2000), rectParallel);

scaleTransition.setToX(2f);

scaleTransition.setToY(2f);

scaleTransition.setCycleCount(2);

scaleTransition.setAutoReverse(true);

parallelTransition = new ParallelTransition();

parallelTransition.getChildren().addAll(

fadeTransition,

translateTransition,

rotateTransition,

scaleTransition

);

parallelTransition.setCycleCount(Timeline.INDEFINITE);

parallelTransition.play();

串行过渡(Sequential Transition)

Sequential Transition指的是一个接一个地执行多个过渡效果。

例3-4中的代码片段展示串行一个接一个地执行过渡的效果。它在一个矩形上应用了淡入淡出、移动、旋转和缩放过渡效果。

例3-4 串行过渡

Rectangle rectSeq = new Rectangle(25,25,50,50);
rectSeq.setArcHeight(15);
rectSeq.setArcWidth(15);
rectSeq.setFill(Color.CRIMSON);
rectSeq.setTranslateX(50);
rectSeq.setTranslateY(50);

...

         FadeTransition fadeTransition = 
            new FadeTransition(Duration.millis(1000), rectSeq);
        fadeTransition.setFromValue(1.0f);
        fadeTransition.setToValue(0.3f);
        fadeTransition.setCycleCount(1);
        fadeTransition.setAutoReverse(true);
 
        TranslateTransition translateTransition =
            new TranslateTransition(Duration.millis(2000), rectSeq);
        translateTransition.setFromX(50);
        translateTransition.setToX(375);
        translateTransition.setCycleCount(1);
        translateTransition.setAutoReverse(true);
 
        RotateTransition rotateTransition = 
            new RotateTransition(Duration.millis(2000), rectSeq);
        rotateTransition.setByAngle(180f);
        rotateTransition.setCycleCount(4);
        rotateTransition.setAutoReverse(true);
 
        ScaleTransition scaleTransition = 
            new ScaleTransition(Duration.millis(2000), rectSeq);
        scaleTransition.setFromX(1);
        scaleTransition.setFromY(1);
        scaleTransition.setToX(2);
        scaleTransition.setToY(2);
        scaleTransition.setCycleCount(1);
        scaleTransition.setAutoReverse(true);

sequentialTransition = new SequentialTransition();
sequentialTransition.getChildren().addAll(
        fadeTransition,
        translateTransition,
        rotateTransition,
        scaleTransition);
sequentialTransition.setCycleCount(Timeline.INDEFINITE);
sequentialTransition.setAutoReverse(true);

sequentialTransition.play();

Rectangle rectSeq = new Rectangle(25,25,50,50);

rectSeq.setArcHeight(15);

rectSeq.setArcWidth(15);

rectSeq.setFill(Color.CRIMSON);

rectSeq.setTranslateX(50);

rectSeq.setTranslateY(50);

...

FadeTransition fadeTransition =

new FadeTransition(Duration.millis(1000), rectSeq);

fadeTransition.setFromValue(1.0f);

fadeTransition.setToValue(0.3f);

fadeTransition.setCycleCount(1);

fadeTransition.setAutoReverse(true);

TranslateTransition translateTransition =

new TranslateTransition(Duration.millis(2000), rectSeq);

translateTransition.setFromX(50);

translateTransition.setToX(375);

translateTransition.setCycleCount(1);

translateTransition.setAutoReverse(true);

RotateTransition rotateTransition =

new RotateTransition(Duration.millis(2000), rectSeq);

rotateTransition.setByAngle(180f);

rotateTransition.setCycleCount(4);

rotateTransition.setAutoReverse(true);

ScaleTransition scaleTransition =

new ScaleTransition(Duration.millis(2000), rectSeq);

scaleTransition.setFromX(1);

scaleTransition.setFromY(1);

scaleTransition.setToX(2);

scaleTransition.setToY(2);

scaleTransition.setCycleCount(1);

scaleTransition.setAutoReverse(true);

sequentialTransition = new SequentialTransition();

sequentialTransition.getChildren().addAll(

fadeTransition,

translateTransition,

rotateTransition,

scaleTransition);

sequentialTransition.setCycleCount(Timeline.INDEFINITE);

sequentialTransition.setAutoReverse(true);

sequentialTransition.play();

关于动画和过渡的更多信息，请查看API文档和SDK中Ensemble项目的Animation部分。

时间轴动画

动画是由它的一些相关属性驱动的，例如大小、位置和颜色等。Timeline提供了随着时间进展更新这些属性值的能力。JavaFX支持关键帧动画(Key Frame Animation)。在Key Frame Animation中，绘图场景(Graphical Scene)的动画状态的转换是由特定时间点的Scene状态的起始和结束快照(Key Frames，关键帧)来定义的。系统能够自动执行动画。在需要时它可以停止、暂停、恢复、反转或者重复动作。

基本的时间轴动画(Timeline Animation)

例3-5中的代码为矩形创建了一个水平移动动画，在500毫秒内将它从原始位置x=100移动到了x=300。要对一个对象创建一个水平移动动画，只要修改x坐标值而保留y坐标值不变即可。

图3-3 水平移动

例3-5展示了基本的时间轴动画的代码片段。

例3-5 时间轴动画

final Rectangle rectBasicTimeline = new Rectangle(100, 50, 100, 50);
rectBasicTimeline.setFill(Color.RED);
...
final Timeline timeline = new Timeline();
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.setAutoReverse(true);
final KeyValue kv = new KeyValue(rectBasicTimeline.xProperty(), 300);
final KeyFrame kf = new KeyFrame(Duration.millis(500), kv);
timeline.getKeyFrames().add(kf);
timeline.play();

final Rectangle rectBasicTimeline = new Rectangle(100, 50, 100, 50);

rectBasicTimeline.setFill(Color.RED);

...

final Timeline timeline = new Timeline();

timeline.setCycleCount(Timeline.INDEFINITE);

timeline.setAutoReverse(true);

final KeyValue kv = new KeyValue(rectBasicTimeline.xProperty(), 300);

final KeyFrame kf = new KeyFrame(Duration.millis(500), kv);

timeline.getKeyFrames().add(kf);

timeline.play();

时间轴事件(Timeline Event)

JavaFX提供了处理事件的能力，事件可以在时间轴动画播放过程中被触发。例3-6中的代码在一个指定范围内修改圆的半径，同时KeyFrame随机设置圆在scene中的x坐标值。

例3-6 时间轴事件

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.animation.AnimationTimer;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.Lighting;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.text.Text;
import javafx.util.Duration;
 
public class TimelineEvents extends Application {
    
    //主时间轴
    private Timeline timeline;
    private AnimationTimer timer;
 
    //用于指定实际帧的变量
    private Integer i=0;
 
    @Override public void start(Stage stage) {
        Group p = new Group();
        Scene scene = new Scene(p);
        stage.setScene(scene);
        stage.setWidth(500);
        stage.setHeight(500);
        p.setTranslateX(80);
        p.setTranslateY(80);
 
        //创建一个带有特效的圆
        final Circle circle = new Circle(20,  Color.rgb(156,216,255));
        circle.setEffect(new Lighting());
        //在圆内部创建一个文本
        final Text text = new Text (i.toString());
        text.setStroke(Color.BLACK);
        //为带有文本的圆创建一个布局
        final StackPane stack = new StackPane();
        stack.getChildren().addAll(circle, text);
        stack.setLayoutX(30);
        stack.setLayoutY(30);
 
        p.getChildren().add(stack);
        stage.show();
 
        //为了移动圆创建一个时间轴
        timeline = new Timeline();
        timeline.setCycleCount(Timeline.INDEFINITE);
        timeline.setAutoReverse(true);
 
        //在每个帧开始时你可以添加一个特定的动作
        timer = new AnimationTimer() {
            @Override
            public void handle(long l) {
                text.setText(i.toString());
                i++;
            }
 
        };
 
        //创建一个带有缩放因子的keyValue:将圆缩放2倍
        KeyValue keyValueX = new KeyValue(stack.scaleXProperty(), 2);
        KeyValue keyValueY = new KeyValue(stack.scaleYProperty(), 2);
 
        //创建一个KeyFrame, keyValue会在2秒钟时抵达
        Duration duration = Duration.millis(2000);
        //当抵达关键帧时可以指定一个特定的动作
        EventHandler onFinished = new EventHandler<ActionEvent>() {
            public void handle(ActionEvent t) {
                 stack.setTranslateX(java.lang.Math.random()*200-100);
                 //复位计数器 
                 i = 0;
            }
        };
 
        KeyFrame keyFrame = new KeyFrame(duration, onFinished , keyValueX, keyValueY);
 
        //将关键帧添加到时间轴中
        timeline.getKeyFrames().add(keyFrame);
 
        timeline.play();
        timer.start();
    }
        
        
    public static void main(String[] args) {
        Application.launch(args);
    }
  }

import javafx.application.Application;

import javafx.stage.Stage;

import javafx.animation.AnimationTimer;

import javafx.animation.KeyFrame;

import javafx.animation.KeyValue;

import javafx.animation.Timeline;

import javafx.event.ActionEvent;

import javafx.event.EventHandler;

import javafx.scene.Group;

import javafx.scene.Scene;

import javafx.scene.effect.Lighting;

import javafx.scene.layout.StackPane;

import javafx.scene.paint.Color;

import javafx.scene.shape.Circle;

import javafx.scene.text.Text;

import javafx.util.Duration;

public class TimelineEvents extends Application {

//主时间轴

private Timeline timeline;

private AnimationTimer timer;

//用于指定实际帧的变量

private Integer i=0;

@Override public void start(Stage stage) {

Group p = new Group();

Scene scene = new Scene(p);

stage.setScene(scene);

stage.setWidth(500);

stage.setHeight(500);

p.setTranslateX(80);

p.setTranslateY(80);

//创建一个带有特效的圆

final Circle circle = new Circle(20, Color.rgb(156,216,255));

circle.setEffect(new Lighting());

//在圆内部创建一个文本

final Text text = new Text (i.toString());

text.setStroke(Color.BLACK);

//为带有文本的圆创建一个布局

final StackPane stack = new StackPane();

stack.getChildren().addAll(circle, text);

stack.setLayoutX(30);

stack.setLayoutY(30);

p.getChildren().add(stack);

stage.show();

//为了移动圆创建一个时间轴

timeline = new Timeline();

timeline.setCycleCount(Timeline.INDEFINITE);

timeline.setAutoReverse(true);

//在每个帧开始时你可以添加一个特定的动作

timer = new AnimationTimer() {

@Override

public void handle(long l) {

text.setText(i.toString());

i++;

}

};

//创建一个带有缩放因子的keyValue:将圆缩放2倍

KeyValue keyValueX = new KeyValue(stack.scaleXProperty(), 2);

KeyValue keyValueY = new KeyValue(stack.scaleYProperty(), 2);

//创建一个KeyFrame, keyValue会在2秒钟时抵达

Duration duration = Duration.millis(2000);

//当抵达关键帧时可以指定一个特定的动作

EventHandler onFinished = new EventHandler<ActionEvent>() {

public void handle(ActionEvent t) {

stack.setTranslateX(java.lang.Math.random()*200-100);

//复位计数器

i = 0;

}

};

KeyFrame keyFrame = new KeyFrame(duration, onFinished , keyValueX, keyValueY);

//将关键帧添加到时间轴中

timeline.getKeyFrames().add(keyFrame);

timeline.play();

timer.start();

}

public static void main(String[] args) {

Application.launch(args);

}

插值器(Interpolator)

插值(Interpolation)定义了对象在动作起始和结束点之间的位置。你可以使用Interpolator类的各种内置实现，或者你也可以自行实现Interpolator来自定义Interpolation行为。

内置 Interpolator

JavaFX提供了多种内置Interpolator，可以用于在你的动画中创建不同的特效。一般情况下，JavaFX使用线性Interpolator来计算坐标值。

例3-7展示了一个代码片段，其中内置Interpolator实例EASE_BOTH被添加到基本时间轴动画的KeyValue中。当对象达到起始点和结束点时这个Interpolator会创建了一个弹跳特效。

例3-7 内置interpolator

final Rectangle rectBasicTimeline = new Rectangle(100, 50, 100, 50);
rectBasicTimeline.setFill(Color.BROWN);
...
final Timeline timeline = new Timeline();
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.setAutoReverse(true);
final KeyValue kv = new KeyValue(rectBasicTimeline.xProperty(), 300,
 Interpolator.EASE_BOTH);
final KeyFrame kf = new KeyFrame(Duration.millis(500), kv);
timeline.getKeyFrames().add(kf);
timeline.play();

final Rectangle rectBasicTimeline = new Rectangle(100, 50, 100, 50);

rectBasicTimeline.setFill(Color.BROWN);

...

final Timeline timeline = new Timeline();

timeline.setCycleCount(Timeline.INDEFINITE);

timeline.setAutoReverse(true);

final KeyValue kv = new KeyValue(rectBasicTimeline.xProperty(), 300,

Interpolator.EASE_BOTH);

final KeyFrame kf = new KeyFrame(Duration.millis(500), kv);

timeline.getKeyFrames().add(kf);

timeline.play();

自定义插值器

除了内置Interpolators，你还可以实现你自己的Intepolator来自定义插值行为。一个自定义Interpolator样例包含两个java文件。例3-8展示了用于为动画计算y轴坐标值的自定义Interpolator。例3-9展示了使用AnimationBooleanInterpolator的代码片段。

例3-8 自定义Interpolator

public class AnimationBooleanInterpolator extends Interpolator {
    @Override
    protected double curve(double t) {
        return Math.abs(0.5-t)*2 ;
    }
}

public class AnimationBooleanInterpolator extends Interpolator {

@Override

protected double curve(double t) {

return Math.abs(0.5-t)*2 ;

}

例3-9 使用自定义Interpolator的动画

final KeyValue keyValue1 = new KeyValue(rect.xProperty(), 300);
AnimationBooleanInterpolator yInterp = new AnimationBooleanInterpolator();
final KeyValue keyValue2 = new KeyValue(rect.yProperty(), 0., yInterp);

final KeyValue keyValue1 = new KeyValue(rect.xProperty(), 300);

AnimationBooleanInterpolator yInterp = new AnimationBooleanInterpolator();

final KeyValue keyValue2 = new KeyValue(rect.yProperty(), 0., yInterp);

应用程序文件

NetBeans工程文件

● animation.zip

打赏一下

支付宝

微信

除非注明，博客文章均为原创，转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/08/animation-transition/

Animation Transition 动画过渡

百度已收录

JavaFX中文资料

DOC-08-03 动画基础

过渡(Transitions)

褪色过渡(Fade Transition)

路径过渡(Path Transition)

并行过渡(Parallel Transition)

串行过渡(Sequential Transition)

时间轴动画

基本的时间轴动画(Timeline Animation)

时间轴事件(Timeline Event)

插值器(Interpolator)

内置 Interpolator

自定义插值器

应用程序文件

JavaFX中文文档

近期文章

近期评论

标签