Implementation steps: 1. Define the FlipView object. Contains the following properties:
Copy the code code as follows:
//Front view
public Node frontNode;
//reverse view
public Node backNode;
//Whether to flip
boolean flipped = false;
//flip angle
DoubleProperty time = new SimpleDoubleProperty(Math.PI / 2);
//Front flip special effect
PerspectiveTransform frontEffect = new PerspectiveTransform();
//Reverse flip special effect
PerspectiveTransform backEffect = new PerspectiveTransform();
The create method returns the content to be displayed:
Copy the code code as follows:
private void create() {
time.addListener(new ChangeListener() {
@Override
public void changed(ObservableValue<? extends Number> arg0,
Number arg1, Number arg2) {
setPT(frontEffect, time.get());
setPT(backEffect, time.get());
}
});
anim.getKeyFrames().addAll(frame1, frame2);
backNode.visibleProperty().bind(
Bindings.when(time.lessThan(0)).then(true).otherwise(false));
frontNode.visibleProperty().bind(
Bindings.when(time.lessThan(0)).then(false).otherwise(true));
setPT(frontEffect, time.get());
setPT(backEffect, time.get());
frontNode.setEffect(frontEffect);
backNode.setEffect(backEffect);
getChildren().addAll(backNode, frontNode);
}
What needs to be noted in the above code is that as the time value changes, the values of frontEffect and backEffect will also change. 2. The implementation of the PerspectiveTransform special effect uses the Math.sin() and Math.cos() methods to simulate 3D angle transformation. The specific implementation is as follows:
Copy the code code as follows:
private void setPT(PerspectiveTransform pt, double t) {
double width = 200;
double height = 200;
double radius = width / 2;
double back = height / 10;
pt.setUlx(radius - Math.sin(t) * radius);
pt.setUly(0 - Math.cos(t) * back);
pt.setUrx(radius + Math.sin(t) * radius);
pt.setUry(0 + Math.cos(t) * back);
pt.setLrx(radius + Math.sin(t) * radius);
pt.setLry(height - Math.cos(t) * back);
pt.setLlx(radius - Math.sin(t) * radius);
pt.setLly(height + Math.cos(t) * back);
}
3. The angle transformation changes from 3.14/2 to -3.14/2 in 1 second.
Copy the code code as follows:
KeyFrame frame1 = new KeyFrame(Duration.ZERO, new KeyValue(time,
Math.PI / 2, Interpolator.LINEAR));
KeyFrame frame2 = new KeyFrame(Duration.seconds(1),
new EventHandler() {
@Override
public void handle(ActionEvent event) {
flipped = !flipped;
}
}, new KeyValue(time, -Math.PI / 2, Interpolator.LINEAR));
4. Creation of FlipView objects: FlipView objects can be easily created through the constructor.
Copy the code code as follows:
ImageView image1 = new ImageView(new Image(getClass()
.getResourceAsStream("lion1.png")));
ImageView image2 = new ImageView(new Image(getClass()
.getResourceAsStream("lion2.png")));
FlipView flip = new FlipView(image1, image2);
5. Rendering:
