一个小技巧,轻松完成H5跨页帧数跳转!!

现今，随着H5动画越来越成为媒体传播的主要手段， 围绕着H5动画设计制作的各种云平台也越来越专业。 今天我们重点来介绍木疙瘩云平台中的一个小技巧 — 如何结合代码，巧妙的控制跨页的帧数跳转！

什么叫做跨页的帧数跳转？

我们简单来普及一下“页”和“帧”的区别!

学习过木疙瘩的同学都知道，“页”是使用木疙瘩云平台在制作H5动画时的基础概念，相当于FLASH中的场景。 当一个场景中的动画内容播放完毕，可以通过木疙瘩云平台预设的过渡方式，自动跳转到第二个场景中进行动画播放。而由该平台制作完成的H5动画，大多数情况下是由多个场景（页）组成，用来叙述动画的故事（段落）内容。 这就是页。

如果说，“页”代表一个动画故事的其中一个段落，那么“帧”就代表这个段落中的每一个时间节点。 我们可以认为是这一段动画中的每一个点点滴滴，都是由“帧”这个单位进行记录的。 在木疙瘩云平台中，“帧”就是最小的时间单位。

那我们怎么来做呢？

我带大家一起来做一个案例，通过案例步骤的解析，带大家来了解这种方式如何实现！

先呈上案例预览地址：

http://8bcf13d0.u.mgd5.com/campaigns/578846528e28cdb85e8b4619/20160929035949/579ef178a34834277d000dfe/index.html

我们回到了封面的第一帧了吗？

不，请仔细看，我们其实回到了封面页的最后一帧！

那为什么一定要回到最后一帧？

 

首先我们来进行封面页面的制作。

1. 将图层一名称改为“BG”，并从素材库里找到封面的图片，将其置入到场景中，匹配场景的大小进行调整。 

2. 新建一层，改名为“半透明”。 然后用适量工具绘制一个比背景图略大一些，透明度为60%的黑色矩形，并将它移动到图片的底端。（思路：为什么要这样做？ 很简单，我希望通过对封面图片做一个手指向上滑动的动作，然后半透明的黑色矩形，就可以“PIU”一下飞上来改在图片上，多么狂拽炫酷吊炸天！）

3. 基于以上的思路，我们要考虑的点是：

a. 手指没有做向上滑动的时候，动画能不能播放？

b. 手指向上滑动以后，还能允许翻页吗？

c. 手指向上滑动以后，怎么做动画播放？

答a：手指没有向上滑动的时候，肯定不播放动画啊！ 所以，我们需要新建一层，命名为“行为”，然后我们选中新建的层，在第一帧话一个随便什么形状。 对，随便，爱什么形状都行，但是必须放在场景外！ 然后，我们给当前的图形加上行为“暂停”！

不会加的同学，请去查看木疙瘩的基础教程，并请自动忽略以下所有步骤！ ^_^

答b：手指向上滑动是木疙瘩内默认的翻页手势，但是我们现在只需要半透明的黑色矩形飞上来，不需要翻页，所以，我们再给刚刚画好的图形加一道命令“禁止翻页”！

答c：怎么让半透明的黑色矩形飞上来呢？ 很简单，我们在该层第一帧到第十帧之间做一个关键帧动画。 然后只需要在第十帧上挪动黑色半透明的矩形，让它覆盖在封面图片上即可。 这样就完成了一个半透明黑色矩形从底部飞到顶部（用时十帧）的动画。 我们为了效果的完美，请选择该层的第一帧，把右侧属性栏的运动模式改为“阻尼退出”。 预览一下，是否完美到爆！？

注：这里要特别注意的是，行为层上，千万千万不能出现延时帧。 不然你会发现手指怎么向上滑动，动画都会很卡，黑色矩形飞不上去。 那是因为如果有延时帧，暂停行为就会对每个延时帧都生效，试想一下，每一帧都有暂停，是个多么美的画面！

4. 接下来我们从素材库里找到5位歌手的封面图，然后按照下图的形式排列出来。需要注意的是，分别给每位队员的封面图，放置在单独的一个层上。 然后给每一层做一个透明度由0% — 100% 的错帧动画，让他们依次出现就行。

