【步兵 shader】扫光

【步兵 shader】扫光 By EOS.

扫光这个需求很常见，一是给界面添加些许生气，二则是让界面上的重点突出出来。
往往 一个静止的界面中 突然有东西动了，就会很容易引起人的注意。

---

实现方式

扫光的实现方式有很多中，各有优缺点，可能你觉得shader实现是最高大上的，可能在美术眼里，
这种表现效果却是最low的，所以还是一切以最终要的效果为基准来定制策略。

1. 帧动画【spine或其他】
   优点：效果丰富、程序使用简单
   缺点：帧数多资源大，占用内存多，每个不同形状要特效

2. 单张图片+裁剪+叠加模式
   优点：颜色和扫光形状替换简单、且扫光边缘过度自然、无视形状
   缺点：不同效果需要不同图片、且使用时要指定裁剪图片和扫光图片略微复杂

ps：我目前用的是这种用的较多，最大的一个特点就是他是通过图片的移动来扫光的，
所以可以通过相对位置计算，不同控件的起始位置重合，一起移动，从而实现跨空间扫光的效果。
这是个很cool的效果，有机会你们可以试试。

1. shader实现
   优点：无视图片大小，无需资源，能达到自然的曝光效果
   缺点：不易控制，边缘过于生硬。

因为shader的核心是利用直线方程的移动，已经计算两条直线方程的距离来实现。
所以边缘自然是直线，所以没有方案2中的美术来控制行转和透明度的效果好，
但曝光效果由于是计算出来的所以也有它的独到之处。

---

效果图

从左往右扫

从上往下扫