收藏

下载资源 加入VIP,免费下载

第1页 / 共15页

第2页 / 共15页

第3页 / 共15页

第4页 / 共15页

第5页 / 共15页

复制代码

电子书的结构中包含一个主容器，它包含所有的页面和用来绘制翻页效果的canvas元素。

在section元素中包含一个div元素，它包含了电子书页面的内容，我们可以调整这个div的宽度而不影响页面内容的布局。

div有固定的宽度，同时section设置溢出隐藏，这样section元素的作用实际是作为div的水平方向的遮罩。

打开电子书，可以看到一个背景图片，它包含纸张的材质和书籍效果。

逻辑

实现翻页效果的代码并不是很复杂，但代码量很大，因为有很多图形效果需要用代码实现。

首先我们从代码中的常量开始说起，它的使用贯穿整个程序。

1.varBOOK_WIDTH=830;

2.

3.

4.varBOOK_HEIGHT=260;

5.

6.varPAGE_WIDTH=400;

7.

8.varPAGE_HEIGHT=250;

9.

10.varPAGE_Y=（BOOK_HEIGHT-PAGE_HEIGHT）/2;

11.

12.varCANVAS_PADDING=60;

复制代码

CANVAS_PADDING是canvas周围的留白，这样在翻页的时候页面可以超出书的尺寸。

要注意的是，这里设置的常量有的也在CSS中设置了这些值，所以如果你想修改书的尺寸，同样需要修改CSS中相应的值。

贯穿代码中的常量，用来跟踪鼠标交互并绘制翻页页面，下一步需要为每个页面定义一个flip对象，在翻页交互过程中，它会持续更新来反应当前翻页的状态。

1.//Createareferencetothebookcontainerelement

2.

3.

4.varbook=document.getElementById（"book"）;

5.

6.

7.

8.//Grabalistofallsectionelements（pages）withinthebook

9.

10.varpages=book.getElementsByTagName（"section"）;

11.

12.

13.

14.for（vari=0,len=pages.length;i

15.

16.pages.style.zIndex=len-i;

17.

18.

19.

20.flips.push（{

21.

22.progress:

1,

23.

24.target:

1,

25.

26.page:

pages,

27.

28.dragging:

false

29.

30.}）;

31.

32.}

复制代码

首先我们要保证section元素的z-index被有序的排列，这样页面才可以正确的排序，也就是说第一页在上面，最后一页在最下面。

flip对象最重要的属性是progress和target值。

它们用来定义翻动页面折叠的大小，-1表示整页翻到左边，0表示翻到书的中间位置，+1表示整页翻到书的最右边。

Progress和target值用来定义页面的折叠量，可以是-1到+1之间的值.现在每个页面都有自己的flip对象了，下面我们学获取用户的鼠标位置，并根据这个值开始翻页。

1.functionmouseMoveHandler（event）{

2.

3.

4.//Offsetmousepositionsothatthetopofthebookspineis0,0

5.

6.mouse.x=event.clientX-book.offsetLeft-（BOOK_WIDTH/2）;

7.

8.mouse.y=event.clientY-book.offsetTop;

9.

10.}

11.

12.

13.

14.functionmouseDownHandler（event）{

15.

16.//Makesurethemousepointerisinsideofthebook

17.

18.if（Math.abs（mouse.x）

19.

20.if（mouse.x<0&&page-1>=0）{

21.

22.//Weareontheleftside,dragthepreviouspage

23.

24.flips[page-1].dragging=true;

25.

26.}

27.

28.elseif（mouse.x>0&&page+1

29.

30.//Weareontherightside,dragthecurrentpage

31.

32.flips[page].dragging=true;

33.

34.}

35.

36.}

37.

38.

39.

40.//Preventsthetextselection

41.

42.event.preventDefault（）;

43.

44.}

45.

46.

47.

48.functionmouseUpHandler（event）{

49.

50.for（vari=0;i

51.

52.//Ifthisflipwasbeingdragged,animatetoitsdestination

53.

54.if（flips.dragging）{

55.

56.//Figureoutwhichpageweshouldnavigateto

57.

58.if（mouse.x<0）{

59.

60.flips.target=-1;

61.

62.page=Math.min（page+1,flips.length）;

63.

64.}

65.

66.else{

67.

68.flips.target=1;

69.

70.page=Math.max（page-1,0）;

71.

72.}

73.

74.}

75.

76.

77.

78.flips.dragging=false;

79.

80.}

81.

82.}

复制代码

mouseMoveHandler方法会实时更新mouse对象的内容，这样我们可以得到鼠标的精确位置。

在mouseDonwHandler中，检测鼠标是在书的左边还是右边按下，记得得知翻页的方向。

我还需要知道翻页方向的下一张是否还有页面，因为我们会遇到第一页或最后一页的情况。

如果所有的flip选项都有检测没有问题，设置该flip对象的dragging属性为true。

在mouseUpHandler中，我们会检测每个页面是否被拖动，如果是则释放该页面的拖动。

停止拖动后，页面会根据鼠标的位置决定是向前翻动还是向后翻动。

同时页面的页面也会被更新，作为页面的导航。

渲染

现在大部分的逻辑运算都已经完成了，下面我们要学习如果在canvas元素中渲染折叠的页面。

这些渲染的效果大部分都在render（）方法中完成，这个方法每秒钟会执行60次，来实时更新翻动页面的状态。

1.functionrender（）{

2.

3.

4.//Resetallpixelsinthecanvas

5.

6.context.clearRect（0,0,canvas.width,canvas.height）;

7.

8.

9.

10.for（vari=0,len=flips.length;i

11.

12.varflip=flips;

13.

14.

15.

16.if（flip.dragging）{

17.

18.flip.target=Math.max（Math.min（mouse.x/PAGE_WIDTH,1）,-1）;

19.

20.}

21.

22.

23.

24.//Easeprogresstowardsthetargetvalue

25.

26.flip.progress+=（flip.target-flip.progress）*0.2;

27.

28.

29.

30.//Iftheflipisbeingdraggedorissomewhereinthemiddle

31.

32.//ofthebook,renderit

33.

34.if（flip.dragging||Math.abs（flip.progress）<0.997）{

35.

36.drawFlip（flip）;

37.

38.}

39.

40.

41.

42.}

43.

44.}

复制代码

开始渲染之前，用clearRect（x,y,w,h）方法重置canvas。

重置整个canvas画布会大大降低运行的性能，相比之下，仅仅重置需要重新绘制的部分，效率会更高。

但是为了不偏离本教程的话题，我们还是重置更个canvas画布。

如果页面正在拖动，那么他的target值设置为鼠标坐标相对于电子书宽度的位置，而不是实际的像素值。

同时progress也会一点点增加至target值，这样翻动每帧都会更新，也就得到了我们看到的页面平滑的翻动动画效果。

因为每一帧都要遍历所有的页面，所以我们需要保证只重绘当前活动的页面。

如果页面翻动没有很接近书的边缘（BOOK_WIDTH的0.3%），或者页面的flagged属性值是dragging，我们认为该页面是当前活动的页面。

现在所有的逻辑运算都已经完成了，下面需要根据页面的当前状态绘制翻动页面效果。

我们来看胰腺癌drawFlip（）方法的第一部分。

1.//Determinesthestrengthofthefold/bendona0-1range

2.

3.

4.varstrength=1-Math.abs（flip.progress）;

5.

6.

7.

8.//Widthofthefoldedpaper

9.

10.varfoldWidth=（PAGE_WIDTH*0.5）*（1-flip.progress）;

11.

12.

13.

14.//Xpositionofthefoldedpaper

15.

16.varfoldX=PAGE_WIDTH*flip.progress+foldWidth;

17.

18.

19.

20.//Howfaroutsideofthebookthepaperisbentduetoperspective

21.

22.varverticalOutdent=20*strength;

23.

24.

25.

26.//Themaximumwidthsofthethreeshadowsused

27.

28.varpaperShadowWidth=（PAGE_WIDTH*0.5）*Math.max（Math.min（1-flip.progress,0.5）,0）;

29.

30.varrightShadowWidth=（PAGE_WIDTH*0.5）*Math.max（Math.min（strength,0.5）,0）;

31.

32.varleftShadowWidth=（PAGE_WIDTH*0.5）*Math.max（Math.min（strength,0.5）,0）;

33.

34.

35.

36.//MaskthepagebysettingitswidthtomatchthefoldX

37.

38.flip.page.style.width=Math.max（foldX,0）+"px";

复制代码

这部分的代码开始是一些变量的计算，它们用来绘制真实的页面翻动效果。

Progress变量在这些变量中扮演最重要的角色，因为它是页面要翻动到的位置。

为了添加深度效果，我们让页面可以超出书的边界，当页面翻动至书脊位置时，超出部分达到了极限。

页面翻动时的折叠效果.

现在所有的值都一个就位，万事俱备，只差绘制页面了！

1.context.save（）;

2.

3.

4.context.translate（CANVAS_PADDING+（BOOK_WIDTH/2）,PAGE_Y+CANVAS_PADDING）;

5.

6.

7.

8.//Drawasharpshadowontheleftsideofthepage

9.

10.context.strokeStyle='rgba（0,0,0,'+（0.05*strength）+'）';

11.

12.context.lineWidth=30*strength;

13.

14.context.beginPath（）;

15.

