说明：之前的part10帖子好像又不见了，貌似规律是连续提交多个在审核的帖子，最早提交的那个就会没…
功能描述：
实现游戏UI中常见的变形动画效果模板，实现从形状A->B的中间态动画的Morph动画过渡效果。
效果：
参数：
//SDF纹理贴图
sdfTexture: { value: white }
// 变形动画持续时间系数
period : { value: 1.0, editor: { slide : true, range : [1.0,3.0], step: 0.1 } }
//二值化蒙版阈值
threshold : { value: 0.5, editor: { slide : true, range : [0.0,1.0], step: 0.01 } }
//原始形状停留时间系数
pauseTime : { value: 0.2, editor: { slide : true, range : [0.0,1.0], step: 0.01 } }
核心思路：
制作一张纹理使其每个通道分别存储一个形状的SDF贴图，贴图的绘制可以通过程序化生成，也可以通过photoshop等软件自己绘制。然后对贴图的通道采样并且根据过渡时间进行混合，再通过设置的阈值二值化蒙版获得变形动画效果。
vec4 frag () {
//使用纹理采样获取SDF
vec4 col = texture(sdfTexture, v_uv);
//使用正弦函数对时间采样来获取变换的周期性
float morphValue = clamp((1.0 + pauseTime) * (sin(cc_time.x / period) + 1.0), 0.1,1.0);
//使用混合通道用阈值二值化混合
col = mix(col.r, col.g, morphValue) > threshold ? vec4(1.0) : vec4(0.0, 0.0, 0.0, 1.0);
return CCFragOutput(col);
}
扩展阅读: 了解SDF。另，此功能多见于作为UI动画的变形轮廓蒙版。
