带有Kinesis的交互式Vue动画

2020年12月30日11:16:44 发表评论 44 次浏览

本文概述

如果你使用网络和移动应用程序已有一段时间, 那么你就会知道, 出色的动画使你的应用程序"赞叹不已", 并给你的用户留下了深刻的印象。

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

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

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

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

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

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

我们正在创造什么

我们要创建一个交互式的notlogy徽标动画, 以响应光标的移动。

使用Vue Kinesis构建的LogRocket徽标的动画gif。

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

我们为制作了一个自定义演示.
不完全是。点击这里查看.

带有Kinesis的交互式Vue动画1

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

入门

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

创建Vue.js项目没有那么简单:首先, 安装Vue CLI.

然后, 在你的终端中, 键入vue创建<项目名称>并只需遵循默认步骤即可。

安装后, 你可以清除未使用的组件(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中使用任何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组件:运动容器标签能够容纳多种运动学元素s。但是, 如果没有容器, 元素就不可能存在。

的强度属性实际上是动画因素。较高的强度将导致较高的运动。

下面是使用此示例的说明2个素材SVG图标。 (尝试在2个图标上移动鼠标。)

blurdylan使用@ vue / cli-plugin-babel, vue, vue-kinesis开发的runtime-haze-3sqge

创建我们的互动动画

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

通过上面对gif的分析, 我们所拥有的只是一个紫色背景, 一个动画火箭和后面有一些运动的圆圈。

我们如何通过Kinesis实现这一目标?

首先, 请清理你的应用程序文件。

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

这只是意味着运动学元素我们应该拥有的标签将位于这五个元素上。我们已经可以通过以下方式构造模板文件:

<template>
  <div id="app">
    <kinesis-container class="container">
      <kinesis-element>
        <!-- notlogy 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>

结构化后, 我们将在样式中添加一些样式应用程序文件以创建纯紫色背景和圆形设计。

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

结果, 我们将获得以下很酷的动画背景:

紫色背景的图像使用Vue Kinesis进行了动画处理。

运动选项

的运动容器和运动学元素标签能够属性这将帮助我们使其外观和感觉达到我们想要的方式。

Kinesis Github页面上的表格显示了kinesis-container和kinesis-element标签

现在, 你可能想知道:如果我们需要配置此插件, 为什么我们创建的先前背景已经具有动画效果?

这是因为它们具有预定义的默认值, 这些默认值可帮助他们完成工作而不采用任何指定的属性。

设置我们的动画

制作动画时, 我们应该始终牢记目标, 因为动画可以使用户感受到自己的生活。

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

编辑约束

我们的四个圆在y轴上的运动应受限制。

我们希望圆圈仅上下移动, 以给人起降的印象。

无需让它们左右移动。

为此, 我们将添加属性轴= y我们圈子中的运动因子元素。

现在, 我们的代码如下所示:

<template>
  <div id="app">
    <kinesis-container class="container">
      <kinesis-element>
        <!-- notlogy 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的整个运动魔术与强度属性。

此属性是从元素的原始位置保留元素的力。

可以将其视为一种引力。但是, 在这种情况下, 强度越大, 元素越能行进(因此更像是反重力)。

默认情况下, 强度的属性运动学元素设置为10。

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

我们希望火箭能够移动得最远, 因此与圆圈相比, 它必须更自由。

<template>
  <div id="app">
    <kinesis-container class="container">
      <kinesis-element :strength="150">
        <!-- notlogy 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>

完成后, 我们可以将notlogy logo.png添加到其运动学元素:

<kinesis-element :strength="150">
    <img src="./assets/lrlogo.png" alt="带有Kinesis的交互式Vue动画" alt="notlogy logo">
</kinesis-element>

它的风格:

img {
  width: 4rem;
}

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

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

随意调整所有元素的强度属性, 并查看其感觉。

智能花70iny智能花70iny由blurdylan使用@ vue / cli-plugin-babel, vue, vue-kinesis

更多动画和互动

Vue Kinesis有能力做更多而不是仅将对象从一个位置移动到另一个位置。

该库还可以使用陀螺仪以深度滚动显示动画。我们甚至可以根据音频波制作动画。

一张gif文件,显示Vue Kinesis如何帮助您基于音频波为图像制作动画。
<kinesis-container :audio="audio">
    <kinesis-audio :audioIndex="10">
        <kinesis-element :strength="10" type="depth">
         <!-- cover art -->
        </kinesis-element>
    </kinesis-audio>
</kinesis-container>

在此, 音频文件的路径链接在运动容器.

的运动音频组件是带有容器的子容器:audioIndex是动画反应的频率。

最后, 我们将添加一个运动学元素组件来设置动画, 如上面的示例所示。

更多限制

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

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

此外, 我们可以使用以下方法限制对象从其原点移动一定距离transformOrigin, maxY, minY, maxX和minX在运动学元素零件。

此外, 你还可以将动画类型从平移切换为旋转, 缩放和深度。

总结

Vue Kinesis是功能强大的动画工具, 可以帮助Vue开发人员快速将生活带入他们的任何网站。

它使他们能够基于各种事件创建令人惊叹的交互式动画。

它还启用了一组定制属性, 以帮助实现所需的效果。

准确体验用户的Vue应用程序

调试Vue.js应用程序可能会很困难, 尤其是在用户会话中有数十种甚至数百种变体的情况下。如果你有兴趣监视和跟踪生产中所有用户的Vue突变,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR一样, 实际上记录了Vue应用程序中发生的所有事情, 包括网络请求, JavaScript错误, 性能问题等等。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。

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

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

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: