Bắt đầu với Công nghệ JavaFX Sử dụng Eclipse IDE (Phần 3)

Trong phần này, bạn thêm opacity và hình ảnh động mà thay đổi các mặt cầu của opacity.
Trong trình soạn thảo mã nguồn, và thêm những biến opacity ở đầu nguồn tập tin và đặt giá trị ban đầu của nó đến 1.0, như được hiển thị ở đây in đậm.

import javafx.scene.paint.Color;

import javafx.scene.paint.RadialGradient;

import javafx.scene.paint.Stop;

var opacity = 1.0;

Biến này được sử dụng trong thời gian hoạt hình mà bạn tạo sau này.

Thêm biến dụ opacity cho đối tượng Circle sơ thẩm và ràng buộc này để biến các biến toàn cầu opacity như được in đậm trong ví dụ mã sau đây.

Circle {

    centerX: 100,

    centerY: 100,

    radius: 90,

    opacity: bind opacity

    fill: RadialGradient {

          centerX: 75

          centerY: 75

          radius: 90

          proportional: false

          stops: [

               Stop {

                    offset: 0.0

                    color: Color.web("#3B8DED")

               },

          Stop {

                offset: 1.0

                color: Color.web("#044EA4")

          }

      ] // stops

    } // RadialGradient

} //Circle

Mở rộng phần Ảnh động trong xem đoạn, chọn Thời gian biểu, và kéo đoạn mã Thời gian biểu cho dòng ngay trên các khối mã Stage như thể hiện trong hình dưới đây.

Hoạt hình xảy ra cùng một thời gian, đại diện bởi một đối tượng javafx.animation.Timeline Dòng thời gian chứa một hay nhiều khung chính, đại diện bởi các đối tượng javafx.animation.KeyFrame Để biết thêm thông tin về hoạt hình,. Thấy Tạo đối tượng hoạt hình, một bài học trong xây dựng giao diện ứng dụng với JavaFX.

Trong hộp thoại Insert Tiêu bản cho Thời gian biểu, thay đổi giá trị của các biến Ví dụ time từ 1s đến 5s và nhấn Insert.

Các Timeline tượng chữ xuất hiện như được hiển thị ở đây.

Timeline {

        repeatCount: Timeline.INDEFINITE,

        keyFrames : [

             KeyFrame {

                    time : 5s,

                    canSkip: true

             } // KeyFrame

        ] // keyFrames

} // Timeline

Dòng thời gian này lặp đi lặp lại vô thời hạn trên một năm thứ hai khoảng. Giá trị của các biến Ví dụ time năm giây, xác định thời gian trôi qua mà tại đó các giá trị trong khung chính sẽ được đặt trong một chu trình đơn của các đối tượng Timeline. Hai người tiếp theo của các bước của hướng dẫn này xác định những giá trị mà sẽ được thiết lập.

Kéo Ảnh động> clip mã giá trị từ các đoạn nhằm dòng chỉ sau khi biến canSkip

Values xác định danh sách các biến mục tiêu và các giá trị mong muốn rằng họ nên suy tại thời chỉ định của KeyFrame

Trong hộp thoại Insert Tiêu bản cho các giá trị, thay đổi các giá trị của value từ 0.0 đến 0.2 và giá trị của variable đến opacity

Mã số này thay đổi độ mờ của hình cầu.

Click vào Insert. Các biến values hiện nay như được hiển thị ở đây in đậ

Timeline {

        repeatCount: Timeline.INDEFINITE,

        KeyFrames : [

              KeyFrame {

                     time : 5s,

                     canSkip: true

                     values : [

                             opacity => 0.2 tween Interpolator.LINEAR

                     ] // values

              } // KeyFrame

        ] // keyFrames

} // Timeline

Giá trị mong muốn của các biến opacity được định nghĩa trong năm thứ hai khoảng của khung chính. Các nhà điều hành cung cấp một constructor chữ (một ký hiệu đặc biệt) mà làm cho nó dễ dàng hơn để thể hiện trong danh sách các khóa-giá trị nội suy hoặc tài sản đối tượng.

Trong trường hợp này, các nhà điều hành tween xây dựng các giá trị nội suy cho opacity giữa 1,0 và 0,2 để tạo ra sự thay đổi dần dần trong opacity của hình cầu.
Thay đổi giá trị xen vào từ LINEAR để EASEBOTH. Các Interpolator.EASEBOTH là xây dựng trong xen vào dụ cung cấp để dễ-in và dễ dàng ra hành vi.

Thêm một ví dụ Key Frame để cung cấp một sự thay đổi của độ đục từ 0.2 đến 1.0 trong năm thứ hai sau khoảng thời. Sao chép khối Key Frame mã thứ hai đó là được in đậm trong ví dụ mã sau và dán nó ngay dưới các Key Frame đầu tiên đối tượng như được hiển thị tiếp theo.

Timeline {

      repeatCount: Timeline.INDEFINITE,

      keyFrames : [

            KeyFrame {

                  time : 5s,

                  canSkip: true

                  values : [

                        opacity => 0.2 tween Interpolator.EASEBOTH

                  ] // values

            } // KeyFrame

            KeyFrame {

                   time : 10s,

                   canSkip: true

                   values : [

                           opacity => 1.0 tween Interpolator.EASEBOTH

                   ] // values

            } // KeyFrame

      ] // keyFrames

} // Timeline

.play(); đến hết các đối tượng khai báo Timeline như được in đậm trong ví dụ mã sau đây.
Các play() phương thức đóng các dòng thời gian như được định nghĩa. Các đối tượng Timeline hoàn thành được hiển thị ở đây.

Timeline {
      repeatCount: Timeline.INDEFINITE,
      keyFrames: [
             KeyFrame {
             time: 5s,
             canSkip: true
             values : [
                   opacity => 0.2 tween Interpolator.EASEBOTH
             ] // values
      } // KeyFrame
      KeyFrame {
            time: 10s,
            canSkip: true
            values : [
                      opacity => 1.0 tween Interpolator.EASEBOTH
            ] // values
      } // KeyFrame
] // keyFrames
}.play();

Lưu các thay đổi mới nhất mà bạn đã thực hiện, chọn nút Main.fx trong Package Explorer, nhấp vào mũi tên thả xuống bên cạnh biểu tượng Run Khởi Biểu tượng trên thanh công cụ chính on the main toolbar, and select gstutorial.Main from the list. trên thanh công cụ chính, và gstutorial.Main chọn từ danh sách.

Bạn vừa tạo đầu tiên ứng dụng JavaFX động của bạn.