使用Pixi.js 图片切换特效(图片分段下滑以及复原)

1.效果:

图片

2.实现原理:

将图片按宽高切分为x*y(具体可以自己调整)个矩形区域,对每个顶点分配一个随机值noiseValue(-1到1之间),在顶点着色器中根据这个随机值而做出不同的y轴位移效果从而实现出分段的下滑或者复原的效果。

3.代码实现:

首先是顶点着色器的代码,其中需要用到的aVertexPosition,aUvs,noiseValue会通过外部计算后传入,animationHeight表示位移的高度,animationParam是用来控制顶点位置的0表示在最底端,1表示在最顶端。

图片

将图片分成20X10个矩形,即21X11 个顶点,并计算出每个点的noiseValue。

图片

然后计算出顶点坐标,uv,以及三角形索引。

图片

根据之前计算的值生成几何体,将对应的attribute传入,然后生成shader和Mesh,此时生成的Mesh即我们所需要的图片。

图片

给quad添加事件,档鼠标放上时animationParam变化到1,当鼠标离开时animationParam变化到0。最后添加上遮罩。

图片

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

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

相关文章

C++ lambda表达式详解

C lambda表达式详解 C11 lambda表达式精讲 [ capture ] ( params ) opt -> ret { body; };capture 是捕获列表,params 是参数表,opt 是函数选项,ret 是返回值类型,body是函数体 一个完整的 lambda 表达式看起来像这样&#xf…

医院污水一体化处理设备有哪些

医院污水一体化处理设备通常包括以下几个主要组件: 预处理单元:用于去除污水中的固体悬浮物、颗粒物、油脂等,常见的预处理单元包括格栅、沉砂池、油水分离器等。生物处理单元:用于降解有机物质和去除氮、磷等营养物质。常见的生物…

7D-RESAR性能工程:术语表

文章目录 1. 前言1.1. 编写目的1.2. 适应范围与对象 2. 术语表2.1. RESAR性能工程2.2. 性能测试2.3. 性能项目2.4. 性能项目方案2.5. 性能项目计划2.6. 性能需求类术语2.6.1. 性能需求/指标2.6.2. 并发用户2.6.3. 在线用户2.6.4. 并发度(并发率)2.6.5. 事…

Kubernetes进阶对象Deployment、DaemonSet、Service

Deployment Pod 在 YAML 里使用“containers”就可以任意编排容器,而且还有一个“restartPolicy”字段,默认值就是 Always,可以监控 Pod 里容器的状态,一旦发生异常,就会自动重启容器。 不过,“restartPo…

Java小游戏之汤姆猫

背景: 博主写过羊了个羊小游戏,客户觉得羊了个羊同学写过了,想换一个,于是笔者想到了汤姆猫。就是那个以前在苹果手机上的猫。 过程: 初始会有一个猫的图片展示,然后你点击按钮,猫会有不同动作…

C++进阶之路:何为默认构造函数与析构函数(类与对象_中篇)

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

Web3与物联网:构建智能连接的数字世界

引言 随着互联网的不断发展,物联网(Internet of Things, IoT)作为一种新兴的信息技术,正在逐渐渗透到我们的生活和工作中。而随着Web3的兴起,物联网将迎来新的发展机遇。本文将探讨Web3与物联网的结合,如何…

如何在职场中构建稳固地位:持续学习、拓展人脉与职业规划

在日益激烈的职场竞争中,保持一种稳健且前瞻性的状态是至关重要的,它可以帮助我们在各种“裁员潮”中保持相对安全的位置。以下是一些建议,帮助我们判断和维持在职场中的安全位置: 首先,持续学习和提升技能是关键。职场…

2024年NOC大赛创客智慧(西瓜创客)图形化复赛编程真题模拟试卷包含答案

NOC 复赛图形化模拟题 【题目要求】 1、添加角色小猫和“Balloon1”角色气球(大小 70) 2、添加背景“Boardwalk” 3、点击绿旗,角色初始位置如图,小猫从舞台左侧出发,向舞台右 侧移动,移动过程中不断切换造型 4、当小猫碰到气球角色,小猫停止移动,气球逐渐向舞台上方…

