Vue中使用kinesis轻松创建复杂的交互式动画

介绍

vue-kinesis 是一组Vue组件,可以为 Vue.js 应用程序创建交互式动画。

Vue中使用kinesis轻松创建复杂的交互式动画

Github地址

https://github.com/Aminerman/vue-kinesis

如何安装使用

使用你习惯使用的包管理工具安装它

  • Vue3安装使用
npm install --save 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");
  • Vue2
npm install --save vue-kinesis
import Vue from \'vue\'
import VueKinesis from \'vue-kinesis\'

Vue.use(VueKinesis)

使用特定组件:

import Vue from \'vue\'
import { KinesisContainer, KinesisElement } from \'vue-kinesis\'

Vue.component(\'kinesis-container\', KinesisContainer)
Vue.component(\'kinesis-element\', KinesisElement)

这是使用组件的最基本方式

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

为了使效果起作用 应该是 的child

当然你还可以在浏览器中使用

<script src="vue.js">script>
<script src="vue-kinesis.min.js">script>

Props

  • kinesis-container

active

Boolean

true

启用或禁用交互

duration

Number

1000

以毫秒为单位的动画速度

easing

String

“cubic-bezier(0.23, 1, 0.32, 1)”

视差动画的缓和

tag

String

div

接受任何有效的 html 标签

event

String

“move”

容器将对其作出反应的事件. 可能 “move” 或者”scroll”

perspective

Number

1000

对“depth”动画类型有效

audio

String

音频文件的路径

playAudio

Boolean

开始/停止附加的音频文件

  • kinesis-element

strength

Number

10

运动效果的强度

type

String

“translate”

类型(translate – rotate – scale – scaleX – scaleY – depth – depth_inv)

tag

String

“div”

接受任何有效的 html 标签

transformOrigin

String

“center”

类似于 CSS transform-origin 属性

originX

Number

50

在 X 轴上相对于容器的运动原点。 50 是容器的中心,0 是左侧,100 是右侧。

originY

Number

50

相对于容器的运动原点,在 Y 轴上。 50 是容器的中心,0 是顶部,100 是底部。

axis

String

null

将运动限制在一个轴上。可能的值:“x” – “y”

maxX

Number

null

限制 X 轴上移动的最大范围

maxY

Number

null

限制 Y 轴上的最大移动范围

minX

Number

null

限制 X 轴上移动的最小范围

minY

Number

null

限制 Y 轴上移动的最小范围

cycle

Number

0

动作会重复多少次

  • kinesis-audio

audioIndex

Number

50

在从 0 到 127 的整数值范围内对哪个频率做出反应。

strength

Number

10

运动效果的强度

type

String

“translate”

类型(translate – rotate – scale – scaleX – scaleY – depth – depth_inv)

tag

String

“div”

接受任何有效的 html 标签

transformOrigin

String

“center”

类似于 CSS transform-origin 属性

originX

Number

50

在 X 轴上相对于容器的运动原点。 50 是容器的中心,0 是左侧,100 是右侧。

originY

Number

50

相对于容器的运动原点,在 Y 轴上。 50 是容器的中心,0 是顶部,100 是底部。

axis

String

null

将运动限制在一个轴上。可能的值:“x” – “y”

maxX

Number

null

限制 X 轴上移动的最大范围

maxY

Number

null

限制 Y 轴上的最大移动范围

minX

Number

null

限制 X 轴上移动的最小范围

minY

Number

null

限制 Y 轴上移动的最小范围

cycle

Number

0

动作会重复多少次

     
              "img"
                  :src="spider"
                  :strength="-10"
                  type="rotate"
                  transformOrigin="50% 300%"
                  axis="x"
                  type="depth" />
            "img"
                  :src="ladybug"
                  :strength="10"
                  type="rotate"
                  transformOrigin="50% 300%"
                  axis="x"
                  type="depth" />
            "img"
                  :src="fennec"
                  :strength="10"
                  type="depth"
                  transformOrigin="50% 300%"
                  type="depth" />
          

备注

动画的效果可以参照官方文档给出的示例

Vue中使用kinesis轻松创建复杂的交互式动画

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.net/share/23607.html

发表评论

登录后才能评论