javafx实现图片3D翻转效果方法实例
程序员文章站
2023-12-13 13:52:28
实现步骤: 1、定义flipview对象。包含以下属性:复制代码 代码如下: //正面视图 public node frontnode;...
实现步骤: 1、定义flipview对象。包含以下属性:
复制代码 代码如下:
//正面视图
public node frontnode;
//反面视图
public node backnode;
//是否翻转
boolean flipped = false;
//翻转角度
doubleproperty time = new simpledoubleproperty(math.pi / 2);
//正面翻转特效
perspectivetransform fronteffect = new perspectivetransform();
//反面翻转特效
perspectivetransform backeffect = new perspectivetransform();
create方法返回需要显示的内容:
复制代码 代码如下:
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特效的实现使用了math.sin()和math.cos()方法模拟3d角度变换。 具体实现如下:
复制代码 代码如下:
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秒的时间内从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对象的创建:通过构造函数可以很方便的创建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、效果图: