Get best of the week

现实页面在JS上的效果

我提请您注意-实现一个相当有趣的技巧以创建逼真的翻页效果的可能选择之一。Github



演示和文档 ，在大学和德尔福，我长期以来都实现了类似的效果。事实证明值得，尽管那时我花了很多时间。现在-在自我隔离的时期，在JS上为PC和移动设备实现类似的东西变得很有趣。 坦白说，我不确定这种效果的实际适用性，而且我认为在大多数情况下，没有任何变化比没有任何动画的简单图片更改更好。但是，很有可能在餐馆网站上使用它来发布菜单（但最重要的是-将在链接旁边重复！）。






一切都用Typescript编写。没有使用第三方库。没有依赖关系。

关键库功能


  • 使用CSS转换，可与简单图像，画布上渲染以及html块一起使用
  • 相当灵活的配置系统和简单的API
  • 支持移动设备
  • 纵向和横向模式之间自动改变方向

该代码仅针对ES6 +编写，而模块化系统也是ES6。根据caniuse.com，浏览器支持平均为90％。

安装


可以从npm安装：

npm install page-flip

或者，从存储库下载收集的文件，

基本的库初始化选项可能是这样的：

<div id="book">
    <div class="my-page">
        Page one
    </div>
    <div class="my-page">
        Page two
    </div>
    <div class="my-page">
        Page three
    </div>
    <div class="my-page">
        Page four
    </div>
</div>

import {PageFlip} from 'page-flip';
const pageFlip = new PageFlip(document.getElementById('book'),
    {
        width: 400, // required parameter - base page width
        height: 600  // required parameter - base page height
    }
);

pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));

有关API的更详细的说明和规范，请参见上面的链接。
我想谈谈我在开发过程中遇到的一些问题和细微差别。

计算方式


首先要讨论的是数学模型。原则上，所有计算都很简单，但是花了我很多时间。

需要解决的主要任务是确定翻页的变换角度。让我们看一下下图：



点“ A”表示书中的当前接触点。根据这一点的位置-有必要执行进一步的计算。

要确定角度-有必要计算两个值-从A点到书的上，右边界的距离。在下图中，它们分别由T和L表示。



G是角度的对角线，可以通过勾股定理来计算。

因此，要计算图像的旋转度，可以使用以下公式：angle =-2 * acos（L / G），最重要的是，在这种情况下，请不要忘记变换点位于页面的左上角。

在计算角度之后-剩下最耗时的部分-这是在计算页面可见性。显然应该留下什么，其余的分别去修剪。

首先，您需要找到要与书的边框翻转的页面的交点。在图中，它们用B点和C点表示。



我以最简单，最简单的方式-在额头上进行此操作。他用两点建立线的方程，然后寻找它们的交点。

找到所有相交点后，我们确定可见性区域的顶点-并在这些点处已修剪要翻转的页面。



基本上，这里的所有数学可以归结为两点：

  • 变换角计算
  • 页面可见性的计算

阴影已经基于先前进行的计算。

现在，让我们继续执行在实现过程中必须面对的一些问题。

通用算法非常简单，可以归结为页面翻页和裁剪。

对于画布和简单的图像，一切都非常简单。执行计算后，将使用2d canvas上下文方法，例如平移，旋转和剪辑。
用html块要复杂一些。而且，如果旋转没有问题-多亏了CSS转换，那么裁剪后一切都会变得更糟。

结果，最简单的方法是使用图形的剪贴路径和css属性-多边形。但是在设置用于裁剪的多边形顶点之前，有必要将“全局”画布中的点的坐标转换为相对于html元素的局部坐标。这可以通过反向应用旋转矩阵来解决，该旋转矩阵相对于元素的位置发生了偏移。

另一个问题是本书的缩放和自动定位。我尝试使用配置对象解决此问题，该对象在创建过程中传递。但是最后，有很多参数，结果证明不太方便，也不明显。

我首先使用Webpack进行组装，但最终我决定尝试使用rollup.js，最终代码使我感到非常惊喜。Webpack仍然存在，因为它可以快速地处理装配数次，并且在开发过程中更加方便。

我很高兴听到关于图书馆进一步发展的意见和建议。

More articles:


All Articles