分享更有价值
被信任是一种快乐

HTML5如何开发翻页效果

文章页正文上

小编给大家分享一下HTML5如何开发翻页效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
电子书结构
你一定要时时记住,在canvas里绘制的所有信息都无法被搜索引擎搜到,也无法由用户在浏览器中搜索到。由于这个原因,我们在DOM中显示文本内容,然后由JavaScript来操控它。所以电子书的结构非常简单:
XML/HTML Code复制内容到剪贴板

电子书的结构中包含一个主容器,它包含所有的页面和用来绘制翻页效果的canvas元素。在section元素中包含一个div元素,它包含了电子书页面的内容,我们可以调整这个div的宽度而不影响页面内容的布局。div有固定的宽度,同时section设置溢出隐藏,这样section元素的作用实际是作为div的水平方向的遮罩。
打开电子书,可以看到一个背景图片,它包含纸张的材质和书籍效果。
逻辑
实现翻页效果的代码并不是很复杂,但代码量很大,因为有很多图形效果需要用代码实现。首先我们从代码中的常量开始说起,它的使用贯穿整个程序。
JavaScript Code复制内容到剪贴板
var BOOK_WIDTH = 830;
var BOOK_HEIGHT = 260;
var PAGE_WIDTH = 400;
var PAGE_HEIGHT = 250;
var PAGE_Y = ( BOOK_HEIGHT – PAGE_HEIGHT ) / 2;
var CANVAS_PADDING = 60;
CANVAS_PADDING是canvas周围的留白,这样在翻页的时候页面可以超出书的尺寸。要注意的是,这里设置的常量有的也在CSS中设置了这些值,所以如果你想修改书的尺寸,同样需要修改CSS中相应的值。
贯穿代码中的常量,用来跟踪鼠标交互并绘制翻页页面
下一步需要为每个页面定义一个flip对象,在翻页交互过程中,它会持续更新来反应当前翻页的状态。
JavaScript Code复制内容到剪贴板
// Create a reference to the book container element
var book = document.getElementById( “book” );
// Grab a list of all section elements (pages) within the book
var pages = book.getElementsByTagName( “section” );
for( var i = 0, len = pages.length; i

pages[i].style.zIndex = len – i;
flips.push( {
progress: 1,
target: 1,
page: pages[i],
dragging: false
});
}
首先我们要保证section元素的z-index被有序的排列,这样页面才可以正确的排序,也就是说第一页在上面,最后一页在最下面。flip对象最重要的属性是progress和target值。它们用来定义翻动页面折叠的大小,-1表示整页翻到左边,0表示翻到书的中间位置,+1表示整页翻到书的最右边。
Progress和target值用来定义页面的折叠量,可以是-1到+1之间的值.
现在每个页面都有自己的flip对象了,下面我们学获取用户的鼠标位置,并根据这个值开始翻页。
JavaScript Code复制内容到剪贴板
function mouseMoveHandler( event ) {
// Offset mouse position so that the top of the book spine is 0,0
mouse.x = event.clientX – book.offsetLeft – ( BOOK_WIDTH / 2 );
mouse.y = event.clientY – book.offsetTop;
}
function mouseDownHandler( event ) {
// Make sure the mouse pointer is inside of the book
if (Math.abs(mouse.x)

if (mouse.x = 0) {
// We are on the left side, drag the previous page
flips[page – 1].dragging = true;
}
else if (mouse.x > 0 && page + 1

// We are on the right side, drag the current page
flips[page].dragging = true;
}
}
// Prevents the text selection
event.preventDefault();
}
function mouseUpHandler( event ) {
for( var i = 0; i

// If this flip was being dragged, animate to its destination
if( flips[i].dragging ) {
// Figure out which page we should navigate to
if( mouse.x

flips[i].target = -1;
page = Math.min( page + 1, flips.length );
}
else {
flips[i].target = 1;
page = Math.max( page – 1, 0 );
}
}
flips[i].dragging = false;
}
}
mouseMoveHandler方法会实时更新mouse对象的内容,这样我们可以得到鼠标的精确位置。
在mouseDonwHandler中,检测鼠标是在书的左边还是右边按下,记得得知翻页的方向。我还需要知道翻页方向的下一张是否还有页面,因为我们会遇到第一页或最后一页的情况。如果所有的flip选项都有检测没有问题,设置该flip对象的dragging属性为true。
在mouseUpHandler中,我们会检测每个页面是否被拖动,如果是则释放该页面的拖动。停止拖动后,页面会根据鼠标的位置决定是向前翻动还是向后翻动。同时页面的页面也会被更新,作为页面的导航。
渲染
现在大部分的逻辑运算都已经完成了,下面我们要学习如果在canvas元素中渲染折叠的页面。这些渲染的效果大部分都在render()方法中完成,这个方法每秒钟会执行60次,来实时更新翻动页面的状态。
JavaScript Code复制内容到剪贴板
function render() {
// Reset all pixels in the canvas
context.clearRect( 0, 0, canvas.width, canvas.height );
for( var i = 0, len = flips.length; i

var flip = flips[i];
if( flip.dragging ) {
flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
}
// Ease progress towards the target value
flip.progress += ( flip.target – flip.progress ) * 0.2;
// If the flip is being dragged or is somewhere in the middle
// of the book, render it
if( flip.dragging || Math.abs( flip.progress )

drawFlip( flip );
}
}
}
开始渲染之前,用clearRect(x,y,w,h)方法重置canvas。重置整个canvas画布会大大降低运行的性能,相比之下,仅仅重置需要重新绘制的部分,效率会更高。但是为了不偏离本教程的话题,我们还是重置更个canvas画布。
如果页面正在拖动,那么他的target值设置为鼠标坐标相对于电子书宽度的位置,而不是实际的像素值。同时progress也会一点点增加至target值,这样翻动每帧都会更新,也就得到了我们看到的页面平滑的翻动动画效果。
因为每一帧免费云主机、域名都要遍历所有的页面,所以我们需要保证只重绘当前活动的页面。如果页面翻动没有很接近书的边缘(BOOK_WIDTH的0.3%),或者页面的flagged属性值是dragging,我们认为该页面是当前活动的页面。
现在所有的逻辑运算都已经完成了,下面需要根据页面的当前状态绘制翻动页面效果。我们来看胰腺癌drawFlip()方法的第一部分。
JavaScript Code复制内容到剪贴板
// Determines the strength of the fold/bend on a 0-1 range
var strength = 1 – Math.abs( flip.progress );
// Width of the folded paper
var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 – flip.progress );
// X position of the folded paper
var foldX = PAGE_WIDTH * flip.progress + foldWidth;
// How far outside of the book the paper is bent due to perspective
var verticalOutdent = 20 * strength;
// The maximum widths of the three shadows used
var paperShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(1 – flip.progress, 0.5), 0);
var rightShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0);
var leftShadowWidth = (PAGE_WIDTH*0.5) * Math.max(Math.min(strength, 0.5), 0);
// Mask the page by setting its width to match the foldX
flip.page.style.width = Math.max(foldX, 0) + “px”;
这部分的代码开始是一些变量的计算,它们用来绘制真实的页面翻动效果。Progress变量在这些变量中扮演最重要的角色,因为它是页面要翻动到的位置。为了添加深度效果,我们让页面可以超出书的边界,当页面翻动至书脊位置时,超出部分达到了极限。
页面翻动时的折叠效果.
现在所有的值都一个就位,万事俱备,只差绘制页面了!
JavaScript Code复制内容到剪贴板
context.save();
context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
// Draw a sharp shadow on the left side of the page
context.strokeStyle = ‘rgba(0,0,0,’+(0.05 * strength)+’)’;
context.lineWidth = 30 * strength;
context.beginPath();
context.moveTo(foldX – foldWidth, -verticalOutdent * 0.5);
context.lineTo(foldX – foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
context.stroke();
// Right side drop shadow
var rightShadowGradient = context.createLinearGradient(foldX, 0,
foldX + rightShadowWidth, 0);
rightShadowGradient.addColorStop(0, ‘rgba(0,0,0,’+(strength*0.2)+’)’);
rightShadowGradient.addColorStop(0.8, ‘rgba(0,0,0,0.0)’);
context.fillStyle = rightShadowGradient;
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX + rightShadowWidth, 0);
context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
context.lineTo(foldX, PAGE_HEIGHT);
context.fill();
// Left side drop shadow
var leftShadowGradient = context.createLinearGradient(
foldX – foldWidth – leftShadowWidth, 0, foldX – foldWidth, 0);
leftShadowGradient.addColorStop(0, ‘rgba(0,0,0,0.0)’);
leftShadowGradient.addColorStop(1, ‘rgba(0,0,0,’+(strength*0.15)+’)’);
context.fillStyle = leftShadowGradient;
context.beginPath();
context.moveTo(foldX – foldWidth – leftShadowWidth, 0);
context.lineTo(foldX – foldWidth, 0);
context.lineTo(foldX – foldWidth, PAGE_HEIGHT);
context.lineTo(foldX – foldWidth – leftShadowWidth, PAGE_HEIGHT);
context.fill();
// Gradient applied to the folded paper (highlights & shadows)
var foldGradient = context.createLinearGradient(
foldX – paperShadowWidth, 0, foldX, 0);
foldGradient.addColorStop(0.35, ‘#fafafa’);
foldGradient.addColorStop(0.73, ‘#eeeeee’);
foldGradient.addColorStop(0.9, ‘#fafafa’);
foldGradient.addColorStop(1.0, ‘#e2e2e2’);
context.fillStyle = foldGradient;
context.strokeStyle = ‘rgba(0,0,0,0.06)’;
context.lineWidth = 0.5;
// Draw the folded piece of paper
context.beginPath();
context.moveTo(foldX, 0);
context.lineTo(foldX, PAGE_HEIGHT);
context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2),
foldX – foldWidth, PAGE_HEIGHT + verticalOutdent);
context.lineTo(foldX – foldWidth, -verticalOutdent);
context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
context.fill();
context.stroke();
context.restore();
在canvas的API中tranlate(x,y)方法用来移动画布的坐标系统,以便于我们可以以书脊的顶端作为(0,0)原点来绘制翻动的页面。注意,我们需要使用save()方法保存当前canvas的变换,变换完成后调用restore()方法。
绘制翻动页面的起始点,同translate(x,y)方法,将其从canvas的左上角移动到书脊顶端,这样简化了绘制的逻辑
foldGradient方法用来填充折叠的页面,同时绘制真实的高光和阴影效果。同时我还为页面绘制了一条很窄的黑边,防止在较亮的背景下页面“消失”。
现在剩下的就是用我们前面定义的变量绘制折叠的页面。页面左右两侧用直线绘制,顶部和底部绘制弯曲的曲线,产生一种纸张折叠的感觉。页面的折叠程度由verticalOutdent值决定。以上是“HTML5如何开发翻页效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注云技术行业资讯频道!

相关推荐: CSS的细节都有哪些

这期内容当中小编将会给大家带来有关CSS的细节都有哪些,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。如果说这些特性是CSS华丽的一面,那我们来看看它朴实的一面:很不起眼的东西,如选择器、单位、函数(方法)。我经常说这是繁琐的…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册