Javafx implements an example of 3D image flip effect method

1. Define the FlipView object. Contains the following properties:

    //Positive view
public Node frontNode; 
//The opposite view
public Node backNode; 
//Whether to flip
boolean flipped = false; 
//Flip Angle
DoubleProperty time = new SimpleDoubleProperty(Math.PI / 2); 
//Front flip effect
PerspectiveTransform frontEffect = new PerspectiveTransform(); 
//Reverse flip effect
PerspectiveTransform backEffect = new PerspectiveTransform();

  The create method returns what needs to be displayed:

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); 
    }

Note that the values of frontEffect and backEffect change as the time value changes. 2. The methods of math.sin () and math.cos () are used to simulate 3D Angle transform. The specific implementation is 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. Angle transformation from 3.14/2 to -3.14/2 in 1 second.

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: it is easy to create FlipView objects through the constructor.

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. Effect drawing:

< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201304/2013417112519230.jpg" >