На этот раз я попытаюсь рассказать об эффектах в JavaFX.
Как ни странно, но эффекты в JavaFX — это просто :)
(осторожно, иллюстрации)
Для начала сделаем заготовку, над которой и будем в последствии глумиться:
Если запустить этот код, то мы увидим простое окошко с красным кругом: ничего удивительного, другого ведь мы и не ожидали увидеть.
Теперь давайте применим какой-нибудь простенький эффект, например, размытие по Гауссу:
Если мы запустим, то увидим размытый круг. Как видно, мы добавили всего три строчки и легко получили размытие.
Давайте усложним задачу. Что если мы хотим применить эффект ко многим элементам? Тогда у нас два пути.
Во-первых, мы всегда можем указать эффект для каждого из элементов. Во-вторых, мы всегда можем объединить элементы в группу и применить эффект к ней, а не к отдельным элементам.
Запустив получим размытый круг и работающую размытую кнопку.
Теперь, давайте добавим немного динамики. Для управления процессами, протекающими во времени в JavaFX предусмотрено специальное средство — таймлайн (Timeline).
Попробуем добиться плавного изменения эффекта размытия с течением времени.
Добавим переменную blurRadius, значение которой будет меняться с течением времени:
Теперь создадим таймлайн:
Здесь мы определяем, что таймлайн выполняется «вечно». autoReverse позволяет прокручивать анимацию назад после того, как она выполнится.
Далее мы определяем опорные точки, а вернее, опорные кадры. Таким образом мы определяем, что на 1й секунде значение переменной blurRadius должно стать равно 9 и с течением времени переменная должна приближаться к этой величине по линейной зависимости.
Теперь свяжем эффект размытия с нашей переменной blurRadius:
Всё, теперь объедим всё вместе, и не забудем запустить наш таймлайн (вызовом метода .play()):
Когда мы запустим этот код, то получим анимированное окно.
Но, что мы привязались к Гауссу? Попробуем что-нибудь ещё.
Также, в JavaFX есть ещё несколько эффектов, среди них эффект свечения, искажения, свечения, тени и т.д.:
На этом мой беглый рассказ про эффекты в JavaFX подошёл к концу.
Удачи.
CG.
Как ни странно, но эффекты в 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.