优联前端（Pixi.js）
关注
分享
扫一扫
https://ufrontend.com
优联前端
技术实力：主流技术全覆盖，Web前端技术，微信小程序，2D/3D游戏技术，动画交互技术等主流技术全覆盖，轻松实现客户项目需求。
动画交互技术：公司引入动画交互技术，优化产品细节及用户体验。
性能优化：公司对项目加载速度、卡顿、性能等方面做严格测试和优化，确保产品在各个平台终端运行流畅。
项目管理：专业化的项目管理，管理中融入产品化思维，确保项目准时高质量交付。
用户体验：用户体验设计与交互技术结合，深度挖掘用户需求，提高产品可用性，增强用户粘性。
企业邮箱：info@ufrontend.com
企业官网：https://ufrontend.com
展开
-
使用Pixi.js 图片切换特效(图片分段下滑以及复原)
首先是顶点着色器的代码,其中需要用到的aVertexPosition,aUvs,noiseValue会通过外部计算后传入，animationHeight表示位移的高度，animationParam是用来控制顶点位置的0表示在最底端，1表示在最顶端。将图片按宽高切分为x*y(具体可以自己调整)个矩形区域，对每个顶点分配一个随机值noiseValue(-1到1之间),在顶点着色器中根据这个随机值而做出不同的y轴位移效果从而实现出分段的下滑或者复原的效果。个顶点，并计算出每个点的noiseValue。原创 2024-05-16 09:15:00 · 667 阅读 · 0 评论 -
使用Pixi.js 画一颗闪耀的心心（粒子图片特效,以及拓展）
以上效果可以通过替换图片形成不同的粒子图片，可以通过配置参数，达到不同的展示效果。：利用图片的像素信息，遍历图片的所有像素点，在自定义的规则下，满足条件的像素点位置画出小五角星，每一帧去刷新小五角星的属性，位置，大小，透明度等等。可以看出，会根据图片的位置信息和像素信息创建出一组粒子，分布在一个半径为屏幕宽度一半的圆上.结合上面update的代码可以不停更新粒子的位置等属性。可以看出，有两部分粒子的初始化，一种是随机飞的粒子，一种是图片形状粒子,先看随机粒子的代码部分，由于很简单，不做分析.原创 2024-05-15 09:15:00 · 795 阅读 · 0 评论