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對象。包含以下屬性:
復制代碼 代碼如下:
//正面視圖
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)容:
復制代碼 代碼如下:
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)如下:
復制代碼 代碼如下:
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。
復制代碼 代碼如下:
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對象.
復制代碼 代碼如下:
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、效果圖:
相關文章
基于Spring接口集成Caffeine+Redis兩級緩存
這篇文章主要介紹了基于Spring接口集成Caffeine+Redis兩級緩存,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-07-07Spring?Boot深入學習數(shù)據(jù)訪問之Spring?Data?JPA與Hibernate的應用
Spring?Data?JPA是Spring?Data的子項目,在使用Spring?Data?JPA之前,先了解一下Hibernate,因為Spring?Data?JPA是由Hibernate默認實現(xiàn)的2022-10-10java枚舉enum,根據(jù)value值獲取key鍵的操作
這篇文章主要介紹了java枚舉enum,根據(jù)value值獲取key鍵的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2021-02-02