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

vue-kinesis

сначала это vue-kinesis,Это сильная большая библиотека анимации.,Он содержит ряд компонентов,Разрешите нам добавить интерактивную анимацию в нашу Vue в приложении. Эта библиотека естественным образом будет реагировать на изменения курсора и вызывать анимацию на основе событий мыши, но, что интересно, vue-kinesis Также позволяет нам управлять анимацией на основе изменений звука.

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

Установить

vue-kinesis Доступно для Vue 2 и Vue 3. Чтобы включить эту библиотеку в Vue 3 В проекте,сначала должен Установить Сумка：

npm install vue-kinesis@next

Затем импортируйте его в файл следующим образом:

import { createApp } from "vue";
import App from "./App.vue";
import VueKinesis from "vue-kinesis";

const app = createApp(App);
app.use(VueKinesis);

app.mount("#app");

Вы также можете установить Vue 2 Версия:

npm install vue-kinesis

Затем выберите импорт всей библиотеки, чтобы ее можно было использовать в любом месте вашего проекта:

// src/main.js
import Vue from 'vue'
import VueKinesis from 'vue-kinesis'

Vue.use(VueKinesis);

Или просто импортируйте конкретный компонент:

import { KinesisContainer } from 'vue-kinesis'

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

Эта библиотека состоит из трех компонентов, каждый из которых имеет свои свойства для управления потоком взаимодействия:

• Kinesis-container — Компонент-оболочка, используемый для отключения или включения взаимодействия. Кроме того, для дополнительного запуска события анимации поддерживается движение (взаимодействие с мышью) и прокрутка. Однако мобильные устройства не поддерживают move событие
• Kinesis-element — Компонент-оболочка для анимируемого элемента и указание типа или источника анимации.
• Kinesis-audio — Этот компонент используется для указания при добавлении источника звука в kinesis Звуковая частота, на которую будет реагировать, когда контейнер

Пример:

<template>
  <div id="app">
    <kinesis-container>
      Here, you can put
      <kinesis-element :strength="10"> whatever </kinesis-element>
      <kinesis-element :strength="20"> content! </kinesis-element>
    </kinesis-container>
  </div>
</template>

<script>
import { KinesisContainer, KinesisElement } from "vue-kinesis";
export default {
  name: "App",
  components: {
    KinesisContainer,
    KinesisElement,
  },
};
</script>

Выход:

Аналогично, вот что вам нужно знать об аудио:

<template>
  <div id="app">
    <div class="main">
      <div style="padding: 40px">
        <button class="play-button" @click="togglePlaying">
          {{ isPlaying ? "Stop" : "Play" }}
        </button>
      </div>
      <div style="padding: 40px">
        <kinesis-container :audio="audioFile" :playAudio="isPlaying">
          <kinesis-audio :audioIndex="50" type="scale">
            <kinesis-element :strength="10" type="depth">
              <div class="circle"></div>
            </kinesis-element>
          </kinesis-audio>
        </kinesis-container>
      </div>
    </div>
  </div>
</template>

<script>
import { KinesisContainer, KinesisElement, KinesisAudio } from "vue-kinesis";
export default {
  name: "App",
  components: {
    KinesisContainer,
    KinesisElement,
    KinesisAudio,
  },
  data() {
    return {
      audioFile: require("./aud.mp3"),
      isPlaying: false,
    };
  },
  methods: {
    togglePlaying() {
      this.isPlaying = !this.isPlaying;
    },
  },
};
</script>

Выход:

В этом примере мы определили путь к аудиофайлу и прикрепили его к kinesis-container, и, поскольку при этом запускается компонент kinesis-audio, мы поместили внутри него квадратный div, чтобы при каждом нажатии кнопки, переключающей воспроизведение, div реагирует.

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

vue-prix

vue-prix это еще один замечательный vue анимация Библиотека,Изображения можно легко добавитьЭффект прокрутки параллакса。существовать Параллакс Эффектсередина,И изображение переднего плана, и его элементы фона перемещаются.,Но фон движется гораздо медленнее,Это создает иллюзию глубины.

Установить

npm i vue-prlx

Затем инициализируйте его в нашем входном файле:

// src/main.js

import Vue from 'vue'

import VuePrlx from 'vue-prlx'
Vue.use(VuePrlx);

Альтернативно, добавьте через их CDN следующим образом:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-prlx/dist/v-prlx.min.js"></script>

<script>
Vue.use(VuePrlx.VuePrlxPlugin);
</script>

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

Просто добавьте новый в тег изображения v-prlx Свойства, эффект параллакса начнется немедленно:

<img src="path/to/img" v-prlx>

На мобильных устройствах эффект параллакса отключен по умолчанию. Однако вы можете изменить .mobile добавить к v-prlx Свойства, позволяющие легко его включить:

<img src="path/to/img" v-prlx.mobile>

Кроме того, предоставляя дополнительные объекты, мы можем установить скорость параллакса, изменить его направление и многое другое:

<img
  src="path/to/img"
  v-prlx="{ reverse: true, speed: 0.2, fromBottom: true }"
/>

В веб-приложениях к избранным (боковым) изображениям часто добавляются эффекты параллакса.

vue-fake3D-image

Это еще один легкий Vue библиотека, которая позволяет нам Vue 应用程序середина为图像添加模拟的Интерактивные 3D-эффекты。и,В отличие от некоторых других библиотек анимации, которые мы обсуждали,Это SSR Совместимо, что означает, что его можно использовать с рендерингом на стороне сервера.

Установить

npm install @luxdamore/vue-fake3d-image-effect

