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

PropTypeDefault ValueDescription
activeBooleantrue启用或禁用交互
durationNumber1000视差动画的速度(毫秒)
easingString“cubic-bezier(0.23, 1, 0.32, 1)”简化视差动画
tagtagdiv接受任何有效的html标签
eventString“move”容器将作出反应的事件。可能的值是 “move” 和 “scroll”
perspectiveNumber1000适用于“depth”视差类型
audioString指向音频文件的路径
playAudioBoolean启动/停止附加的音频文件

kinesis-element

PropTypeDefault ValueDescription
strengthNumber10运动效果的强度
typeString“translate”动画类型:translate - rotate - scale - scaleX - scaleY - depth - depth_inv
tagString“div”接受任何有效的html标签
transformOriginString“center”类似于CSS的transform-origin属性,具体查看
originXNumber50运动相对于容器的原点位于X轴上。50是容器的中心,0是左侧,100是右侧。
originYNumber50运动相对于容器的原点位于Y轴上。50是容器的中心,0是顶侧,100是底侧。
axisStringnull将移动限制在一个轴上。可能的值:“x”-“y”
maxXNumbernull限制X轴上的最大移动范围
maxYNumbernull限制Y轴上的最大移动范围
minXNumbernull限制X轴上的最小移动范围
minYNumbernull限制Y轴上的最小移动范围
cycleNumber0动作重复次数

kinesis-audio

PropTypeDefault ValueDescription
audioIndexNumber50在0到127的整数值范围内,对哪个频率做出反应。
strengthNumber10运动效果的强度
typeString“translate”动画类型:translate - rotate - scale - scaleX - scaleY - depth - depth_inv
tagString“div”接受任何有效的html标签
transformOriginNumber“center”类似于CSS的transform-origin属性,具体查看
originXNumber50运动相对于容器的原点位于X轴上。50是容器的中心,0是左侧,100是右侧。
originYNumber50运动相对于容器的原点位于Y轴上。50是容器的中心,0是顶侧,100是底侧。
axisStringnull将移动限制在一个轴上。可能的值:“x”-“y”
maxXNumbernull限制X轴上的最大移动范围
maxYNumbernull限制Y轴上的最大移动范围
minXNumbernull限制X轴上的最小移动范围
minYNumbernull限制Y轴上的最小移动范围
cycleNumber0动作重复次数

如前所述,除了鼠标移动"move"触发事件,对于滚动条"scroll"触发事件也是可以的,使用type+transformOrigin参数,能搭配出各种动画效果。

官网链接: vue-kinesis官网
github地址: vue-kinesis - github

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/395173.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024.8.08(python)

一、搭建python环境 1、检查是否安装python [rootpython ~]# yum list installed | grep python [rootpython ~]# yum list | grep python3 2、安装python3 [rootpython ~]# yum -y install python3 安装3.12可以使用源码安装 3、查看版本信息 [rootpython ~]# python3 --vers…

数字信号处理2: 离散信号与系统的频谱分析

文章目录 前言一、实验目的二、实验设备三、实验内容四、实验原理五、实验步骤1.序列的离散傅里叶变换及分析2.利用共轭对称性&#xff0c;设计高效算法计算2个N点实序列的DFT。3.线性卷积及循环卷积的实现及二者关系分析4.比较DFT和FFT的运算时间5.利用FFT求信号频谱及分析采样…

游戏行业最新报告 | 2024年1—6月:中国游戏市场收入上升至1472.67亿元

2024年1—6月收入&#xff1a;达1472.67亿元&#xff0c;同比增长2.08% 伽马数据提供的数据显示&#xff1a;2024年1—6月&#xff0c;国内游戏市场实际销售收入1472.67亿元&#xff0c;同比增长2.08%&#xff0c;增长趋势较为平稳。 中国市场实际销售收入及增长率 游戏用户达…

(24)(24.2) Minim OSD快速安装指南(一)

文章目录 前言 1 概述 2 基本接线图 3 关键冷却条件的可选设置 4 固件可用于MinimOSD 5 MWOSD 前言 MinimOSD “屏幕显示”是一个小型电路板&#xff0c;它从你的自动驾驶仪中提取遥测数据&#xff0c;并将其覆盖在你的第一人称视图监视器上(First Person View)。Minim …

极限挑战:40亿个非负整数中找到没有出现的数(bit数组)

我是小米,一个喜欢分享技术的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! 大家好!我是小米,一个积极活泼、热爱分享技术的29岁程序员。今天,我们一起来探讨一个有趣且实用的算法问题:如何在40亿个非负整数中找到没有出现的数…

Powershell 禁用系统更新

创建一个关闭系统更新脚本 脚本系统兼容10,11,2012,206,2019,2022,2025powershell-install-stop-System-update.ps1 <# Powershell Install stop System update +++++++++++++++++++++++++++++++++++++++++++++++++++++ + _____ _____ _ …

供应商较多的汽车制造业如何选择供应商协同平台?

