记录--怎么实现一个3d翻书效果

大万

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

本篇主要讨论以下两种翻书动画的实现：
第一种是整页翻转的效果：

这种整页翻转的效果主要是做rotateY的动画，并结合一些CSS的3d属性实现。
第二种折线翻转的效果，如下图所示：

主要是通过计算页面翻折过来的位置。
这两种原理上都不是很复杂，需要各个细节配合好，形成一个连贯的翻书动画。
我们先重点说一下第一种翻页效果的实现。
1. 基本布局

这种的实现相对比较简单，我们先把DOM结构准备好，如下代码所示：

1. <ul >
2.    
3.     <li  data-left>
4.         
5.         
6.             <img src="https://www.cnblogs.com/1.jpg" alt>
7.         
8.         
9.             <img src="https://www.cnblogs.com/2.jpg" alt>
10.         
11.     </li>
12.     <li  data-right>
13.         
14.             <img src="https://www.cnblogs.com/3.jpg" alt>
15.         
16.         
17.             <img src="https://www.cnblogs.com/4.jpg" alt>
18.         
19.     </li>
20.    
21. </ul>

复制代码

一个li.paper就表示一张纸，包含了正反两页，data-left属性表示它是在左边的，而data-right表示是在右侧，通过absolute定位把它们放到相应的位置。所以如果是下一页，应该让data-right做左翻的动画，相反上一页则让data-left做右翻的动画。
.page-1是当前显示在左边的那一页，.page-2表示当前右边的那一页，而.page-1-back和.page-2-back则分别表示在.paeg-1和.page-2后面的那一页。它们置于背后是水平翻转的，这一点应该不难想象，所以需要借助transform: scale水平翻转一下：

1. .page-1-back,
2. .page-2-back {
3.     transform: scale(-1, 1);
4. }

复制代码

并且.page-1的z-index要比在后面的.page-1-back要高：

1. .page-1,
2. .page-2 {
3.     z-index: 1;
4. }

复制代码

通过这样排版之后，就得到了以下的布局：

接下来让右边的那一页翻过来。
2. 翻书动画

就是做.paper的rotateY动画，很简单，如下代码所示：

1. @keyframes flip-to-left {
2.     from {
3.         transform: rotateY(0);
4.     }
5.     to {
6.         transform: rotateY(-180deg);
7.     }
8. }
9. .paper[data-right] {
10.     transform-origin: left center;
11.     animation: flip-to-left 2s ease-in-out;
12. }

复制代码

需要设置变换中心为左边中间的位置，效果如下：

 我们发现有几个问题，第1个问题是翻过去的后面的那个paper没有显示出来，因为一开始把没显示出来的paper都隐藏了，所以需要把后面那个paper显示出来：

1. .paper {
2.     display: none;
3.     position: absolute;
4.     /* 默认放在右边 */
5.     right: 0;
6. }
7. .paper[data-left],
8. .paper[data-right] {
9.     display: block;
10.     z-index: 1;
11. }
12. .paper[data-left] {
13.     right: auto;
14.     left: 0;
15. }
16. /* 把相邻的paper显示出来 */
17. .paper[data-right] + .paper {
18.     display: block;
19. }

复制代码

这样翻过来之后就能显示后面的那个paper了，如下图所示：

第二个问题是：为什么.page-2-back没显示出来，仍然显示的是.page-2，猜测是因为.page-2的z-index比较高，把.page-2-back盖住了，所以即使整体rotate属性变了，它也是被盖住的状态。
所以第一个方法可以在翻转一半的时候就把z-index的高低关系互换一下，让page-2-back比page-2更高，但是这个方法不太好控制，因为动画的变化不是linear的，即使是linear的这个方法也不灵活，容易出现闪动的情况。
第二个方法是调整它们俩的translateZ关系，让page-2的translateZ值比page-2-back高1px就可以了，而不是直接设置z-index关系。为了让translateZ能生效，需要设置它们容器的transform-style为preserve-3d，如下代码所示：

