微信小程序实现翻效果

最近要在微信小程序里实现一个类似翻页的场景，网上翻看了多个案例无非就两种实现，第一种通过css 3d变换 动画实现，第二使用Turn.js现成库。前者实现效果一般，后者js库是基于古老的JQuery来实现的并没办法移植到小程序了里。

下面就自己调研了一下turnjs来实现小程序的简单版本

turnjs效果截图

我的实现思路：

1. 排版布局，通过绝对定位方式实现书页堆叠到一起就行（随意发挥）
2. 监听touchmove事件，来确定拖拽时的动态坐标
3. 根据拖拽页角的位置来计算翻页的角度和大小
4. 通过css transfrom来创建一个背面露出来的部分
5. 通过css clip-path来切出来下页露出来的部分（这里我的实现方案和turnjs不太一致，因为我在开发过程中发现clip-path这个属性实现起来更方便）
6. 最后实现自动翻页

上代码：

WXML:

1.  
   <!-- 书页 -->
2.  
   <view
3.  
   wx:for="{{paper}}"
4.  
   hidden="{{pagenum > paper.length - index - 1}}"
5.  
   wx:key="index"
6.  
   class="list-pape"
7.  
   style="{{index == paper.length - pagenum - 1 ? clipPath1 : ''}}"
8.  
   catchtouchstart="touchstart"
9.  
   catchtouchmove="touchmove"
10.  
    catchtouchend="touchend">
11.  
    <image src="{{item}}"></image>
12.  
    </view>
13.  
    <!-- 背面部分 -->
14.  
    <view class="page-back" style="{{transformCss}};{{clipPath2}};{{transformOrigin}}">
15.  
    <image src="{{pageBackImage1}}"></image>
16.  
    </view>

JS(核心代码):

1.  
   touchmove(e){
2.  
   let clientX = e.touches[0].clientX;
3.  
   let clientY = e.touches[0].clientY;
4.  
   this.flippingPage(clientX,clientY);
5.  
   },
6.  
   //计算翻书效果
7.  
   flippingPage(clientX,clientY){
8.  
   // 本人比较懒，这里写死了书的宽度和高度
9.  
   let width = 287;
10.  
    let height = 450;
11.  
     
12.  
    let x = width - clientX;
13.  
    let y = height - clientY;
14.  
     
15.  
    let a = ((x/2 * x/2) (y/2 * y/2)) / (x/2);
16.  
    let b = ((x/2 * x/2) (y/2 * y/2)) / (y/2);
17.  
    a = a > width ? width : a;
18.  
     
19.  
    let angle = (Math.atan(a / b) * (180 / Math.PI));
20.  
    angle = 180 - angle * 2;
21.  
     
22.  
    this.setData({
23.  
    pageBackImage: this.data.paper[this.data.paper.length - this.data.pagenum - 1],
24.  
    transformCss: 'transform: rotateX(180deg) rotateZ(' angle 'deg)',
25.  
    transformOrigin: 'transform-origin: right ' (height - b) 'px',
26.  
    clipPath2: 'clip-path: polygon(100% 100%, ' (width-a) 'px 100%, 100% ' (height - b) 'px)',
27.  
    clipPath1: 'clip-path: polygon(0% 0%, 0% 100%, ' (width-a) 'px 100%, 100% ' (height - b) 'px, 100% 0%)',
28.  
    })
29.  
    },

解释下这里的计算逻辑：

1. 这里的clipPath1是示例图1的露出部分的裁剪区域，实现这里效果，其实就是对上一页的(p1-p2-p3-p4-p5)坐标的裁剪
2. 那剩下的关键就是算出O-P3和O-P4的距离（三角函数自行推导）
3. 最后得出P1-P5的所有坐标，所得样式为： 'clip-path: polygon(p1,p2,p3,p4,p5)'

1.  这里的clipPath2是示例图2的背面部分的裁剪区域 
2. 这里做红色背面部分其实也是对上一页进行 （镜像 - 旋转 - 裁剪） 所得
3. 旋转角度为：2倍的∠ap4p3
4. 裁剪区域为红色区 a-p4-p3

这篇好文章是转载于：学新通技术网