Чтобы начать добавлять 3D-эффекты в наши файлы изображений, нам нужно импортировать компонент Fake3dImageEffect вместе с файлом CSS библиотеки:

import { Fake3dImageEffect } from "@luxdamore/vue-fake3d-image-effect";
import "@luxdamore/vue-fake3d-image-effect/dist/Fake3dImageEffect.css";

export default {
  components: {
    "fake3d-image-effect": Fake3dImageEffect,
  },
};

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

// src/main.js
import Fake3dImageEffect from "@luxdamore/vue-fake3d-image-effect";
import "@luxdamore/vue-fake3d-image-effect/dist/Fake3dImageEffect.css";

Vue.use(Fake3dImageEffect);

Пример:

<template>
  <div id="app">
    <fake3d-image-effect
      fill-height-content
      tag="div"
      :image="require('./path/to/aquarium.jpeg')"
    >
      <div class="container">
        <h1>Boy at <u>Aquarium</u></h1>
        <p class="m-5">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          delectus!
        </p>
        <p>Photo by Biljana Martinić on Unsplash</p>
      </div>
    </fake3d-image-effect>
    <img alt="Vue logo" src="./assets/logo.png" />
  </div>
</template>

<script>
import { Fake3dImageEffect } from "@luxdamore/vue-fake3d-image-effect";
import "@luxdamore/vue-fake3d-image-effect/dist/Fake3dImageEffect.css";

export default {
  name: "App",
  components: { Fake3dImageEffect },
};
</script>

Как вы, возможно, заметили в этом примере, компонент fake3dimage также поддерживает некоторые другие свойства, такие как свойство fill-height-content, которое устанавливает высоту элемента равным 100vh (полная высота), и атрибут tag, который позволяет нам опционально обернуть другое Предпочитаемый семантический элемент для дочерних элементов.

v-wave

Эта библиотека позволяет нам просто добавлять новый v-wave 属性существовать Добавьте красивый элемент отметки при нажатии на элемент отметкиволновой эффект,Похоже на волновой эффект в материальном дизайне.

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

Установить

npm i v-wave

• Vue3

import {createApp} from 'vue'
import VWave from 'v-wave'
import App from './App.vue'

createApp(App)
  .use(VWave)
  .mount('#app')

• Vue2

import Vue from 'vue'
import VWave from 'v-wave'

Vue.use(VWave)

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

Чтобы начать использовать эту библиотеку, просто добавьте v-wave Атрибут, добавленный к любому элементу, к которому вы хотите добавить эффект пульсации:

<button v-wave>Click me!</button>
<button v-wave="{ color: 'blue' }">Click me too!</button>

результат:

Мы можем изменить его первоначальную непрозрачность,、продолжительность、Ослабление и многие другие параметры для дальнейшей настройки ряби. Эффект:

<div
  v-wave="{
  color: 'rebeccapurple',
  initialOpacity: 0.5,
  duration: 2,
  easing: 'ease-in',
}"
>
  Click me!
</div>

результат:

vue-animate-onscroll

该Библиотека Сумка含用于существоватьэлементДиректива для анимации области просмотра при прокрутке к ней.。Однако,Отличие от предыдущей библиотеки заключается в том, что,Эта библиотека не предоставляет напрямую вспомогательные классы или компоненты, позволяющие нам добавлять анимацию в приложение. Напротив,он предоставляет инструкции,Позволяет нам вызывать анимацию, когда часть нашего приложения прокручивается в поле зрения.

Установить

npm install vue-animate-onscroll

Введение:

import Vue from 'vue'
import VueAnimateOnScroll from 'vue-animate-onscroll'

Vue.use(VueAnimateOnScroll)

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

однажды как Vue Импорт плагина, мы можем сделать это, добавив к элементу v-animate-onscroll свойство вместе с именем нашей анимации для анимации элемента при прокрутке:

<div v-animate-onscroll="'rotate">Rotate me once upon scroll</div>

Однако, как упоминалось ранее, нам все равно нужно определить CSS-анимацию для запуска анимации. Более подходящий пример выглядит так:

<template>
  <div id="app">
    <div class="flex-center">
      <div>
        <h1>Awesome application</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis,
          eum.
        </p>
      </div>
    </div>
    <div class="main">
      <img src="path/to/img" v-animate-onscroll="'swing'" />
    </div>
  </div>
</template>

<style>
/* create swing animation */
@keyframes swing {
  10% {
    transform: rotate(10deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(5deg);
  }

  80% {
    transform: rotate(-5deg);
  }
}
</style>

Выход:

Также стоит отметить, что по умолчанию, когда элемент прокручивается в поле зрения, соответствующая ему анимация срабатывает только один раз. Однако мы можем использовать v-animate-onscroll.repeat Вместо последнего это будет запускать анимацию всякий раз, когда элемент прокручивается в поле зрения:

<img src="path/to/img" v-animate-onscroll.repeat="'swing'" />

Кроме того, вы можете настроить направление прокрутки (вверх или вниз), в котором будет запускаться анимация:

<div v-animate-onscroll="{up: 'animationName'}">Animate me once on scroll up</div>
<div v-animate-onscroll="{down: 'animationName'}">Animate me on upon scroll down</div>

<!-- Different animations for up and down directions -->
<div v-animate-onscroll="{down: 'animationName', up: 'anotherAnimationName'}">Animate me on scroll</div>

Создание CSS-анимации с нуля может занять много времени. По этой причине общепринятым подходом является использование этой библиотеки взаимозаменяемо с другими библиотеками анимации, такими как популярный Animate.css.

окончание

Каждая библиотека анимации уникальна и имеет разные способы упростить задачу. Существует также множество библиотек анимации на выбор.

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