1. .paper {
2.     transform-style: preserve-3d;
3. }
4. .page-1,
5. .page-2 {
6.     transform: translateZ(1px);
7. }

复制代码

这个可以让子元素从扁平空间(flat)变成一个3维空间，translateZ就能发挥作用了，效果如下所示：

 这样基本的效果就出来了，但是总感觉哪里不太对，就是这个翻转有点平，没有景深的效果。说到景深会想起另外一个CSS属性transform-perspective，我们不妨给它加一个perspective看看效果如何：

1. @keyframes flip-to-left {
2.     from {
3.         transform: perspective(1000px) rotateY(0);
4.     }
5.     to {
6.         transform: perspective(1000px) rotateY(-180deg);
7.     }
8. }

复制代码

效果如下图所示：

 这样看起来感觉就立体多了。perspective可以理解为摄像机的位置，如果值越大摄像机就推得越远。不同值对比如下：

这样翻书的动画基本就完成了，从左向右翻也是同样道理。接下来的问题是怎么形成连续翻书的动画。
3. 连续翻书

可以给动画加一个forwards属性，让动画保持在最后结束的那个状态：

1. .paper[data-right] {
2.     transform-origin: left center;
3.     animation: flip-to-left 2s ease-in-out forwards;
4. }

复制代码

停住之后，上面那些类的关系需要重新更新一下，例如翻过来之后原本的.page-2-back会变成.page-1。
比较科学的方法是使用element.animate做动画，因为它有一个onfinish的回调告诉我们动画结束了，动画由于这个API的兼容性不是很好，要么找个polyfill，要么还是用上面CSS的方法然后借助setTimeout。polyfill的库比较大，这里还是用setTimeout模拟动画结束，使用setTimeout的风险是可能会不太准。
代码逻辑比较简单，就是找到对应的dom结点设置对应的类或者属性，就是代码比较繁琐一点，如下所示：

1. let currentPage = 1;
2. let $ = document.querySelector.bind(document);
3. $('#next-page').addEventListener('click', goToNextPage);
4. const flipAnimateTime = 1000;
5. function goToNextPage () {
6.     // 触发CSS动画
7.     $('.paper[data-right]').setAttribute('data-begin-animate', true);
8.     setTimeout(() => {
9.         // data-right变成data-left
10.         let $rightPaper = $('.paper[data-right]'),
11.             $leftPaper = $('.paper[data-left]');
12.         $rightPaper.removeAttribute('data-right');
13.         $rightPaper.setAttribute('data-left', true);
14.         // data-left没有了
15.         $leftPaper.removeAttribute('data-left');
16.         $leftPaper.querySelector('.page-1').classList.remove('page-1');
17.         $leftPaper.querySelector('.page-1-back').classList.remove('page-1-back');
18.         // 重新设置类的关系
19.         $leftPaper = $rightPaper;
20.         $rightPaper = $leftPaper.nextElementSibling;
21.         $leftPaper.querySelector('.page').classList.add('page-1-back');
22.         $leftPaper.querySelector('.page + .page').classList.add('page-1');
23.         // 如果还有下一页
24.         if ($rightPaper) {
25.             $rightPaper.setAttribute('data-right', true);
26.             $rightPaper.querySelector('.page').classList.add('page-2');
27.             $rightPaper.querySelector('.page + .page').classList.add('page-2-back');
28.         }   
29.         currentPage++;
30.     }, flipAnimateTime);
31. }

复制代码

效果如下图所示：

向左翻页也是类似。
这里有个问题，如果用户点下一页点得很快那应该怎么办？如果他点得很快的话前面的翻页还没有结束，会导致setTimeout里的代码还没有执行，那么整个模型就乱了。有两个解决方法，第一种是在翻页过程中禁掉下一页的操作，但是似乎不太友好，第二种是把翻页的过程当作一个task任务，一旦点了下一页或者上一页，就push一个task进来，每个task按顺序同步执行，如果task数组长度大于1那么就缩短动画的时间，让它翻得快一点。相似的处理我已经在《实现内部组件轮播切换效果》讨论过，这里不再重复。
4. 适配的问题

你可能会担心动画结束后修改了dom结构，导致CSS属性变了会闪一下，例如原本的page-2-back是水平翻转的，但是在JS里面设置了之后它就变成非水平翻转了，虽然展示的效果是一样的，但是会不会闪一下呢？只要改之前和改之后浏览器进行layout计算的结果一模一样它就不会闪的，就像上面的例子，但是一旦位移差了1px，就会有闪动。
在实际的例子，你可能需要中间有1px的书缝的阴影，所以左右页的宽度就不是刚好50%，而是要减去1px，所以如果你的transform-origin还是left center的话翻过去之后就会往右移了1px，当动画结束重置状态，1px的偏移就会被修正，这个时候就会小闪一下。而当你把transform-origin改成-1px center之后，又会导致翻过去之后往左移了1px。所以最好别把中间的阴影单独弄出来，可以改成在每一个page里面用before/after画，每个page还是要占50%，这样就没问题。
另外一个要考虑的问题是，使用了transform: scale + translateZ可能会导致模糊，一个直接的例子可以见这个codepen，就是因为用了translateZ或者will-change: transform等触发了GPU渲染导致模糊了，这个过程可能是浏览器把当前图层截一张图给GPU计算，GPU把这张静态图缩放就会模糊。而当我们把translateZ等有promotion提升作用的属性去掉之后，在缩放的过程会模糊，但是最终状态是清晰的。如下图所示：

5. 变成一个插件

当把上面的问题都解决了之后，可以把它变成一个插件，用的人只要引入，然后初始化一下就搞定了，不用关心这些类怎么变之类的问题。
并且，由于一个paper容器有两个page是正反面的关系，一旦中间突然插入了一页就会导致page的正反面关系发生变化，所以这个结构不是很灵活，最好是动态生成，也就是说使用插件的人，把所有的page并列排就好了，然后在插件里面再重新组织下DOM结构，把在正反面的两个page放到一个paper里面。
 
接着讨论下第二种翻书效果的实现。
6. 折线翻书效果的实现

这个有一个现成的插件turn.js，使用起来非常简单，我们简单讨论一下它的内部实现。
这个东西乍看一下，似乎有曲面的效果：

 但实际上是没有的，这个曲线效果是它添加的阴影和渐变产生的视觉效果，当我们把background-image的渐变去掉之后对比一下就能看出来了：

 没有渐变的伪装之后一下子就平了。它就变成了一个折纸的模型——给定一张纸和一个折过去的点，计算一下折过去的旋转角度和位移。它的源代码是在fold函数里面计算的：

它里面有各种余弦正弦的计算和角度的判断，具体实现还是比较复杂的，没有深入去研究，代码可见turn.js.
还有一个问题是它是怎么实现三角形裁剪展示的效果？它是在上层又盖了一个div：

7. 小结

本文讨论了两种翻书效果的实现，重点讨论了一下比较简单的整体翻页的方式，这种方式主要是做rotateY动画，同时打开perspective让其具有景深效果，并且用preserve-3d结合translateZ制造上下层级关系，这种方式可能会存在闪动和模糊的问题，为了让翻过去不会闪动关键的地方是保证每一个page占宽50%，模糊的问题是因为用了scale加上GPU提升导致的，所以只能通过不写3d属性保证清晰。
第二种的效果模型相对比较复杂，简单分析了一下它的原理和实现方式。主要是计算折纸过来的角度和位移，上层再盖一个div隐藏不露出来的部分。然后再加上阴影和渐变制造一种曲面的效果。这种翻书的效果还是挺好玩的。
本文转载于:

https://juejin.cn/post/6844903665216520206

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

来源:https://www.cnblogs.com/smileZAZ/p/17663120.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！