介绍

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

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>

为了使效果起作用 <kinesis-element> 应该是 <kinesis-container> 的child

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

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

Props

• kinesis-container

• kinesis-element

• kinesis-audio

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

备注

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