用 Cocos Creator 模拟书本翻页效果

本篇文章作者：乐府-贝塔

乐府-贝塔：乐府前端核心开发，从事游戏开发多年，从 Cocos2d-x 做到 Cocos Creator，擅长渲染技术的相关优化。多年的前端开发经验激发了对技术研究的深厚兴趣，希望与更多 Cocos 技术爱好者广泛交流。

1、简介

本文主要探讨了如何使用 Cocos Creator 来模拟书本翻页效果，分别介绍了通过使用贝塞尔曲线和 verlet 积分算法来模拟书页底边在翻页过程中的弯曲形变，最后通过自定义 assembler 传入更多的顶点，来将原本的书页纹理渲染成弯曲后的样子以达到模拟翻页的效果。

由于篇幅限制，本文没有包含相关数学公式的具体推导过程，有兴趣的同学可以自行上网搜索。

Demo 引擎版本：v2.3.1

Demo 地址：

https://github.com/BlubluBlue7/Page

首先展示一下最终实现的效果：

2、问题分析

书页在翻动的过程中会产生一定的弯曲形变，这就意味着在每一帧中，我们所看到的书页都具有不同的形状，如果使用序列帧动画来实现，就要对每一帧单独绘制一张图片，这样将产生大量的资源。如果能够通过代码来模拟，就可以避免资源问题。

所以，我们要解决的问题就变成了如何将原本的书页图片渲染成翻页过程中的弯曲状态呢？

我们先观察一下书页形变后的样子:

通过上面这张图，我们发现，可以将书页的形变简化成这样：

1.把书页的底边想象成一根绳子，固定左边的位置不变，拉着右边向左上方位移形成一条曲线。

2.将整个书页沿着这条曲线向上位移。

通过以上两个步骤，我们就可以模拟出书页在任何一个时刻的样子。不同时刻书页形态的区别实际上就是曲线的不同，只要能够获得任意时刻书页底边的那条曲线，就能模拟出翻页的效果。

3.解决方案

那么，该如何获得那条曲线呢？这里提供两个方案。

• 贝塞尔曲线

（1）背景介绍

贝塞尔曲线是应用于二维图形应用程序的数学曲线 ，通过至少 3 个控制点，就可以描述出一条曲线。N 阶贝塞尔曲线拥有 N+1 个控制点。

以 3 阶贝塞尔曲线为例，它的具体公式如下：

只要确定了起点 P0，控制点 P1，控制点 P2 和终点 P3，就可以画出这样一条曲线，它将和 P0P1、P2P3 分别相切。

（2）实现

也就是说，只要找到任意时刻 4 个控制点的位置，我们就可以把书页底边的曲线模拟出来。