目前最流行的 5 大 Vue 动画库,使用后太炫酷了

动画在交互方式中发挥着重要作用,它们可通过添加一些视觉风格来增强用户体验。 在本文中,我们将研究和比较目前最流行的 Vue.js 动画库。

vue-kinesis

首先是 vue-kinesis,它是一个强大的动画库,它提供了一系列组件,允许我们将交互式动画添加到我们的 Vue 应用程序中。 这个库会自然地对光标变化做出反应,并根据鼠标事件调用动画,但有趣的是,除此之外,vue-kinesis 还允许我们根据音频变化控制动画。

gif

它的组件具有广泛的自定义属性,我们可以使用它们以编程方式控制动画,从而使我们能够轻松实现所需的效果。

安装

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>

输出:

img

同样,下面是关于音频的示例:

<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>

输出:

gif

在此示例中,我们定义了音频文件的路径并将其附加到 kinesis-container,并且由于 kinesis-audio 组件由此触发,我们在其中放置了一个正方形 div,以便每当我们单击切换播放的按钮时 ,div 做出反应。

如前所述,该库通过向包含在其中的元素添加 kinesis 动画来对音频文件中的光标更改、滚动事件或频率做出反应。 因此,它对于在这些范围内创建动画最有用。 然而,一个值得注意的例子是一个简单的音乐应用程序,其中一些其他元素对当前正在播放的音频做出反应。

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 }"
/>

在 Web 应用程序中,视差效果通常添加到特色(侧面)图像中。

vue-fake3D-image

这是另一个轻量级的 Vue 库,它允许我们在 Vue 应用程序中为图像添加模拟的交互式 3D 效果。 而且,与我们讨论过的其他一些动画库不同,这个是 SSR 兼容的,这意味着它可以与服务器端渲染一起使用。

gif

安装

npm install @luxdamore/vue-fake3d![在这里插入图片描述](https://img-blog.csdnimg.cn/792cc8cfd65542df8c689897c8ff3f13.gif)
-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 组件还支持一些其他的 props,比如 fill-height-content prop,它将元素高度设置为 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>

结果:

gif

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 动画 animation 才能触发动画。 一个更相关的例子如下所示:

<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>

输出:

gif

还值得一提的是,默认情况下,当一个元素滚动到视图中时,其对应的动画只会触发一次。 但是,我们可以使用 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 应用程序的动画库。


原文连接:https://blog.csdn.net/ImagineCode/article/details/124914137

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?