Эффекты в JavaFX — быстрый старт

На этот раз я попытаюсь рассказать об эффектах в JavaFX.

Как ни странно, но эффекты в JavaFX — это просто :)

(осторожно, иллюстрации)



Для начала сделаем заготовку, над которой и будем в последствии глумиться:

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;

Stage {
    title: "Effects"
    scene: Scene {
        width: 250
        height: 80
        content: [
            Circle {
                translateX: 40
                translateY: 40
                radius: 15
                fill: Color.RED
            }
        ]
    }
}


Если запустить этот код, то мы увидим простое окошко с красным кругом: ничего удивительного, другого ведь мы и не ожидали увидеть.



Теперь давайте применим какой-нибудь простенький эффект, например, размытие по Гауссу:

package tiny;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.effect.GaussianBlur;

Stage {
    title: "Effects"
    scene: Scene {
        width: 250
        height: 80
        content: [
            Circle {

                effect: GaussianBlur {
                    radius: 9
                }

                translateX: 40
                translateY: 40
                radius: 15
                fill: Color.RED
            }
        ]
    }
}


Если мы запустим, то увидим размытый круг. Как видно, мы добавили всего три строчки и легко получили размытие.



Давайте усложним задачу. Что если мы хотим применить эффект ко многим элементам? Тогда у нас два пути.
Во-первых, мы всегда можем указать эффект для каждого из элементов. Во-вторых, мы всегда можем объединить элементы в группу и применить эффект к ней, а не к отдельным элементам.

package tiny;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.Group;
import javafx.scene.control.Button;

Stage {
    title: "Effects"
    scene: Scene {
        width: 250
        height: 80
        content: [
            Group {
                effect: GaussianBlur {
                    radius: 5
                }

                content: [
                    Circle {
                        translateX: 40
                        translateY: 40
                        radius: 15
                        fill: Color.RED
                    },
                    Button {
                        translateX: 5
                        translateY: 15
                        text: "Clickme"
                    }

                ]
            }
        ]
    }
}


Запустив получим размытый круг и работающую размытую кнопку.



Теперь, давайте добавим немного динамики. Для управления процессами, протекающими во времени в JavaFX предусмотрено специальное средство — таймлайн (Timeline).

Попробуем добиться плавного изменения эффекта размытия с течением времени.

Добавим переменную blurRadius, значение которой будет меняться с течением времени:

var blurRadius : Number = 0;


Теперь создадим таймлайн:

Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse: true

    keyFrames: [
        KeyFrame {
            time: 1s
            values:
                blurRadius => 9 tween Interpolator.LINEAR
        }
    ]
}.play();


Здесь мы определяем, что таймлайн выполняется «вечно». autoReverse позволяет прокручивать анимацию назад после того, как она выполнится.
Далее мы определяем опорные точки, а вернее, опорные кадры. Таким образом мы определяем, что на 1й секунде значение переменной blurRadius должно стать равно 9 и с течением времени переменная должна приближаться к этой величине по линейной зависимости.

Теперь свяжем эффект размытия с нашей переменной blurRadius:

effect: bind GaussianBlur {
                    radius: blurRadius
                }


Всё, теперь объедим всё вместе, и не забудем запустить наш таймлайн (вызовом метода .play()):

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.Group;
import javafx.scene.control.Button;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;

var blurRadius : Number = 0;

Stage {
    title: "Effects"
    scene: Scene {
        width: 250
        height: 80
        content: [
            Group {
                effect: bind GaussianBlur {
                    radius: blurRadius
                }

                content: [
                    Circle {
                        translateX: 40
                        translateY: 40
                        radius: 15
                        fill: Color.RED
                    },
                    Button {
                        translateX: 5
                        translateY: 15
                        text: "Clickme"
                    }

                ]
            }
        ]
    }
};

Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse: true

    keyFrames: [
        KeyFrame {
            time: 1s
            values:
                blurRadius => 9 tween Interpolator.LINEAR
        }
    ]
}.play();


Когда мы запустим этот код, то получим анимированное окно.


Но, что мы привязались к Гауссу? Попробуем что-нибудь ещё.

package tiny;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.Group;
import javafx.scene.control.Button;
import javafx.scene.effect.Reflection;

Stage {
    title: "Effects"
    scene: Scene {
        width: 200
        height: 100
        content: [
            Group {
                effect: Reflection {
                    fraction: 0.75
                    topOffset: 0.0
                    topOpacity: 0.5
                    bottomOpacity: 0.0
                }

                content: [
                    Circle {
                        translateX: 40
                        translateY: 40
                        radius: 15
                        fill: Color.RED
                    },
                    Button {
                        translateX: 5
                        translateY: 15
                        text: "Clickme"
                    }

                ]
            }
        ]
    }
};


Также, в JavaFX есть ещё несколько эффектов, среди них эффект свечения, искажения, свечения, тени и т.д.:


На этом мой беглый рассказ про эффекты в JavaFX подошёл к концу.

Удачи.

CG.