JavaFX体验——弹跳的视频球

最近体验了一把JavaFX。自己做了一个小小的Demo，自己把它称为“弹跳的视频球”。

效果如下：

简单写一下实现方法：

首先，建立一个fx文件，在其中放入一个Stage。顺带往里面添加一些属性

1. Stage{
2.     title: "Jumping Video"
3.     x:50
4.     y:10
5.     width: 300
6.     height: 315
7.     scene: Scene {
8.         fill: Color.rgb(255, 255, 255)
9.         width:300
10.         height:315
11.     }
12. }

然后定义一个Media对象，用于放置自己的视频文件信息

1. var m_path : String = "{__DIR__}huapi.flv";
2. var m_media : Media = Media{
3.     source: bind m_path
4. };

有了Media后，当然就要定义一个MediaPlayer对象，把其中的media属性绑定到刚才定义的m_media

1. var m_mediaPlay : MediaPlayer = MediaPlayer{
2.     media: bind  m_media
3.     autoPlay: true
4.     volume: 1;
5. };

接着再定义一个MediaView对象，把其中的mediaplayer属性绑定到前面定义的m_mediaPlay

1. var m_x2 : Number = 0;
2. var m_y : Number = 50;
3. var m_mediaView : MediaView = MediaView{
4.     mediaPlayer: bind m_mediaPlay;
5.     fitHeight: 250
6.     fitWidth: 300;
7.     x: bind m_x2;
8.     y: bind m_y - 120;
9.     smooth: true;
10. }

把这个m_mediaView放到我们的Stage当中的content之下：

1. Stage{
2.     title: "Jumping Video"
3.     x:50
4.     y:10
5.     width: 300
6.     height: 315
7.     scene: Scene {
8.         fill: Color.rgb(255, 255, 255)
9.         content: [m_mediaView]
10.         width:300
11.         height:315
12.     }
13. }

至此，就已经成功的视频文件放入我的程序当中播放了。

接下来就是要把这个原始的视频做成一个小“视频球”。其实，就是要在视频里切出一个圆形轮廓。

为此，首先要在程序中添加一个Arc对象：

1. var m_width : Number = 105;
2. var m_height : Number = 50;
3. var m_arc : Arc = Arc{
4.     centerX:150;
5.     centerY:bind m_y;
6.     radiusX:bind m_width;
7.     radiusY:bind m_height;
8.     startAngle: 0;
9.     length: 360
10.     type:ArcType.ROUND
11.     opacity:1
12.     visible:true
13. }

然后，修改m_mediaView中的代码，添加一行cilp属性：

1. var m_mediaView : MediaView = MediaView{
2.     mediaPlayer: bind m_mediaPlay;
3.     fitHeight: 250
4.     fitWidth: 300;
5.     x: bind m_x2;
6.     y: bind m_y - 120;
7.     smooth: true;
8.     clip:m_arc;
9. }

现在，这个“视频球”就算是像模像样了。

接下来，在程序当中添加3个Timeline实现“视频球”的上下弹跳动画：

1. var timeline1 : Timeline = Timeline {
2.     repeatCount: Timeline.INDEFINITE
3.     keyFrames: [
4.         KeyFrame {
5.             time: 0s
6.             values:{
7.                 m_y => 50 tween Interpolator.LINEAR;
8.             }
9.         }
10.         KeyFrame {
11.             time: 15s
12.             values:{
13.                 m_y => 250 tween Interpolator.LINEAR;
14.             }
15.         }
16.         KeyFrame {
17.             time: 17s
18.             values:{
19.                 m_y => 290 tween Interpolator.LINEAR;
20.             }
21.         }
22.         KeyFrame {
23.             time: 19s
24.             values:{
25.                 m_y => 250 tween Interpolator.LINEAR;
26.             }
27.         }
28.         KeyFrame {
29.             time: 34s
30.             values:{
31.                 m_y => 50 tween Interpolator.LINEAR;
32.             }
33.         }
34.     ]
35. };
36. var timeline2 : Timeline = Timeline {
37.     repeatCount: Timeline.INDEFINITE
38.     keyFrames: [
39.         KeyFrame {
40.             time: 0s
41.             values:{
42.                 m_height => 50 tween Interpolator.LINEAR;
43.             }
44.         }
45.         KeyFrame {
46.             time: 2s
47.             values:{
48.                 m_height => 90 tween Interpolator.LINEAR;
49.             }
50.         }
51.         KeyFrame {
52.             time: 15s
53.             values:{
54.                 m_height => 90 tween Interpolator.LINEAR;
55.             }
56.         }
57.         KeyFrame {
58.             time: 17s
59.             values:{
60.                 m_height => 50 tween Interpolator.LINEAR;
61.             }
62.         }
63.         KeyFrame {
64.             time: 19s
65.             values:{
66.                 m_height => 90 tween Interpolator.LINEAR;
67.             }
68.         }
69.         KeyFrame {
70.             time: 32s
71.             values:{
72.                 m_height => 90 tween Interpolator.LINEAR;
73.             }
74.         }
75.         KeyFrame {
76.             time: 34s
77.             values:{
78.                 m_height => 50 tween Interpolator.LINEAR;
79.             }
80.         }
81.     ]
82. };
83. var timeline3 : Timeline = Timeline {
84.     repeatCount: Timeline.INDEFINITE
85.     keyFrames: [
86.         KeyFrame {
87.             time: 0s
88.             values:{
89.                 m_width => 105 tween Interpolator.LINEAR;
90.             }
91.         }
92.         KeyFrame {
93.             time: 2s
94.             values:{
95.                 m_width => 90 tween Interpolator.LINEAR;
96.             }
97.         }
98.         KeyFrame {
99.             time: 15s
100.             values:{
101.                 m_width => 90 tween Interpolator.LINEAR;
102.             }
103.         }
104.         KeyFrame {
105.             time: 17s
106.             values:{
107.                 m_width => 105 tween Interpolator.LINEAR;
108.             }
109.         }
110.         KeyFrame {
111.             time: 19s
112.             values:{
113.                 m_width => 90 tween Interpolator.LINEAR;
114.             }
115.         }
116.         KeyFrame {
117.             time: 32s
118.             values:{
119.                 m_width => 90 tween Interpolator.LINEAR;
120.             }
121.         }
122.         KeyFrame {
123.             time: 34s
124.             values:{
125.                 m_width => 105 tween Interpolator.LINEAR;
126.             }
127.         }
128.     ]
129. };
130. timeline1.play();
131. timeline2.play();
132. timeline3.play();

至此，一个最为简单的“弹跳的视频球”出现了~~