16.context.moveTo（foldX-foldWidth,-verticalOutdent*0.5）;

17.

18.context.lineTo（foldX-foldWidth,PAGE_HEIGHT+（verticalOutdent*0.5））;

19.

20.context.stroke（）;

21.

22.

23.

24.//Rightsidedropshadow

25.

26.varrightShadowGradient=context.createLinearGradient（foldX,0,

27.

28.foldX+rightShadowWidth,0）;

29.

30.rightShadowGradient.addColorStop（0,'rgba（0,0,0,'+（strength*0.2）+'）'）;

31.

32.rightShadowGradient.addColorStop（0.8,'rgba（0,0,0,0.0）'）;

33.

34.

35.

36.context.fillStyle=rightShadowGradient;

37.

38.context.beginPath（）;

39.

40.context.moveTo（foldX,0）;

41.

42.context.lineTo（foldX+rightShadowWidth,0）;

43.

44.context.lineTo（foldX+rightShadowWidth,PAGE_HEIGHT）;

45.

46.context.lineTo（foldX,PAGE_HEIGHT）;

47.

48.context.fill（）;

49.

50.

51.

52.//Leftsidedropshadow

53.

54.varleftShadowGradient=context.createLinearGradient（

55.

56.foldX-foldWidth-leftShadowWidth,0,foldX-foldWidth,0）;

57.

58.leftShadowGradient.addColorStop（0,'rgba（0,0,0,0.0）'）;

59.

60.leftShadowGradient.addColorStop（1,'rgba（0,0,0,'+（strength*0.15）+'）'）;

61.

62.

63.

64.context.fillStyle=leftShadowGradient;

65.

66.context.beginPath（）;

67.

68.context.moveTo（foldX-foldWidth-leftShadowWidth,0）;

69.

70.context.lineTo（foldX-foldWidth,0）;

71.

72.context.lineTo（foldX-foldWidth,PAGE_HEIGHT）;

73.

74.context.lineTo（foldX-foldWidth-leftShadowWidth,PAGE_HEIGHT）;

75.

76.context.fill（）;

77.

78.

79.

80.//Gradientappliedtothefoldedpaper（highlights&shadows）

81.

82.varfoldGradient=context.createLinearGradient（

83.

84.foldX-paperShadowWidth,0,foldX,0）;

85.

86.foldGradient.addColorStop（0.35,'#fafafa'）;

87.

88.foldGradient.addColorStop（0.73,'#eeeeee'）;

89.

90.foldGradient.addColorStop（0.9,'#fafafa'）;

91.

92.foldGradient.addColorStop（1.0,'#e2e2e2'）;

93.

94.

95.

96.context.fillStyle=foldGradient;

97.

98.context.strokeStyle='rgba（0,0,0,0.06）';

99.

100.context.lineWidth=0.5;

101.

102.

103.

104.//Drawthefoldedpieceofpaper

105.

106.context.beginPath（）;

107.

108.context.moveTo（foldX,0）;

109.

110.context.lineTo（foldX,PAGE_HEIGHT）;

111.

112.context.quadraticCurveTo（foldX,PAGE_HEIGHT+（verticalOutdent*2）,

113.

114.foldX-foldWidth,PAGE_HEIGHT+verticalOutdent）;

115.

116.context.lineTo（foldX-foldWidth,-verticalOutdent）;

117.

118.context.quadraticCurveTo（foldX,-verticalOutdent*2,foldX,0）;

119.

120.

121.

122.context.fill（）;

123.

124.context.stroke（）;

125.

126.

127.

128.context.restore（）;

复制代码

在canvas的API中tranlate（x,y）方法用来移动画布的坐标系统，以便于我们可以以书脊的顶端作为（0,0）原点来绘制翻动的页面。

注意，我们需要使用save（）方法保存当前canvas的变换，变换完成后调用restore（）方法。

绘制翻动页面的起始点，同translate（x,y）方法，将其从canvas的左上角移动到书脊顶端，这样简化了绘制的逻辑

foldGradient方法用来填充折叠的页面，同时绘制真实的高光和阴影效果。

同时我还为页面绘制了一条很窄的黑边，防止在较亮的背景下页面“消失”。

现在剩下的就是用我们前面定义的变量绘制折叠的页面。

页面左右两侧用直线绘制，顶部和底部绘制弯曲的曲线，产生一种纸张折叠的感觉。

页面的折叠程度由verticalOutdent值决定。

全文结束！

现在你得到的是一个完整的HTML5电子书。

翻书实例Demo

翻页效果是为了像用户传递正确的翻页体验，所有本教程中的图片无法让你感受到效果，点击下面的链接体验一下最终的结果。

下一步

如果本教程中的电子书加上一个硬书皮，会使它在翻页的基础上，给人带来更好的阅读体验