水排序中的这个效果怎么实现？

Water Sort Puzzle!

效果

这次咱们来实现杯子倾斜中的水面效果。

效果预览:

视频预览:

实现

首先，简化模型，杯子当作长方形处理，仅考虑杯子旋转范围-90 ~ 90度。

水面渲染可采用graphics绘图组件处理(把原点移动至杯子左下角作为原点)，再添加一层mask图片遮罩，裁剪出杯子效果。

确认已知条件：

• 杯子的宽高。

• 杯子旋转角度。

• 水面初始高度(杯子未旋转时)。

需求出：

• 水面与水杯的交点位置。

先考虑杯子节点顺时针旋转(angle为正)。

水面会出现两种情况，我们只需把握一个原则，水的体积(面积)不变。

梯形形状计算过程如下图所示：

梯形

三角形形状计算过程如下图所示：