FFmpeg开发笔记(二十七)解决APP无法访问ZLMediaKit的直播链接问题

上一篇文章介绍了如何通过ZLMediaKit实现视频推拉流,并使用VLC播放器验证视频直播地址。即使不用VLC播放器,直接在Qt工程的C代码中调用FFmpeg的API,也能访问ZLMediaKit的直播地址,并正常渲染视频画面。关于如何在Qt工程中引入FFmp…

Oracle中全量CHECKPOINT和增量CHECKPOINT的区别与作用

全量CHECKPOINT和增量CHECKPOINT对用户都是透明的,而增量CHECKPOINT只不过是将全量CHECKPOINT要写的脏块分时间分批次写到数据文件中而已,此操作可以极大地减少对数据库性能的影响。 全量CHECKPOINT 全量CHECKPOINT是指DBWR进程将脏缓冲区列表中的脏块一…

Spring Boot集成Security快速入门Demo

1.什么是Security? Spring Security是一个Java框架,用于保护应用程序的安全性。它提供了一套全面的安全解决方案,包括身份验证、授权、防止攻击等功能。Spring Security基于过滤器链的概念,可以轻松地集成到任何基于Spring的应用…

ifconfig 无输出

https://www.cnblogs.com/YYFaGe/p/14482813.html YYFaGe 博客园首页联系管理随笔 - 56 文章 - 0 评论 - 2 阅读 - 94650 ifconfig 无输出 在终端执行ifconfig发现无任何输出,也无报错(基于hi3559av100开发板)。 1、参考这个连接解决&…

月薪3万,沉迷“薅羊毛”

在网购江湖中,蟹老板是一位拥有十年经验的资深“羊毛党”。 他不仅是位精明的数学家,更是一位高效的“生产线”工人,专注于各大网购平台的优惠机制。每逢618大促,他总能凭借超凡的洞察力和手速,轻松斩获丰厚的“羊毛”…

peft+llama3训练自定义数据

要微调自己的模型训练 LLaMA 3,则需要准备一个 JSON 格式的数据集,其中每个条目包含输入文本和相应的标签(如果有的话)。以下是一个 JSON 数据集的示例格式: [{"input": "这是一个输入样本。",&q…

17.高并发场景下CAS效率的优化

文章目录 高并发场景下CAS效率的优化1.空间换时间(LongAdder)2.对比LongAdder和AtomicLong执行效率2.1.AtmoictLong2.2.LongAdder2.3.比对 3.LongAdder原理3.1.基类Striped64内部的三个重要成员3.2.LongAdder.add()方法3.3.LongAdder中longAccumulate()方…

pytorch-13_1 深度学习之数据准备

1、手动实现训练集和测试集的切分 1. data_split()函数 接下来我们开始实践模型评估过程,首先是对训练集和测试集的划分,我们尝试创建一个切分训练集和测试集的函数。 def data_split(features, labels, rate=0.7):"""训练集和测试集切分函数:param feature…

搜索二维矩阵 - LeetCode 热题 64

大家好!我是曾续缘🧡 今天是《LeetCode 热题 100》系列 发车第 64 天 二分查找第 2 题 ❤️点赞 👍 收藏 ⭐再看,养成习惯 搜索二维矩阵 给你一个满足下述两条属性的 m x n 整数矩阵: 每行中的整数从左到右按非严格递增…

六西格玛绿带培训:解锁质量工程师的职场新篇章

在质量管理这条道路上,我们或许都曾有过这样的疑问:为何付出了同样的努力,却未能获得预期的回报?当我们看到身边的同行们逐渐步入高薪的行列,而自己却似乎陷入了职业的泥沼,这种对比无疑令人倍感焦虑。然而…

了解等保测评的中间件安全Tomcat,如何检查配置是否符合安全要求?

在等保测评中,Tomcat中间件的安全性是一个重要的评估内容。Tomcat是一个开源的应用服务器,广泛应用于Web应用程序的开发和部署。由于其易用性和灵活性,Tomcat成为了一个受欢迎的目标,被黑客攻击和滥用。因此,保证Tomca…