Статьи

Введение в библиотеку анимации Trident

Апрель 20, 2019

Когда дело доходит до создания впечатляющих, богатых анимацией пользовательских интерфейсов на рабочем столе, разработчики Java не совсем избалованы выбором. Конечно, у нас есть JavaFX, который позволяет использовать приятные интерфейсы для работы с рядом устройств. Но для тех из нас, кто использует существующие интерфейсы на основе Swing или SWT без времени на перенос, мы начинаем чувствовать себя позади. Так было до тех пор, пока в начале этого года я не наткнулся на проект Trident  , разработанный Кириллом Гручниковым. 

Сегодня я представлю краткое введение в Trident и его концепцию временной шкалы.

Что такое трезубец?

По словам Кирилла:

«Цель Trident — упростить разработку богатых эффектов анимации в приложениях пользовательского интерфейса на основе Java с учетом как простых, так и сложных сценариев»

Trident предоставляет API для добавления временных шкал и ключевых кадров для анимации пользовательского интерфейса. Помимо возможности подключения к любой среде пользовательского интерфейса, предоставляются полные реализации для SWT и Swing.

Начало работы с Trident

Прежде всего вы захотите загрузить последнюю версию библиотеки с сайта Kenai . Для этого примера я взял версию 1.1 . Все, что вам нужно для интеграции Trident в ваше приложение, — это trident.jar. Я работаю с Eclipse в качестве среды разработки — вам нужно добавить библиотеку Trident в путь сборки вашего приложения.

В этом примере я собираюсь сосредоточиться на SWT, хотя вы также можете использовать Trident с Swing. Поскольку я создал отдельное Java-приложение, вам нужно включить SWT-файл в путь сборки. Чтобы получить файл SWT, просто перейдите в каталог плагинов вашей установки Eclipse и возьмите копию org.eclipse.swt.win32.win32.x86_ <версия> .jar.

Вы также можете загрузить весь исходный код, включая код для примеров приложений, как часть файла Trident-all.zip .

Трайдент Временные шкалы

Как и следовало ожидать от библиотеки анимации, Trident основан на временных шкалах. Прекрасным примером этого является ShapesFrame, находящийся в пакете test.swt (или test.swing, если вы предпочитаете это). Когда он работает, градиентный фон оболочки непрерывно изменяется от диапазонов синего до зеленого.

Поскольку мы запускаем временную шкалу над пользовательским интерфейсом, вам нужно создать экземпляр org.eclipse.swt.widgets.Canvas .

public static class ShapesPanel extends Canvas {

   
Теперь вам нужно указать переменную, которая будет изменена в ходе анимации. В этом случае у нас есть две переменные, верхний и нижний цвет.

private Color topColor;
private Color bottomColor;

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

 // animate the gradient endpoint colors in an infinite timeline
    Timeline colorTimeline = new SWTRepaintTimeline(this);
    colorTimeline.addPropertyToInterpolate("topColor", COLOR_BLUE,
                    COLOR_GREEN);
    colorTimeline.addPropertyToInterpolate("bottomColor", COLOR_GREEN,
                    COLOR_BLUE);

Временная шкала, созданная здесь, представляет собой особую временную шкалу SWT, которая вызывает перерисовку. Когда создается любая временная шкала, она берет объект, с которым она связана. В этом случае мы просто проходим холст SWT.

Мы уже определили две переменные, которые мы будем изменять — topColor и bottomColor. После того, как вы предоставите публичные сеттеры для этих переменных, вы можете добавить их в качестве свойств для интерполяции на вашей временной шкале. Это предусмотрено в классе Timeline класса Trident, так что он принимает propertyName, а затем два других параметра (от и до)
    

    public final <T> void addPropertyToInterpolate(String propName, T from, T to)

Каждый раз, когда временная шкала пульсирует или просыпается, она будет изменять значения свойств, которые вы зарегистрировали. В то же время, когда он изменяет эти значения, все слушатели будут уведомлены. За кулисами, поскольку мы используем SWTRepaintTimeline, холст, который мы передали конструктору, автоматически передается в SWTRepaintCallback.
Метод onTimelinePulse будет вызываться для каждого импульса, который, в свою очередь, будет вызывать перерисовку.
Поскольку мы постепенно меняем значение свойств, на временной шкале мы будем видеть разные цвета для верха и низа в каждом импульсе.
    
Таким образом, чтобы играть через нашу временную шкалу, мы можем просто использовать следующий код
    

            colorTimeline.setDuration(1000);
            colorTimeline.playLoop(RepeatBehavior.REVERSE);

Если продолжительность временной шкалы будет сокращена, все будет происходить быстрее. Таким образом, чтобы сделать градиент более тонким, просто увеличьте продолжительность примерно до 3 секунд.

Собрав все это вместе, вы можете увидеть, что Trident предоставляет простой и понятный API. В этом примере мы только что увидели основные концепции временных шкал:

  • Создание новой временной шкалы, связанной с элементом управления SWT
  • Добавление полей для интерполяции 
  • Установка продолжительности временной шкалы и ее запуск.

В следующий раз мы рассмотрим некоторые другие функции Trident и увидим, как улучшить простые настольные приложения с помощью API.

38
Share: