用sin,cos函数创建一个真实的水波动画

package waveanim;

import javafx.stage.Stage;
import javafx.scene.Scene;
import java.lang.Math;
import javafx.scene.*;
import javafx.scene.effect.*;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import java.lang.Math.*;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;

/**
* @author Administrator
*/

var w = 300;
var h = 274;
var map:FloatMap;
//amplitude
var A:Number = 1/200.0;
//frequency
var f:Number = 0.08;
//horizontal phase angle
var upangle:Number = 90;
//vertical phase angle
var vpangle:Number = 0 on replace {
map = FloatMap { width: w height: h };
for (i:Integer in [0..w-1]) {
var u = A*cos(i*f + upangle);
for (j:Integer in [0..h-1]) {
var v = A*sin(j*f + vpangle);
map.setSamples(i, j, u, v);
}
}
};

Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames : [
KeyFrame {
time : 150ms
action: function() {
upangle ++;
vpangle ++;
}
}
]
}.play();

Stage {
title: "水波动画"
width: 285
height: 290
scene: Scene {
content: [
ImageView {
effect: DisplacementMap { mapData: bind map }
x: -2
y: -2
image: Image {
url: "{__DIR__}flower.jpg"
}
}
]
}
}
把图形文件同源程序放在同一个目录中，试一试！

波动的原理见第二个图，这是水面的横截面，每个质点都绕着自已的中心做园规迹的运动，
如果从上向下看，也就是从水面上看，质点都在中心左右来回摆动.
和序如下，
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import java.lang.Math.*;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.scene.shape.Line;
/**
* @author Administrator
*/
var t:Number = 0;
Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames : [
KeyFrame {
time : 100ms
action: function() {
t+=1;
}
}
]
}.play();


Stage {
title: "水波原理"
width: 450
height: 180
scene: Scene {
content: [
for (i in [0..16])
Circle {
centerX: 15+i*25
centerY: 50
radius: 12.5
strokeDashOffset: 2
strokeDashArray: [4]
fill: null
stroke: Color.GRAY
},
for (i in [0..16])
Circle {
fill: Color.MAGENTA
centerX: bind 15+i*25 + 12.5*cos(i*0.5 + t)
centerY: bind 50 + 12.5*sin(i*0.5 + t)
radius: 3

}
for (i in [0..16])
Line {
startX: 15+i*25
startY: 50
endX: bind 15+i*25 + 12.5*cos(i*0.5 + t)
endY: bind 50 + 12.5*sin(i*0.5 + t)
strokeWidth: 1
stroke: Color.GRAY
}


]
}
}
也可做成园形的波动，水波向外传播。见图3
javafx站点有个RippleEffect虽然也是用sin, cos但两者的效果如何自已去比较了.