汽车制造业的供应商种类繁多&#xff0c;根据供应链的不同环节和产品特性&#xff0c;可以大致分为以下几类。 按供应链等级分包括&#xff1a; 一级供应商通常具有较高的技术水平和生产能力&#xff0c;能够满足汽车厂商对零部件的高品质、高性能和高可靠性的要求。 二级供应…

ImportError: DLL load failed while importing _rust: 找不到指定的程序的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【Android Studio】Webview 内核升级得三种方法

【Android Studio】Webview 内核升级得三种方法 前言X5 腾讯组件crosswalk开源项目webview升级加载的内核&#xff08;完美解决&#xff09;总结 前言 在APP 中进行网页加载&#xff0c;一般采用原生自带的Webview 组件&#xff0c;但在需要加载高版本网页的时候&#xff0c;有…

【CSS入门】第三课 - padding内填充

上一节&#xff0c;我们说了margin外边距&#xff0c;还举了个例子&#xff0c;比如两个人紧挨着站着&#xff0c;如果两个人冬天穿了棉袄&#xff0c;很厚很厚的棉袄&#xff0c;那么他俩占据的空间就会增加&#xff0c;他俩之间的真实距离也会增加。 这一节&#xff0c;我们…

《暗黑破坏神 IV》是什么类型的游戏,苹果电脑能玩暗黑破坏神吗 crossover玩暗黑4

《暗黑破坏神 IV》&#xff08;Diablo IV&#xff09;是由暴雪娱乐开发的一款动作角色扮演游戏&#xff08;Action RPG&#xff09;&#xff0c;是广受欢迎的《暗黑破坏神》系列的最新作品。暗黑破坏神4拥有出色的游戏画面、音效和丰富的游戏玩法&#xff0c;非常值得玩家们去尝…

SpringBoot3热部署

引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional> </dependency> 默认就是,无需配置 可以了…

ADB Installer 0 file(s)copied

在为泡面神器刷安卓&#xff0c;做准备工作装ADB时报错了&#xff0c;以下是报错提示 再用cmd命令adb version验证下&#xff0c;提示adb不是有效命令&#xff0c;百分百安装失败了&#xff0c;往上各种搜索查询均没有对症的&#xff0c;其中也尝试了安装更新版本的&#xff0c…

翻译: 可视化深度学习反向传播原理一

本期我们来讲反向传播 也就是神经网络学习的核心算法 稍微回顾一下我们之前讲到哪里之后 首先我要撇开公式不提 直观地过一遍 这个算法到底在做什么 然后如果你们有人想认真看里头的数学 下一期影片我会解释这一切背后的微积分 如果你看了前两期影片 或者你已经有足够背景知…

牛羊肉巨头的数字化战略:凯宇星辉如何领先市场

凯宇星辉的创业成长史&#xff0c;给出了中国牛羊肉企业如何从散户走向集团化经营的路线图。 总部位于大连的凯宇星辉&#xff0c;在牛羊肉进口贸易领域白手起家&#xff0c;十余年时间&#xff0c;已形成以澳新、南美、北美等全球三大牛羊肉主产区为主渠道的全球直采网络布局…

《MySQL数据库》 数据类型、约束、键的使用—/—<5>

一、常见数据类型 1、数值类型&#xff1a; INT、BIGINT、FLOAT、DOUBLE&#xff0c;DECIMAL等。 INT&#xff08;整型&#xff09;&#xff1a;通常占用4个字节&#xff0c;可以存储范围为-2^31到2^31-1的整数。 BIGINT&#xff08;大整型&#xff09;&#xff1a;通常占用8…

【OCCT】第3讲 OpenCasCadeVTK实现三维建模Demo

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享OpenCasCade&VTK共同实现三维建模Demo,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~YO 1.…

AI2021矢量图形软件:Illustrator 2021 Win/Mac 直装版

dobe Illustrator 2021是一款功能强大的矢量图形设计软件&#xff0c;广泛应用于出版、多媒体和在线图像制作领域。该软件特别适用于印刷出版、海报书籍排版、专业插画、多媒体图像处理以及网页设计&#xff0c;能够提供高精度和控制的线稿&#xff0c;适合处理从简单到复杂各种…

SpringBoot 自动装配原理

零、前言 Spring简直是java企业级应用开发人员的春天&#xff0c;我们可以通过Spring提供的ioc容器&#xff0c;避免硬编码带来的程序过度耦合。但是&#xff0c;启动一个Spring应用程序也绝非易事&#xff0c;他需要大量且繁琐的xml配置&#xff0c;开发人员压根不能全身心的…

怎么查询大数据信用评分?

相信在了解大数据信用评分的时候&#xff0c;不少人都因为大数据信用评分在申贷的时候遭受到过挫折&#xff0c;因为大数据信用已经被很多银行和金融机构作为风险控制的重要依据使用&#xff0c;其中的大数据信用评分&#xff0c;能直观的感知到用户的信用情况。那如何查询大数…