【分享】纯 Shader 实现 Loading 动画

好久没分享了~,以前的帖子

【分享】【新年的礼物】Cocos Creator Shader Effect 系列(2020.02.17 支持Cocos Creator 2.3.0 正式版的材质系统)

不能更新了,帖子也有很多评论了,楼已经很高了,相信大家也是看得有点累了。

大家理解为之前的帖子是一个入门贴吧,算是一个短暂的终点。

这次给大家带来一个纯 Shader 实现的简单 Loading 动画(学习用)

这里面你将能了解到

  1. 怎么画图形
  2. 怎么动起来(cc_time)
  3. 抗锯齿的一些思路(smoothstep)

以及在巩固一下的坐标映射/矩阵旋转的相关知识

整体实现思路

人类理解方式:

  1. 先画圆弧
  2. 后画小球
  3. 旋转画布(矩阵旋转)
  4. 应用 cc_time 调整旋转角度

实际处理顺序:

  1. 求 v_uv0 映射、(画布)矩阵旋转后坐标
  2. 画圆弧
  3. 画小球(在圆弧上叠加小球)

项目地址

13赞

:grin: 大佬强!:+1:

小弟写了一个比较简单的。

画小球->画一圈->动起来。

shader 动画之 loading 特效-文章

shader 动画之 loading 特效-视频讲解

1赞

markk