- 渐变过渡的相册(shader)
效果演示 相册是一个大家比较熟悉的场景,一般我们是实现的都是那种跑马灯式的轮播相册,这里异名给大家提供一个利用shader实现图片渐变过渡的相册思路 [图片] 实现思路 拆分一下功能点,主要有两个:一个是实现图片的渐变,一个是实现图片的切换。 图片的渐变可以理解为随着时间的变化,在某一方向上的局部的像素点的透明度变化。demo中实现的效果是一个水平滚轴式的切换,水平平移在数学上的实现其实就是一个简单的关于时间变化的垂直直线[代码]x = time[代码],我们只需要把每个像素点的x坐标和这个垂直直线做比较,在左边的透明度设为0,在右边的透明度设为1,然后再通过平滑取样就能够有渐变过渡的效果: [代码]void main () { vec4 color = vec4(1, 1, 1, 1); color *= texture(texture, v_uv0); color *= v_color; #if USE_TRAMSFORM color.a = smoothstep(0.0, u_fade_radius, u_fade_radius + v_uv0.x - u_time); #endif gl_FragColor = color; } [代码] 实现了图片的渐变,接下来就是图片的切换,所有的图片其实都在一个队列当中,我们在渐变完成之后只需要把最上面的的那张图片放到最下面,就能够让这个相册一直在循环播放,在这个过程中我们再加上一些图片的状态处理就能够是实现demo中的渐变相册效果了 [代码]isTransforming: boolean = false; bgTramsform() { if (this.isTransforming) return; this.isTransforming = true; let time = 0.0; let node = this.switchNodeList[0]; let material = node.getComponent(cc.Sprite).getMaterial(0); material.setProperty('u_fade_radius', this.fadeRadius); material.setProperty('u_time', time); material.define('USE_TRAMSFORM', true, 0, true); let timer = setInterval(() => { time += 0.03; material.setProperty('u_time', time); if (time > 1.0 + this.fadeRadius) { this.switchNodeList.shift(); this.switchNodeList.push(node); this.switchNodeList.forEach((node, idx) => node.zIndex = this.switchNodeList.length - idx) material.define('USE_TRAMSFORM', false, 0, true); this.isTransforming = false; timer && clearInterval(timer); } }, 30); } [代码] [图片] 效果预览 源码获取请点击查看原文,长按二维码查看效果👇 [图片] 我是异名,你的阅读是我的动力,其他文章链接: 马赛克效果(shader) 融球效果(shader) 颜色滤镜(shader) 水波扩散效果(shader) 镜面光泽效果(shader) 圆形头像(shader) 追光效果(shader) 溶解效果(shader) 富文本打字机效果 放大镜效果 子弹跟踪效果 微信小游戏超出4M之后 残影移动 刮刮卡实现 金币落袋效果 遥控杆实现 背景无限滚动 Cocos游戏开发入门最佳实践 使用Cocos进行2D和3D混合开发 [图片] 源码地址:https://github.com/ifengzp/cocos-awesome/
2020-06-07 - 小程序被封禁了IOS使用,现在按照要求进行修改并审核通过,能帮忙解封一下吗?
[图片] 已经按照相关要求进行修改,并已通过审核,申请解封IOS~ 站内信中已经申诉过一次,未通过审核,已经没有入口可以申诉,希望大神帮忙解决一下 谢谢~ 辛苦啦~ [图片] [图片] [图片]
2019-08-09 - 小程序被封禁了IOS使用,申诉时上传错安卓手机的截图了,审核失败,如何再次申诉?
您好: 申诉时错传了安卓手机的截图,如何再次申诉啊,着急,辛苦帮忙看看~ 已经删除课程购买相关的文案和图片 [图片] [图片]
2019-07-31