Vue - 关于vue-kinesis 移动动画组件
Vue - 关于vue-kinesis 移动动画组件
vue-kinesis可以根据鼠标移动或滚动条来控制元素动画的动画效果;除此之外,vue-kinesis 还可以设置音频文件,根据音频频率来控制动画的跳动效果。

一、安装vue-kinesis
Vue2版本:
1.安装
npm install --save vue-kinesis2.默认导入
import Vue from 'vue'
import VueKinesis from 'vue-kinesis'Vue.use(VueKinesis)
Vue3版本:
1.安装
npm install --save vue-kinesis@next2.默认导入
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-kinesis包括三个组件,每个组件都有自己的属性来控制交互流程:
Kinesis-container — 用于禁用或启用交互的包装器组件。 此外,为了附加触发动画的事件,支持移动(鼠标交互)和滚动。 但是,移动设备不支持 move 事件
Kinesis-element — 要应用动画的元素的包装组件,以及指定动画类型或来源
Kinesis-audio — 此组件用于指定在将音频源添加到 kinesis 容器时要响应的音频频率
关于文字简单演示(Vue3):
<template><kinesis-container><kinesis-element :strength="10"> 我会偏移! </kinesis-element><kinesis-element :strength="20"> 我比它更偏移! </kinesis-element></kinesis-container>
</template><script setup>
import { KinesisContainer, KinesisElement } from "vue-kinesis";
</script>

关于图片简单演示(Vue3):
<template><kinesis-container class="image-container"><kinesis-elementclass="img_2"tag="img":src="a3":strength="-12"type="rotate"transformOrigin="50% 300%"axis="x"/><kinesis-elementclass="img_2"tag="img":src="a2":strength="12"type="rotate"transformOrigin="50% 300%"axis="x"/><kinesis-elementtag="img":src="a4":strength="25"type="rotate"transformOrigin="50% 300%"axis="x"/><kinesis-elementtag="img":src="a5":strength="-25"type="rotate"transformOrigin="50% 300%"axis="x"/><kinesis-elementclass="img_depth"tag="img":src="a1":strength="10"type="depth"transformOrigin="50% 300%"/></kinesis-container>
</template><script setup>
import { KinesisContainer, KinesisElement } from "vue-kinesis";var a1 = new URL("./assets/1.jpg", import.meta.url).href;
var a2 = new URL("./assets/2.jpg", import.meta.url).href;
var a3 = new URL("./assets/3.jpg", import.meta.url).href;
var a4 = new URL("./assets/4.jpg", import.meta.url).href;
var a5 = new URL("./assets/5.jpg", import.meta.url).href;</script><style scoped>
.image-container {position: relative;width: 100px;margin: auto;text-align: center;
}
img {position: absolute;left: 0;top: 0;height: 100px;border-radius: 10px;
}
.img_depth{position: relative;z-index: 3;
}
.img_1{z-index: 1;
}
.img_2{z-index: 2;
}
</style>

关于音频简单演示(Vue3):
<template><kinesis-container :audio="audioFile" :playAudio="isPlaying"><kinesis-audio :audioIndex="50" :strength="50" type="scale"><kinesis-element :strength="10" type="depth"><div class="circle" @click="togglePlaying">{{ isPlaying ? "Stop" : "Play" }}</div></kinesis-element></kinesis-audio></kinesis-container>
</template><script setup>
import { KinesisContainer, KinesisElement, KinesisAudio } from "vue-kinesis";
import { ref } from "vue";var audioFile = new URL("./assets/audo.mp3", import.meta.url).href;
const isPlaying = ref(false);function togglePlaying() {isPlaying.value = !isPlaying.value;
}
</script><style scoped>
.circle {width: 100px;height: 100px;border-radius: 10px;background: red;display: flex;justify-content: center;align-items: center;color: white;box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
}
</style>

