Библиотеки SwifWeb: Animate.css
programming web css swift css-animation

Библиотеки SwifWeb: Animate.css

5 апреля 2023 г.

Анимация — это мощный инструмент, который может улучшить взаимодействие с пользователем на веб-сайте. При правильном использовании они могут сделать веб-сайт более привлекательным, интерактивным и интуитивно понятным. В этой статье мы рассмотрим библиотеку анимации для SwifWeb.

Я говорю о самой известной библиотеке animate.css. Давайте установим его и посмотрим, как им пользоваться!

Установка

Если вы новичок в SwifWeb, посмотрите, как создать новый проект в этой статье.

В проекте откройте Package.swift и отредактируйте раздел dependencies, чтобы он выглядел следующим образом:

dependencies: [
    // the rest of the other dependencies including swifweb/web
    .package(
        url: "https://github.com/swifweb/animate",
        from: "1.0.0"
    ),
]

Затем отредактируйте executableTarget, чтобы он выглядел следующим образом:

.executableTarget(name: "App", dependencies: [
    .product(name: "Web", package: "web"),
    .product(name: "Animate", package: "animate")
]),

Затем откройте App.swift, добавьте import Animate и настройте его в методе didFinishLaunching следующим образом:

Lifecycle.didFinishLaunching {
    Animate.configure()
}

:::подсказка Он не будет работать, если вы забудете его настроить.

:::

Использование

Все классы из оригинальной библиотеки находятся под капотом, а для пользователей SwiftWeb доступен очень удобный и красивый интерфейс Swift.

Cat image with jello animation

Возьмите любой элемент и добавьте к нему анимацию, которая будет запущена после добавления в DOM.

@DOM override var body: DOM.Content {
    Img()
        .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg")
        .width(400.px)
        .animate(.jello) // <- here we added jello animation
}

Или возьмите любой элемент на экране и добавьте к нему анимацию на лету:

lazy var img = Img()

@DOM override var body: DOM.Content {
    self.img
        .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg")
        .width(400.px)
    Button("Animate").onClick {
        self.img.animate(.jello) // <- here we animate
    }
}

:::информация Полный список анимаций доступен на сайте библиотеки https://animate.style

.

:::

Кроме того, вы можете установить параметры duration, delay и repeat.

.animate(.jello, delay: 0, duration: 1, repeat: 0)

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

В качестве альтернативы эти параметры можно установить с помощью отдельных методов:

.animateDelay(0)
.animateDuration(1)
.animateRepeat(0)

И вы также должны удалить эти значения вручную:

.removeAnimateDelay()
.removeAnimateDuration()
.removeAnimateRepeat()

Давайте поговорим подробнее о каждом варианте.

Задержка

Предопределенные значения удобства:

.delay0s // animation starts immediately
.delay1s // adds a 1-second delay
.delay2s // adds a 2-second delay
.delay3s // adds a 3-second delay
.delay4s // adds a 4-second delay
.delay5s // adds a 5-second delay

Создайте собственное значение удобства в расширении:

extension DelayValue {
    static var delay10s: Self { 10 } // adds a 10-second delay
}

Или вы можете использовать любое значение Float или Int, как в примерах выше.

Продолжительность

Предопределенные значения удобства:

.slow   // executes animation for 2 seconds
.slower // executes animation for 3 seconds
.fast   // executes animation for 0.8 seconds
.faster // executes animation for 0.5 seconds

Создайте собственное значение удобства в расширении:

extension DurationValue {
    static var verySlow: Self { 5 } // executes animation for 5s
}

Или вы можете использовать любое значение Float или Int, как в приведенных выше примерах.

Повторить

Предопределенные значения удобства:

.repeat1  // repeats animation once
.repeat2  // repeats animation twice
.repeat3  // repeats animation three times
.infinite // repeats animation infinitely

Создайте собственное значение удобства в расширении:

extension RepeatValue {
    static var repeat5: Self { 5 } // repeats animation five times
}

Или вы можете использовать любое значение Int, как в примерах выше.

Пример с удобными значениями

.animate(.jello, delay: .delay0s, duration: .slower, repeat: .repeat2)

И отдельные методы:

.animateDelay(.delay0s)
.animateDuration(.slower)
.animateRepeat(.repeat2)

Рекомендации

Анимация может значительно улучшить работу пользователя с веб-интерфейсом. Тем не менее, важно следовать некоторым рекомендациям, чтобы гарантировать, что опыт не будет иметь негативных последствий. Придерживаясь следующих правил, вы можете создать положительный старт.

Используйте осмысленную анимацию

Анимация должна передавать четкое намерение, а не просто быть декоративной. Избегайте использования привлекающих внимание анимаций исключительно из-за их кричащего характера; вместо этого используйте их, чтобы выделить что-то особенное в интерфейсе. Используйте анимацию входа и выхода, чтобы ориентировать пользователя в интерфейсе и сигнализировать о переходе в новое состояние.

Игривость — это хорошо, но будьте внимательны

Добавление игривости в интерфейс может быть полезным, но убедитесь, что анимация не мешает работе пользователя и не влияет на производительность страницы из-за чрезмерного использования.

Избегайте анимации больших элементов

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

Избегайте бесконечной анимации

Хотя animate.css предоставляет служебные классы для повторяющихся анимаций, в том числе бесконечных, рекомендуется избегать бесконечных анимаций. Эти анимации могут отвлекать пользователей и раздражать их, что приводит к отрицательному опыту. Поэтому используйте их с умом!

Подсказки

Вы не можете анимировать встроенные элементы

Анимация встроенных элементов не рекомендуется в соответствии со спецификациями анимации CSS и может работать не во всех браузерах. Вместо этого следует анимировать элементы уровня block или inline-block, включая контейнеры grid и flex и их дочерние элементы. Чтобы анимировать встроенный элемент, вы можете установить для его свойства display значение inline-block.

Переполнение

При анимации элементов на экране некоторые анимации Animate.css могут создавать полосы прокрутки на вашей веб-странице. Чтобы избежать этого, вы можете использовать свойство overflow: hidden в родительском элементе, содержащем анимированный элемент. Однако четкого рецепта, когда и как его использовать, не существует.

Интервалы между повторами

В настоящее время невозможно установить интервалы между повторами с помощью чистого CSS.

Но это возможно с помощью прослушивателя событий `.animationEnd`:

Img()
    .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg")
    .width(400.px)
    .animate(.jello, delay: 0, duration: 2)
    .addEventListener(
        .animationEnd,
        options: .init(once: true)
    ) { event, element in
        Dispatch.asyncAfter(0.5) {
            element.animate(.jello, delay: 0, duration: 2)
        }
    }

Или еще удобнее:

Img()
    .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg")
    .width(400.px)
    .animate(.jello, delay: 0, duration: 2) { element in
        Dispatch.asyncAfter(0.5) {
            element.animate(.jello, delay: 0, duration: 2)
        }
    }

:::информация В обоих случаях анимация перезапускается с интервалом 500 мс.

:::

Это все

Да, эта библиотека компактная, но мощная!

Хотите узнать больше? Следите за новыми статьями!

:::подсказка Не стесняйтесь задавать любые вопросы в нашем Discord и не стесняйтесь вносить свой вклад!< /p>

:::

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE