**作者:Dylan Tientcheu**✏️

如果您已经使用 Web 和移动应用程序有一段时间了,您就会知道,出色的动画会给您的应用程序带来“惊喜”因素,并给您的用户留下深刻印象。

它们在用户中的吸引力使动画成为提升用户体验的好方法。

有时您需要这些动画根据用户交互做出反应——例如,滚动、光标移动或单击。

在这篇文章中,我们将把 Vue Kinesis 交互式动画库集成到我们的 Vue.js 应用程序中。

Vue.js是一个对开发人员友好的渐进式 JavaScript 框架,非常适合制作具有软学习曲线的快速应用程序。

Vue 的易用性很大程度上归功于它的 CLI 库,它使任何人都可以快速搭建应用程序,而无需花费数小时进行配置。

另一方面,Vue Kinesis是一组组件,可让您为 Vue.js 应用程序创建交互式动画。

我们正在创造什么

我们想要创建一个对光标移动做出反应的交互式 LogRocket 徽标动画。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--4D9vpmNG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://i0.wp.com/blog.logrocket .com/wp-content/uploads/2020/02/LogRocket.gif%3Fresize%3D730%252C672%26ssl%3D1)

从上面的 gif 图中,我们可以看到火箭根据光标移动。

坐在背景中的元素也跟随运动。

入门

在开始之前,我们将创建 Vue.js 项目,然后安装 Kinesis 库。

没有什么比创建 Vue.js 项目更容易了:首先,安装Vue CLI。

然后,在您的终端中输入vue create <project-name>并按照默认步骤进行操作。

安装后,您可以清除未使用的组件(Hello.vue)并保持干净的 App.vue。

我们需要一个干净的项目来开始使用给定的示例。

添加 Kinesis 插件

现在我们需要安装我们的交互式动画库 Kinesis。进入项目文件后,我们将在终端中运行以下命令:

npm install -i vue-kinesis

进入全屏模式 退出全屏模式

打开您的main.js文件并复制以下代码以将 Kinesis 添加到您的 Vue 项目中:

import Vue from 'vue'
import VueKinesis from 'vue-kinesis'

Vue.use(VueKinesis)

进入全屏模式 退出全屏模式

现在您已经添加了VueKinesis,您可以在 Vue<template>标签中使用任何 Kinesis 组件。

玩个简单的例子

在我们实现我们想要的动画之前,为了让我们自己更熟悉 Kinesis 库,我们将启动一个取自其网站的示例。

这将有助于我们理解库的行为。

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

进入全屏模式 退出全屏模式

以上是我从Kinesis 的主页获得的片段。

这些标签是 Kinesis 组件:kinesis-container标签能够容纳大量kinesis-element。然而,一个元素不可能没有它的容器而存在。

strength属性实际上是动画因子。更高的强度将导致更高的运动。

下面是使用2 材质 svg 图标的示例说明。 (尝试在 2 个图标周围移动鼠标。)

创建我们的交互式动画

让我们开始使用 Vue Kinesis 构建我们的自定义交互式动画。

从上面我们的gif分析来看,我们只有一个紫色的背景,一个动画火箭,后面还有一些移动的圆圈。

我们如何使用 Kinesis 实现这一目标?

首先,清理App.vue文件中的模板标签。

请注意,唯一移动的元素是火箭和四个圆圈。

这仅仅意味着我们应该拥有的唯一kinesis-element个标签将位于这五个元素上。我们已经可以这样构造我们的模板文件:

<template>
  <div id="app">
    <kinesis-container class="container">
      <kinesis-element>
        <!-- LogRocket logo -->
      </kinesis-element>

      <!-- background-circles-props -->
      <kinesis-element>
        <div class="circle circle-purple"></div>
      </kinesis-element>
      <kinesis-element>
        <div class="circle circle-purple1"></div>
      </kinesis-element>
      <kinesis-element>
        <div class="circle circle-purple2"></div>
      </kinesis-element>
      <kinesis-element>
        <div class="circle circle-purple3"></div>
      </kinesis-element>
    </kinesis-container>
  </div>
</template>

进入全屏模式 退出全屏模式

结构化后,我们将在App.vue文件中添加一些样式来创建纯紫色背景和圆形设计。

<style>
#app {
  text-align: center;
}

.container {
  padding: 15rem 0;
  background-color: #7749BD;
}

.circle {
  position: absolute;
  border-radius: 100%;
}

.circle.circle-purple {
  border: 10px solid #f2eafa;
  opacity: 0.1;
  width: 4vw;
  height: 4vw;
  left: 10%;
  top: 25%;
}

.circle.circle-purple1 {
  border: 15px solid #f2eafa;
  opacity: 0.1;
  width: 8vw;
  height: 8vw;
  right: -2%;
  bottom: 17%;
}
.circle.circle-purple2 {
  background-color: #f2eafa;
  opacity: 0.1;
  width: 5vw;
  height: 5vw;
  left: 20%;
  bottom: 17%;
}

.circle.circle-purple3 {
  border: 15px solid #f2eafa;
  opacity: 0.3;
  width: 3vw;
  height: 3vw;
  top: 80%;
  left: 60%;
}
</style>

进入全屏模式 退出全屏模式

我们将得到这个很酷的动画背景:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--l05ZkQxk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://i2.wp.com/blog.logrocket .com/wp-content/uploads/2020/02/logrocket-2.gif.png%3Fresize%3D730%252C343%26ssl%3D1)

动力选项

kinesis-container和kinesis-element标签能够采用属性这将帮助我们使其外观和感觉符合我们想要的方式。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--4ZmnEk1S--/c_limit%2Cf_auto% 2Cfl_progressive%2Cq_auto%2Cw_880/https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/02/kinsesis-container-table.png%3Fresize%3D730%252C773%26ssl%3D1)

现在,你可能想知道:如果我们需要配置这个插件,为什么我们之前创建的背景已经动画了?

这是因为它们具有预定义的默认值,可以帮助他们在不使用任何指定属性的情况下完成工作。

设置我们的动画

创建动画时,我们应该始终牢记目标,因为动画给用户一种生活的感觉。

这种感觉有助于产生“哇”的效果。

编辑约束

我们的四个圆圈应该在 y 轴上有一个受限的运动。

我们希望圆圈只上下移动以给人一种起飞和降落的印象。

没有必要让它们左右移动。

为此,我们将属性axis=y添加到我们圈子的 Kinesis 元素中。

我们的代码现在看起来像这样:

<template>
  <div id="app">
    <kinesis-container class="container">
      <kinesis-element>
        <!-- LogRocket logo -->
      </kinesis-element>

      <!-- background-circles-props -->
      <kinesis-element axis="y">
        <div class="circle circle-purple"></div>
      </kinesis-element>
      <kinesis-element axis="y">
        <div class="circle circle-purple1"></div>
      </kinesis-element>
      <kinesis-element axis="y">
        <div class="circle circle-purple2"></div>
      </kinesis-element>
      <kinesis-element axis="y">
        <div class="circle circle-purple3"></div>
      </kinesis-element>
    </kinesis-container>
  </div>
</template>

进入全屏模式 退出全屏模式

我们的动画似乎已经设置好了——但是,我们还没有调整最重要的属性。

Vue Kinesis 的整个运动魔法发生在strength属性上。

该属性是保持元素从其原点开始的力。

把它想象成一种引力。然而,在这种情况下,力量越大,元素能够走得越远(所以它更像是反重力)。

默认情况下,kinesis-element上的strength属性设置为 10。

在我们的动画中,我们需要从圆圈和火箭图像中获得更多的运动。

我们希望火箭能够移动最远,所以它必须比圆圈更自由。

<template>
  <div id="app">
    <kinesis-container class="container">
      <kinesis-element :strength="150">
        <!-- LogRocket logo -->
      </kinesis-element>

      <!-- background-circles-props -->
      <kinesis-element :strength="50" axis="y">
        <div class="circle circle-purple"></div>
      </kinesis-element>
      <kinesis-element :strength="80" axis="y">
        <div class="circle circle-purple1"></div>
      </kinesis-element>
      <kinesis-element :strength="80" axis="y">
        <div class="circle circle-purple2"></div>
      </kinesis-element>
      <kinesis-element :strength="80" axis="y">
        <div class="circle circle-purple3"></div>
      </kinesis-element>
    </kinesis-container>
  </div>
</template>

进入全屏模式 退出全屏模式

完成后,我们可以将 LogRocket logo.png 添加到其kinesis-element中:

<kinesis-element :strength="150">
    <img src="./assets/lrlogo.png" alt="logrocket logo">
</kinesis-element>

进入全屏模式 退出全屏模式

它的风格:

img {
  width: 4rem;
}

进入全屏模式 退出全屏模式

这将创建我们想要的动画。

由于我们需要确保火箭可以自由移动,因此我们必须赋予它更高的强度值。

随意调整所有元素的强度属性,看看感觉如何。

更多动画和交互

Vue Kinesis能够做更多的事情不仅仅是以交互方式将对象从一个地方移动到另一个地方。

这个库还可以使用陀螺仪在深度滚动上制作动画。我们甚至可以根据音频波制作动画。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--AjPwwJrp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://i1.wp.com/blog.logrocket .com/wp-content/uploads/2020/02/supersede.gif%3Fresize%3D730%252C274%26ssl%3D1)

<kinesis-container :audio="audio">
    <kinesis-audio :audioIndex="10">
        <kinesis-element :strength="10" type="depth">
         <!-- cover art -->
        </kinesis-element>
    </kinesis-audio>
</kinesis-container>

进入全屏模式 退出全屏模式

此处,音频文件的路径链接在kinesis-container上。

kinesis-audio组件是容器的子组件,其中:audioIndex是动画反应的频率。

最后,我们将添加一个kinesis-element组件来设置动画,如上面的示例所示。

更多约束

我们可以设置更多限制来根据我们的愿望塑造我们的动画。

如上所示,可以在运动轴(水平或垂直)上添加约束。

另外,我们可以使用transformOrigin, maxY, minY, maxX和kinesis-element组件上的minX来限制对象从其原点移动一定距离。

此外,您可以将动画类型从平移切换到旋转、缩放和深度。

结论

Vue Kinesis 是一个强大的动画工具,可以帮助 Vue 开发人员快速为他们的任何网站带来活力。

它允许他们根据各种事件创建令人惊叹的交互式动画。

它还支持一系列自定义属性,以帮助实现所需的效果。

---

以用户的方式体验您的 Vue 应用程序

调试 Vue.js 应用程序可能很困难,尤其是在用户会话期间有数十个甚至数百个突变时。如果您对监控和跟踪生产中所有用户的 Vue 突变感兴趣,请尝试使用 LogRocket。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--qpocp4MD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev. s3.amazonaws.com/i/t4ni6gomxqbkbxygmco0.png)

LogRocket就像一个用于 Web 应用程序的 DVR,几乎可以记录 Vue 应用程序中发生的所有事情,包括网络请求、JavaScript 错误、性能问题等等。无需猜测问题发生的原因,您可以汇总并报告问题发生时应用程序所处的状态。

LogRocket Vuex 插件将 Vuex 突变记录到 LogRocket 控制台,为您提供有关导致错误的原因以及发生问题时应用程序处于什么状态的上下文。

现代化调试 Vue 应用程序的方式 -免费开始监控。

---

带有 Kinesis](https://blog.logrocket.com/interactive-vue-animations-with-kinesis/)的[交互式 Vue 动画帖子首先出现在LogRocket Blog上。