三、组件参数Props
kinesis-container
| Prop | Type | Default Value | Description |
|---|---|---|---|
| active | Boolean | true | 启用或禁用交互 |
| duration | Number | 1000 | 视差动画的速度(毫秒) |
| easing | String | “cubic-bezier(0.23, 1, 0.32, 1)” | 简化视差动画 |
| tag | tag | div | 接受任何有效的html标签 |
| event | String | “move” | 容器将作出反应的事件。可能的值是 “move” 和 “scroll” |
| perspective | Number | 1000 | 适用于“depth”视差类型 |
| audio | String | 指向音频文件的路径 | |
| playAudio | Boolean | 启动/停止附加的音频文件 |
kinesis-element
| Prop | Type | Default Value | Description |
|---|---|---|---|
| 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
| Prop | Type | Default Value | Description |
|---|---|---|---|
| audioIndex | Number | 50 | 在0到127的整数值范围内,对哪个频率做出反应。 |
| strength | Number | 10 | 运动效果的强度 |
| type | String | “translate” | 动画类型:translate - rotate - scale - scaleX - scaleY - depth - depth_inv |
| tag | String | “div” | 接受任何有效的html标签 |
| transformOrigin | Number | “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 | 动作重复次数 |
如前所述,除了鼠标移动"move"触发事件,对于滚动条"scroll"触发事件也是可以的,使用type+transformOrigin参数,能搭配出各种动画效果。
官网链接: vue-kinesis官网
github地址: vue-kinesis - github
相关文章:
Vue - 关于vue-kinesis 移动动画组件
Vue - 关于vue-kinesis 移动动画组件 vue-kinesis可以根据鼠标移动或滚动条来控制元素动画的动画效果;除此之外,vue-kinesis 还可以设置音频文件,根据音频频率来控制动画的跳动效果。 一、安装vue-kinesis Vue2版本: 1.安装 …...
leetCode- - - 链表
目录 1.反转链表(leetcode206) 2. 链表内指定区间反转(leetcode92) 3.链表中的节点每k个一组翻转(leetcode25) 4.合并两个排序的链表(leetcode21) 5.链表的中间节点(…...
Ashok:一款多功能开源网络侦查OSINT工具
关于Ashok Ashok是一款多功能开源网络侦查公开资源情报OSINT工具,该工具可谓是OSINT领域中的瑞士军刀,广大研究人员可以使用该工具轻松完成网络侦查任务。 侦察是渗透测试的第一阶段,这意味着在计划任何实际攻击之前收集信息。因此ÿ…...
没有获取淘宝API的资质怎么获取淘宝数据
淘宝是头部电商平台之一,每个自研商家或电商软件服务商想要开发电商管理功能模板就少不了要对接淘宝API。淘宝API是在淘宝开放平台提供的,自研商家和软件服务商接入淘宝开放平台需要经过一系列审核和申请流程,要求资质和相关资料符合对应的要…...
SQL手工注入
目录 1.判断是否存在sql注入点 1.1我们在地址栏中输入?id1 1.2我们在地址栏中输入?id-- 2.联合查询 2.1首先知道表格有几列,如果报错就是超过列数,如果显示正常就是没有超出列数。 2.2爆出显示位,就是看看表格里面哪一列是在页面显示…...
【SQL】大的国家
目录 题目 分析 代码 题目 World表: ---------------------- | Column Name | Type | ---------------------- | name | varchar | | continent | varchar | | area | int | | population | int | | gdp | bigint | ----…...
8月5日学习笔记 glibc安装与安全用户角色权限
一,glibc安装 https://www.mysql.com/ 官⽹ https://downloads.mysql.com/archives/community/ https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.33-li nux-glibc2.12-x86_64.tar 安装步骤 1.安装依赖库 [rootlocalhost ~]# yum list installed |g…...
DrissionPage 一个替代selenium的pip --- 一个可以接管正在运行的chrome包
DrissionPage 一个替代selenium的pip包,持续更新 1、加载内容,并接管chrome浏览器 from DrissionPage import ChromiumPage, ChromiumOptions page ChromiumPage(addr_or_opts127.0.0.1:9222) print(page.title)ul page.eles(idform-submit) for i i…...
爬虫入门--了解相关工具
目录 1.爬虫与python 2.第一个爬虫 3.web请求的全过程 3.1服务器渲染 3.2前端JS渲染 4.浏览器工具 4.1Elements 4.2Console 4.3Source 4.4network(重点) 5.小结 1.爬虫与python 首先我们要知道,爬虫一定要用Python么? 非也~…...
django项目中通用的分页组件
文章目录 分页组件pager组件代码 分页组件 应用分页组件,需要以下两个步骤: 视图函数中:(先获取queryset,将request和queryset传入分页组件对象中,得到生成的html标签) def customer_list(requ…...
想实现ubuntu搭建sqli-labs靶场
目录 首先前期的nginx和php部署完成编辑编辑 Xftp导入sqli-labs 遇到了的问题 它提示我们请检查db-creds.inc 去尝试解决这个问题 尝试修改MySQL root密码 修改db-creds.inc配置 再次尝试依旧失败 思考:会不会是MySQL版本过高的原因 重新下载MySQL5.7.…...
tp8 按日期分组查出数据
1.如果数据库里时间字段都是时间戳,使用mysql中的from_unixtime()函数 field("from_unixtime(create_time,%Y-%m-%d) as time,group_concat(id)")->group(time)->select()2. 如果数据库是普通的日期格式(如2024-01-02 01:23:50)&#x…...
单例模式(懒汉模式,饿汉模式)
单例的饿汉模式:在主函数未调用之前该单例就已经存在了,所以不存在线程安全的问题。 class Singleton { private: Singleton(){} public:static Singleton s1;static Singleton* GetInstance(){return &s1;}Singleton(const Singleton&) delet…...
【Qt】Item Widgets 多元素控件
Qt中提供的多元素控件有: QListWidgetQListViewQTableWidgetQTableViewQTreeWidgetQTreeView 上述控件分为Widget和View,其区别如下: 以QTableWidget和QTableView为例 QTableView是基于MVC(Model-View-Controller)设计的控件。QTableView自身…...
sharded_inference_engine:MLXDynamicShardInferenceEngine;step
目录 sharded_inference_engine:MLXDynamicShardInferenceEngine 类属性 方法 __init__(self) async def infer_prompt(self, shard: Shard, prompt: str, inference_state: Optional[str] = None) -> (np.ndarray, str, bool) async def infer_tensor(self, shard: …...
JAVA开发学习-day21
JAVA开发学习-day21 1. 删除表单数据 根据ElementUI的官方组件指南,为表单每列的数据添加删除按钮 <el-table :data"tableData" style"width: 100%"><el-table-column prop"id" label"ID" width"180"…...
Python的安装环境以及应用
1.环境python2,Python 最新安装3.12可以使用源码安装 查看安装包 [rootpython001 ~]# yum list installed | grep epel 3[rootpython001 ~]# yum list installed | grep python [rootpython001 ~]# yum -y install python3 安装python3 查看版本 [root…...
TabLayout使用以及自定义tab标签
<?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.com/apk/res-auto"xmlns:tool…...
第二十节、有限状态机和抽象类多态
一、抽象类 挂载到动画器上的就是继承抽象类代码 1、使用onenable周期函数启用 2、在每一个周期函数中对抽象类进行调用 3、隐藏公开的变量...
SQL注入实例(sqli-labs/less-23)
0、初始网页 1、闭合方式判断 闭合符号为单引号,通过测试发现过滤了注释,所以直接闭合 2、确定查询表的列数 确定查询表的列数为3列 ?id1 order by 3 3、确定回显位置 回显位置为第二列和第三列 ?id-1 union select 1,2,3 4、查看当前登录和数据…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题: 指定音频引擎与设备;播放音频文件 本文所使用的环境: Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...
Java求职者面试指南:计算机基础与源码原理深度解析
Java求职者面试指南:计算机基础与源码原理深度解析 第一轮提问:基础概念问题 1. 请解释什么是进程和线程的区别? 面试官:进程是程序的一次执行过程,是系统进行资源分配和调度的基本单位;而线程是进程中的…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
如何更改默认 Crontab 编辑器 ?
在 Linux 领域中,crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用,用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益,允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...
