Пользовательские анимации

Библиотека Vex предназначена для создания динамичных и интерактивных уведомлений и всплывающих окон. Помимо стандартных анимаций, Vex предоставляет возможность интегрировать собственные анимации, чтобы улучшить взаимодействие с пользователем и адаптировать внешний вид всплывающих окон под индивидуальные потребности. В этой части рассмотрены способы создания и настройки пользовательских анимаций с использованием Vex.js.

Встроенная поддержка анимаций

Vex имеет встроенную поддержку анимаций для появления и исчезновения уведомлений. Однако иногда стандартных эффектов недостаточно, и требуется применить более сложные анимации, например, для перемещения окна или изменения его прозрачности. Это достигается через пользовательские анимации, которые можно настроить с помощью CSS или JavaScript.

Создание анимации с помощью CSS

Vex.js позволяет использовать собственные CSS-анимations или CSS-transitions для создания пользовательских эффектов. Для этого достаточно добавить необходимые стили к элементам уведомлений и указать их в конфигурации Vex.

Шаг 1: Определение CSS-анимации

Прежде чем применить анимацию, нужно определить её в CSS. Например, можно создать анимацию, которая будет плавно изменять прозрачность и перемещать уведомление вверх.

@keyframes customFadeIn {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes customFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(100px);
    }
}

Здесь анимация customFadeIn заставляет уведомление плавно появляться, начиная с полной прозрачности и смещения вниз. Анимация customFadeOut будет плавно скрывать уведомление, сдвигая его вниз и уменьшая прозрачность.

Шаг 2: Применение анимации к уведомлению

Для того чтобы использовать эту анимацию в Vex, необходимо указать её в конфигурации уведомления, задавая стили для появления и исчезновения. Это можно сделать с помощью параметра animation.

vex.dialog.alert({
    message: 'Это пользовательская анимация!',
    animation: {
        enter: 'customFadeIn 0.5s ease-out',
        exit: 'customFadeOut 0.5s ease-in'
    }
});

В данном примере уведомление будет появляться с использованием анимации customFadeIn и исчезать с использованием анимации customFadeOut. Время анимации для обоих эффектов — 0.5 секунды.

Анимации с использованием JavaScript

Иногда требуется больше контроля над анимацией, особенно если нужно реагировать на события или использовать более сложные анимации. Для этого можно использовать JavaScript в связке с Vex.js, а именно работать с его событиями и функциями обратного вызова (callbacks).

Шаг 1: Обработчики событий

Vex предоставляет несколько событий, которые можно использовать для запуска анимаций в нужный момент. Например, для запуска анимации при появлении или исчезновении окна можно использовать события afterOpen и afterClose.

vex.dialog.alert({
    message: 'Это анимация через JavaScript!',
    afterOpen: function() {
        // Здесь можно применить собственную анимацию через JavaScript
        const dialog = vex.getAll()[0];
        dialog.style.transition = 'transform 0.5s ease-out, opacity 0.5s ease-out';
        dialog.style.transform = 'translateY(0)';
        dialog.style.opacity = '1';
    },
    afterClose: function() {
        const dialog = vex.getAll()[0];
        dialog.style.transition = 'transform 0.5s ease-in, opacity 0.5s ease-in';
        dialog.style.transform = 'translateY(100px)';
        dialog.style.opacity = '0';
    }
});

Здесь мы используем функцию afterOpen, чтобы настроить начальную анимацию, когда уведомление появляется. В afterClose задается анимация для скрытия уведомления. Это позволяет гибко управлять анимациями с помощью JavaScript.

Шаг 2: Анимация с использованием requestAnimationFrame

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

vex.dialog.alert({
    message: 'Анимация с requestAnimationFrame',
    afterOpen: function() {
        const dialog = vex.getAll()[0];
        let start = null;
        const duration = 500;

        function animate(time) {
            if (!start) start = time;
            const progress = time - start;
            const opacity = Math.min(progress / duration, 1);
            const transform = Math.min(progress / duration * 100, 100);
            
            dialog.style.opacity = opacity;
            dialog.style.transform = `translateY(${100 - transform}px)`;

            if (progress < duration) {
                requestAnimationFrame(animate);
            }
        }

        requestAnimationFrame(animate);
    }
});

В этом примере анимация выполняется с использованием requestAnimationFrame, где прогресс анимации рассчитывается на основе времени и плавно изменяет прозрачность и положение элемента.

Работа с плагинами и внешними библиотеками

Для улучшения функциональности анимаций в Vex можно интегрировать сторонние библиотеки для анимаций, такие как GSAP или Anime.js. Эти библиотеки обеспечивают более мощные и гибкие возможности для создания анимаций, включая поддержку сложных временных линий, различных эффектов и реакций на события.

Пример использования GSAP:

vex.dialog.alert({
    message: 'Анимация с использованием GSAP!',
    afterOpen: function() {
        const dialog = vex.getAll()[0];
        gsap.from(dialog, { opacity: 0, y: 100, duration: 0.5 });
    },
    afterClose: function() {
        const dialog = vex.getAll()[0];
        gsap.to(dialog, { opacity: 0, y: 100, duration: 0.5 });
    }
});

В данном примере используется библиотека GSAP для анимации появления и исчезновения уведомлений с настройкой времени и направления анимации.

Заключение

Использование пользовательских анимаций в Vex.js предоставляет широкий спектр возможностей для создания уникальных и динамичных уведомлений. Библиотека поддерживает как простые CSS-анимации, так и более сложные сценарии с использованием JavaScript и сторонних библиотек. Благодаря гибкости и расширяемости, можно достичь различных визуальных эффектов и улучшить пользовательский опыт.

Оглавление