下载文档原格式
iH5高级教程:H5创意展示，3D翻书特效3D电视电影已经成为一种人们生活中的一种习惯，电子书配上3D也让我们有更好的体验，下面教大家来制作一个非常简单的3D翻书。
步骤：第一步：添加滑动时间轴选中舞台，点击工具栏里的“滑动时间轴”图标，在舞台上画出一个框，然后点击滑动时间轴设置滑动时间轴的宽高和舞台的宽高一样。
第二步:滑动时间轴的设置1.选中滑动时间轴，点击工具栏透明按钮工具，在舞台中央位置上画一个框,作为3D旋转的父对象。
在滑动时间轴下设置透明按钮作为3D旋转的父对象,是为了图片旋转设置视距,视距越大，3D旋转的效果越不明显。
2.选中3D旋转父对象，点击透明按钮工具,在舞台左上角添加透明按钮，透明按钮的中间与舞台左侧边缘重合。
（为了观察舞台外的素材,舞台属性面板剪切设为NO）3.选中透明按钮,添加一张图片，图片设置宽高和舞台一样,透明按钮设置个颜色通过观察透明按钮和图片,可以发现图片左侧边缘刚好在透明按钮的中间,这样设置就可以保证以图片的边缘旋转。
4.选中图片，添加轨迹,点ADD添加关键帧，在时间轴窗口的第一个框里输入2，点回车，小黑块到达2秒位置，图片属性面板的Y轴旋转设置为—90度，点击ADD添加关键帧。
通过透明按钮旋转带动图片的旋转，透明按钮的Y轴旋转随着时间轴的播放从0变成—90度,给透明按钮设置个颜色通过观察透明按钮和图片的Y轴,就可以发现我们的图片刚好在透明按钮的中心，这是因为我们的旋转是以透明按钮的中心来旋转的，这样设置就可以保证我们是以图片的边缘旋转.第三步：依次设置其他按钮,添加其他透明按钮,和第一个按钮设置方法一样，只是时间轴上的时间不同,按顺序累加.最后一张图片不需要旋转翻页，所以不需要透明按钮。
第四步：选中最后一张图片,点击文本工具,输入BACK，选中文本，添加事件。
触发条件手指按下，目标对象滑动时间轴，目标动作跳至某时刻。
时间0。
即翻页到最后一页,点击BACK，回到第一页。
⽊疙瘩快速⼊门：制作翻页动画
1.2.4 快速⼊门：制作翻页动画
添加新页⾯：点击“添加新页⾯”按钮，可添加⼀个新空⽩页⾯。
图1.2-26
复制页⾯：点击“复制页⾯”按钮，可复制⼀个与上页⾯完全相同的页⾯，包括素材及其动画效果。
图1.2-27
替换背景图⽚：选中复制的第2页，选中舞台上的背景图⽚素材，点击属性栏内的“编辑”按钮，在弹出的“媒体库”对话框中选择要更替的图⽚素材，点击“添加”按钮，替换原有图⽚。
图1.2-28
图1.2-29
同理复制第3页⾯，替换背景图⽚。
点击保存并预览效果。
图1.2-30
注：若在预览中出现某素材动画效果不断循环重复的情况，可在上⽅菜单栏选择“动画”→去掉“循环”效果。
图1.2-31
图1.2-32
制作翻页效果：在“翻页”菜单栏内设置翻页属性：翻页效果：三维翻转；退出效果：⽆；翻页⽅向：左右翻页；循环：是；翻页时间：600毫秒；保存并预览效果。
图1.2-33。
iH5基础教程：添加H5页面、翻页特效方法/步骤
第一步：添加素材
1、准备好喜欢的背景音乐和5张图片
2、将准备好的背景音乐和图片拖到白色区域当中
第三步：添加页面
1、在对象树中选中舞台
2、点击页面工具，添加5个页面
第四步：图片分别添加到5个页面中
1、选中图片1 Ctrl+X
2、选中页面1 Ctrl+V
第五步：音乐播放设置
1、选中音乐
2、把它的自动播放属性设为YES
第六步：预览
1、舞台属性面板滑动翻页默认是上下（跟随）
2、网页上方点击预览
3、填写标题和描述
4、点击确定就可以预览作品
其他翻页方式
1、舞台属性面板滑动页面选择上下（触发）
2、页面1属性面板翻页效果处选择不同的效果
重点控件：页面、音频
知识点：
1、舞台属性面板滑动页面选择上下跟随或左右跟随，预览时翻页是默认的翻页效果。
2、舞台属性面板滑动页面选择上下触发或左右触发，页面的属性面板处可选择不同的向前向后翻页效果，预览时翻页就显示你所选择的效果。
3、舞台属性面板滑动页面选择无，则不能滑动翻页，需要添加事件跳转页面。
vue-awesome-swiper基于vue实现h5滑动翻页效果【推荐】说到h5的翻页，很定第⼀时间想到的是swiper。
但是我当时想到的却是，vue⾥边怎么⽤swiper？！vue-awesome-swiper就是其中⼀个前辈们产出的结晶。
就看⾸尾两个单词，就知道他是vue和swiper的爱情之⼦了。
官⽹是中⽂⽂档，妈妈再也不⽤担⼼我读api啦。
“基于 Swiper4、适⽤于 Vue 的轮播组件”。
在产品催着进度的紧张环境下，在四处搜寻解决⽅案的情况下，这句话简直发着光啊。
具体怎么⽤，官⽅⽂档写的很清楚，但我还是想记录下来，好再普及⼀波。
⼀、天才第⼀步，这⾥没有纸尿裤（(⊙﹏⊙) 好像暴露了年龄...）准备⼀个基于vue-cli的项⽬(或者你⾃⼰的脚⼿架，whatever),没有准备的请移驾vue-cli教程：⼆、在项⽬⽬录下，往node_modules⾥安装插件vue-awesome-swiper（可以在项⽬⽬录内，shift+⿏标右键，选择"在此处打开命令窗⼝"），注释：我这⾥window电脑安装了，所有右键出现的可能和没安装的不⼀样，实在找不到的看这⼀篇教程：gulp安装流程、使⽤⽅法及CMD常⽤命令导览然后输⼊下边的安装插件命令npm i --s vue-awesome-swiper三、第三步我们依旧没有天才牌裤⼦，所以还是⾃⼰⼀步⼀步稳稳⾛。
1．插件安装后就是引⽤插件了，main.js内部分三步⾛：(1) 引⽤插件：mainjs注册vas(2) 注册插件注册后未use控制台就警告了通过全局⽅法 e() 使⽤插件后可以了使⽤后控制台⽆错了(3) 插件样式（也可以⾃⼰写，不⽤⼈家的）2．vue项⽬中使⽤：(1) 准备-templatenew a project准备⼀个空项⽬初始化html-空结构(2) 引⼊-import(3) 注册组件-components(4) 配置-js（具体配置和swiper的⼀摸⼀样，看swiper官⽹即可。
h5页面设计规范H5页面设计规范是指在H5页面设计过程中需要遵循的一些标准和指导方针，以保证页面的可用性、可访问性和用户体验。
下面是H5页面设计规范的一些重要原则和要点。
1. 页面布局：H5页面设计应该采用响应式设计，适应不同的屏幕尺寸和设备。
布局应简洁清晰，内容层次结构明确，能够引导用户浏览页面。
2. 导航设计：导航在H5页面设计中起到引导用户、提供页面结构的作用。
导航应该明确、简洁，能够在不同页面之间进行切换。
用户应能够清楚地知道当前所处页面和能够访问的其他页面。
3. 文字排版：文字在H5页面中起到传达信息的作用。
文字内容应简洁明了，正文应该易读，字体大小适宜，避免过于小号或过于大号影响用户阅读。
针对不同屏幕尺寸，可以使用响应式设计或者采用自适应字号。
4. 图片和图标使用：合适的图片和图标能够提高页面的美观性和易用性。
图片应该清晰，符合页面主题，避免过大的图片导致页面加载缓慢。
图标应该简洁明了，能够快速传达意思。
5. 色彩搭配：色彩在H5页面设计中起到吸引用户、传递情感、提升品牌认知度的作用。
色彩搭配应合理，遵循品牌色彩和用户体验的原则。
颜色应该适合不同目标用户的喜好和文化习惯，避免过于鲜艳的颜色导致视觉疲劳。
6. 交互设计：交互设计是指用户与页面进行交互的过程。
交互设计应该简单明了，能够提供良好的用户体验。
按钮和链接应该明确，能够引导用户进行下一步操作。
动画和过渡效果可以使用，但不宜过多，以避免分散用户注意力。
7. 响应式设计：响应式设计是指页面能够根据不同设备和屏幕尺寸自动调整布局和样式。
响应式设计应兼顾不同屏幕尺寸下的可用性和用户体验。
页面内容和功能应在不同设备上有相似的呈现效果，但不需要完全一致。
8. 页面性能：H5页面应该加载速度快、流畅，以提供良好的用户体验。
页面应该尽量减少使用大量图片、视频等资源，压缩和优化图片等资源，减少页面的加载时间。
避免使用过多的特效和动画，以减少页面的复杂度。
移动端H5页⾯返回并刷新页⾯（BFcache）的⽅法项⽬中的需求：点击浏览器中的返回按钮，要让页⾯重新加载资源。
因为这部分的资源每次去加载的内容都不⼀样，如果返回的时候，还是看到原先的内容，那做这个内容块的意义就很⼩了；⽽如果⽤户看完了这部分内容，再返回来的时候，这个地⽅换成了新的内容，这样就能体现这部分的价值了。
⽽对于浏览器来说，⼤部分浏览器的返回是直接使⽤缓存的，不会执⾏任何的javascript代码。
原因：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之⼀——Back-Forward Cache(简称bfcache)什么是bfcache？bfcache，即back-forward cache，可称为“往返缓存”，可以在⽤户使⽤浏览器的“后退”和“前进”按钮时加快页⾯的转换速度。
这个缓存不仅保存页⾯数据，还保存了DOM和JS的状态，实际上是将整个页⾯都保存在内存⾥。
如果页⾯位于bfcache中，那么再次打开该页⾯就不会触发onload事件pageshow事件这个事件在⽤户浏览⽹页时触发，pageshow 事件类似于 onload 事件，onload 事件在页⾯第⼀次加载时触发， pageshow 事件在每次加载页⾯时触发，即 onload 事件在页⾯从浏览器缓存中读取时不触发。
pagehide事件该事件会在⽤户离开⽹页时触发。
离开⽹页有多种⽅式。
如点击⼀个链接，刷新页⾯，提交表单，关闭浏览器等。
pagehide 事件有时可以替代 unload事件，但 unload 事件触发后⽆法缓存页⾯。
persisted属性pageshow事件和pagehide事件的event对象还包含⼀个名为persisted的布尔值属性。
对于pageshow事件，如果页⾯是从bfcache中加载的，则这个属性的值为true；否则，这个属性的值为false。
对于pagehide事件，如果页⾯在卸载之后被保存在bfcache中，则这个属性的值为true；否则，这个属性的值为false。
h5使用方法
H5（HTML5）是一种用于创建网页内容和应用程序的标准。
它提供了许多新的功能和语义元素，使开发者能够更好地构建现代化的网页。
以下是使用H5的基本方法：
1.创建H5文件
首先，您需要创建一个H5文件。
您可以使用任何文本编辑器，如记事本、Sublime Text或Visual Studio Code等。
将文件保存为以`.html`为扩展名的文件。
2.编写H5代码
在H5文件中，您可以编写HTML、CSS和JavaScript代码来定义网页的结构、样式和行为。
HTML：使用HTML标签来定义网页的结构，如标题、段落、链接、图像等。
CSS：使用CSS样式规则来定义网页的外观和布局。
JavaScript：使用JavaScript代码来实现交互和动态效果。
3.运行H5文件
您可以在Web浏览器中打开H5文件来查看网页的效果。
只需双击H5文件，它将在默认浏览器中打开。
4.学习和掌握H5特性
H5提供了许多新的特性和语义元素，如音视频播放、Canvas绘图、本地存储、地理定位等。
您可以通过学习相关的教程和文档，掌握这些特性并将其应用到您的网页中。
5.使用H5框架和工具
除了原生的H5，还有许多优秀的H5框架和工具可供使用，如Bootstrap、React、Vue.js等。
这些框架和工具可以帮助您更高效地构建和管理网页项目。
总结起来，使用H5的方法包括创建H5文件、编写H5代码、运行H5文件、学习和掌握H5特性，以及使用H5框架和工具。
不断学习和实践，您将能够灵活运用H5来开发出丰富多样的网页和应用程序。