5. 好啦，第一页我们就做到这儿，接下来我们新建一个页面，在第二页上，制作第一位歌手的幻灯片。 我准备了6张大片图，根据喜好放置到幻灯片里就行。

6. 基于以上思路，我们需要制作一个按钮。 这个就很简单了，新建一层，画一个圆形，然后用文字工具写“BACK”，并把圆形和文字层编组。然后给它加一个由右侧外进入场景右下角的关键帧动画（十帧足够）就可以。 做完后，应该是长成下图那样！

为什么要放在右下角？

很简单，最终播放的硬件一定是手机，那右下角就一定是你的右手大拇指最容易操作的位置，不是吗？不是吗？不是吗？

好吧，如果是我的话，我一定宁愿省略掉中间重复播放的动画，看多了会烦躁，会烦躁，会烦躁！！

那么，如果是希望实现跳转到第一页的最后一帧，该怎么做呢？ 给“BACK”按钮加上行为“跳转到页”，能实现吗？ 答案是“一定办不到！”这个时候，我们就需要结合代码来实现跳转到某一页的某一帧了！

代码? 那是什么？ 我不认识它！

对，是代码，但是不要怕！ 我给你们准备好了。 我们来看一下：

window.gotoPage = function(){

mugeda.scene.gotoAndPause(50,1);

}

好了，我们不用管这是什么，我们只要会复制粘贴就行！ 我们要做的事情就是，认识它一下，打个招呼（嘿，你好！）然后复制粘贴就可以！

那么我们需要认识些什么？ 仔细听好！

第一行里的 gotoPage，是这段代码的名字，好比它叫老王一样！

第二行最后面的括号里，50代表的是帧数，1代表的是页数！

其他的，请自动忽略，请自动忽略，请自动忽略！

我已经认识它了，那然后呢？

如果已经认识它了，接下来就是怎么来应用了。 我们先把整一段代码复制下来。 记住，是复制全部，请不要忘记第三行的花括号！

好了，代码就先用成酱紫！ 我们可以不用理脚本框了。 我们再下来要做得事情，就是让这段代码产生作用！

是的，一定是酱紫没错！

那么，关键一定是这个“BACK”按钮被赋予了神奇的能力。

9. 喘口气，剩下的操作不多了！

还记得第二行最后括号里的内容吗？(50,1)，50代表帧数，1代表页数！

我们是否只要调整这些数字就行了？ YES，完全正确！

但是 ……

代码的世界和我们的认知，有一点点的不一样。 我们用代码数数，并不是单纯的1,2,3,4,5 ……

代码是从0开始数数的，也就是 0,1,2,3,4 ……

所以，我们广义上认知的第1页，对于代码而言，其实是第0页。

那么，括号里的数字，代码世界中的帧数50，其实就是广义认知中的第51帧，代码世界中的第1页，其实就是广义认知中的第2页，以此类推 ……

如果还是听不懂，那么我就记住，如果我希望可以跳转到广义认知中的第1页里的第40帧，那么我们转换到代码世界中，就是第（1-1）页中第（40-1）帧，那就可以了！

我们可以这样做，数字改成（40-1）帧，（1-1）页，是否就能成功切换到代码世界了？ 换句话说，帧为39，页为0，把数字替换成他们就行了！ 一定要做减法哦！切记！

另外需要注意的是，回到某一页的某一帧，这个帧只允许是关键帧哦，千万不能跳转到延时帧上，不然是无效的！

10. 现在，去好好检查一下是否已经实现了跳转到封面页的最后一帧了？ 如果是，恭喜你，最重要的步骤我们都做完了！

接下来还剩什么？ 还有，但是很简单了 ……

a. 请把幻灯片复制4个页面出来。

b. 请把每一个幻灯片里的图片换掉。

d. 请仔细检查每一页是否都能够跳转到封面页的最后一帧！

e. 好好欣赏，好好欣赏，好好欣赏！

好啦，接下来就没有啦！ 整个案例做完了，那么是否会结合代码，制作跳转到某一页的某一帧了呢？ 如果已经做完了，那么本次案例就到此结束了，886！

注： 本文纯属学习交流，部分图片来源于网络，如有侵犯请及时与本人联系！

文章发表地址：https://zhuanlan.zhihu.com/p/25291790