javafx實現(xiàn)圖片3D翻轉(zhuǎn)效果方法實例

更新時間：2013年04月17日 11:28:11 作者：

程序?qū)崿F(xiàn)思路: 在javafx中Node對象有一個effect屬性，可以用于實現(xiàn)各種特效。PerspectiveTransform特效可以使Node對象實現(xiàn)透視變換。因此我們可以通過計算透視變換中每個點的位置來實現(xiàn)3D翻轉(zhuǎn)特效。

實現(xiàn)步驟: 1、定義FlipView對象。包含以下屬性:

復(fù)制代碼代碼如下:

    //正面視圖 
public Node frontNode; 
//反面視圖 
public Node backNode; 
//是否翻轉(zhuǎn) 
boolean flipped = false; 
//翻轉(zhuǎn)角度 
DoubleProperty time = new SimpleDoubleProperty(Math.PI / 2); 
//正面翻轉(zhuǎn)特效 
PerspectiveTransform frontEffect = new PerspectiveTransform(); 
//反面翻轉(zhuǎn)特效 
PerspectiveTransform backEffect = new PerspectiveTransform();

create方法返回需要顯示的內(nèi)容:

復(fù)制代碼代碼如下:

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

以上代碼需要注意的是: 隨著time值的變化frontEffect和backEffect的值也會隨著變換。 2、PerspectiveTransform特效的實現(xiàn)使用了Math.sin()和Math.cos()方法模擬3D角度變換。具體實現(xiàn)如下:

復(fù)制代碼代碼如下:

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、角度變換在1秒的時間內(nèi)從3.14/2變換到-3.14/2。

復(fù)制代碼代碼如下:

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、FlipView對象的創(chuàng)建:通過構(gòu)造函數(shù)可以很方便的創(chuàng)建FlipView對象.

復(fù)制代碼代碼如下:

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、效果圖: