h5跳转页面很慢_【干货】小技巧实现H5跨页帧数跳转
原标题:【干货】小技巧实现H5跨页帧数跳转
现今,随着H5动画越来越成为媒体传播的主要手段, 围绕着H5动画设计制作的各种云平台也越来越专业。今天我们重点来介绍木疙瘩云平台中的一个小技巧:如何结合代码,巧妙的控制跨页的帧数跳转!
什么叫做跨页的帧数跳转?
我们简单来普及一下“页”和“帧”的区别!
学习过木疙瘩的同学都知道,“页”是使用木疙瘩云平台在制作H5动画时的基础概念,相当于FLASH中的场景。当一个场景中的动画内容播放完毕,可以通过木疙瘩云平台预设的过渡方式,自动跳转到第二个场景中进行动画播放。而由该平台制作完成的H5动画,大多数情况下是由多个场景(页)组成,用来叙述动画的故事(段落)内容。这就是页。
如果说,“页”代表一个动画故事的其中一个段落,那么“帧”就代表这个段落中的每一个时间节点。我们可以认为是这一段动画中的每一个点点滴滴,都是由“帧”这个单位进行记录的。在木疙瘩云平台中,“帧”就是最小的时间单位。
那么,回到主题。跳转到某一页的某一帧,就好比是我们在看某一集动画片的时候,突然想看前一集的某一个精彩部分。这个时候我只要通过点击一个按钮,就可以回到我想让他去的某一个点上。这岂不是很方便!?
那我们怎么来做呢?
我带大家一起来做一个案例,通过案例步骤的解析,带大家来了解这种方式如何实现!
我们以这张海报为例。那么如果看完了动画,我们快速进入主题。 在这个案例中,我们能看到:当我们进入幻灯片播放页面时,浏览完毕后会点击右下角的“BACK”按钮,我们又回到了封面页,可是这里要抛出的问题是:
我们回到了封面的第一帧了吗?不,请仔细看,我们其实回到了封面页的最后一帧!那为什么一定要回到最后一帧?
因为, 如果不这样做,如果我们回到了页面的第一帧,那么,岂不是每点击一次“BACK”,就必须要把第一页的整段动画从头至尾看一遍?
那么我们换一个思路。 如果我们每点击一次“BACK”,都可以把那段该死的动画给省略掉,岂不是就完美了? 带着这个思路,我们进入案例的制作。
首先我们进行封面页面的制作
1.将图层一名称改为“BG”,并从素材库里找到封面的图片,将其置入到场景中,匹配场景的大小进行调整。
2.新建一层,改名为“半透明”。 然后用适量工具绘制一个比背景图略大一些,透明度为60%的黑色矩形,并将它移动到图片的底端。(思路:为什么要这样做? 很简单,我希望通过对封面图片做一个手指向上滑动的动作,然后半透明的黑色矩形,就可以“PIU”一下飞上来改在图片上,多么狂拽炫酷吊炸天!)
3.基于以上的思路,我们要考虑的点是:
a.手指没有做向上滑动的时候,动画能不能播放?
b.手指向上滑动以后,还能允许翻页吗?
c.手指向上滑动以后,怎么做动画播放?
答a:手指没有向上滑动的时候,肯定不播放动画啊! 所以,我们需要新建一层,命名为“行为”,然后我们选中新建的层,在第一帧话一个随便什么形状。 对,随便,爱什么形状都行,但是必须放在场景外! 然后,我们给当前的图形加上行为“暂停”!
不会加的同学,请去查看木疙瘩的基础教程,并请自动忽略以下所有步骤! ^_^
答b:手指向上滑动是木疙瘩内默认的翻页手势,但是我们现在只需要半透明的黑色矩形飞上来,不需要翻页,所以,我们再给刚刚画好的图形加一道命令“禁止翻页”!
答c:怎么让半透明的黑色矩形飞上来呢? 很简单,我们在该层第一帧到第十帧之间做一个关键帧动画。 然后只需要在第十帧上挪动黑色半透明的矩形,让它覆盖在封面图片上即可。 这样就完成了一个半透明黑色矩形从底部飞到顶部(用时十帧)的动画。 我们为了效果的完美,请选择该层的第一帧,把右侧属性栏的运动模式改为“阻尼退出”。 预览一下,是否完美到爆!?
注:这里要特别注意的是,行为层上,千万千万不能出现延时帧。 不然你会发现手指怎么向上滑动,动画都会很卡,黑色矩形飞不上去。 那是因为如果有延时帧,暂停行为就会对每个延时帧都生效,试想一下,每一帧都有暂停,是个多么美的画面!
4.接下来我们从素材库里找到5位歌手的封面图,然后按照下图的形式排列出来。需要注意的是,分别给每位队员的封面图,放置在单独的一个层上。 然后给每一层做一个透明度由0% — 100% 的错帧动画,让他们依次出现就行。
5.好啦,第一页我们就做到这儿,接下来我们新建一个页面,在第二页上,制作第一位歌手的幻灯片。 我准备了6张大片图,根据喜好放置到幻灯片里就行。
搞定后,记得千万要预览一下,看看幻灯片组件里的6张图片是否能轮播的很完美。然后思考一下: 到了这一页以后,我们是否需要通过点击一个按钮,回到前一页?
6.基于以上思路,我们需要制作一个按钮。 这个就很简单了,新建一层,画一个圆形,然后用文字工具写“BACK”,并把圆形和文字层编组。然后给它加一个由右侧外进入场景右下角的关键帧动画(十帧足够)就可以。 做完后,应该是长成下图那样!
为什么要放在右下角?很简单,最终播放的硬件一定是手机,那右下角就一定是你的右手大拇指最容易操作的位置,不是吗?不是吗?不是吗?
7.好了,接下来我们要做非常重要的一步。 也就是,当我们点击“BACK”按钮的时候,我需要动画能跳转到封面页。请仔细想想, 这个时候到底是要跳转到封面的起始帧(再看一遍动画),还是封面页的最后帧?
好吧,如果是我的话,我一定宁愿省略掉中间重复播放的动画,看多了会烦躁,会烦躁,会烦躁!!
那么,如果是希望实现跳转到第一页的最后一帧,该怎么做呢? 给“BACK”按钮加上行为“跳转到页”,能实现吗? 答案是“一定办不到!”这个时候,我们就需要结合代码来实现跳转到某一页的某一帧了!
代码? 那是什么? 我不认识它!
对,是代码,但是不要怕! 我给你们准备好了。 我们来看一下:
window.gotoPage = function(){
mugeda.scene.gotoAndPause(50,1);
}
好了,我们不用管这是什么,我们只要会复制粘贴就行! 我们要做的事情就是,认识它一下,打个招呼(嘿,你好!)然后复制粘贴就可以!
那么我们需要认识些什么? 仔细听好!
第一行里的 gotoPage,是这段代码的名字,好比它叫老王一样!第二行最后面的括号里,50代表的是帧数,1代表的是页数!其他的,请自动忽略,请自动忽略,请自动忽略!
我已经认识它了,那然后呢?如果已经认识它了,接下来就是怎么来应用了。 我们先把整一段代码复制下来。记住,是复制全部,请不要忘记第三行的花括号!
然后,我们点击菜单右侧第三项“视图”,在下拉菜单内,点击“脚本”命令! 这个时候会弹出一个脚本框,我们把代码复制到框框里!然后关了它就行了,不看不烦人!
好了,代码就先用成酱紫! 我们可以不用理脚本框了。 我们再下来要做得事情,就是让这段代码产生作用!
8.我们先来思考一下,我们的动画流程,是否是在幻灯片页面看完后,点击按钮回到封面页的最后一帧?
是的,一定是酱紫没错!那么,关键一定是这个“BACK”按钮被赋予了神奇的能力。
好了,我们选择“BACK”按钮,点击行为小按钮,在弹出的行为窗口内,选择属性控制—回调函数!
还记得代码的名称gotoPage吗? 点击回调函数命令后面的小铅笔,然后一定要一点不差的复制到函数名称栏里! 一定要注意大小写,不要出现多余的东西,不要写错任何字母,切记! 切记! 切记!
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)帧,那就可以了!(前面括号里的是减法算式,不是横杠,以下相同)。
好了,下图是封面页的完整时间轴。封面页是广义认知中的第1页; 现在我需要点击“BACK”按钮后,能跳转到第1页的第40帧,该怎么跳帧数字呢?
我们可以这样做,数字改成(40-1)帧,(1-1)页,是否就能成功切换到代码世界了? 换句话说,帧为39,页为0,把数字替换成他们就行了! 一定要做减法哦!切记!
另外需要注意的是,回到某一页的某一帧,这个帧只允许是关键帧哦,千万不能跳转到延时帧上,不然是无效的!
10.现在,去好好检查一下是否已经实现了跳转到封面页的最后一帧了? 如果是,恭喜你,最重要的步骤我们都做完了!
接下来还剩什么? 还有,但是很简单了 ……
a.请把幻灯片复制4个页面出来。
b.请把每一个幻灯片里的图片换掉。
c.请回到封面页,给每位歌手的照片都加上行为“跳转到页”,酱紫就能做到点击相关歌手照片即跳转到此人的幻灯片上。
d.请仔细检查每一页是否都能够跳转到封面页的最后一帧!
e.好好欣赏,好好欣赏,好好欣赏!
好啦,接下来就没有啦! 整个案例做完了,那么是否会结合代码,制作跳转到某一页的某一帧了呢? 如果已经做完了,那么本次案例就到此结束了,886!
注:本文纯属学习交流,部分图片来源于网络,如有侵犯请及时与本人联系!返回搜狐,查看更多
责任编辑:
h5跳转页面很慢_【干货】小技巧实现H5跨页帧数跳转相关推荐
- 小程序接入h5页面_原生小程序接入H5页面,请求后台接口,获取数据
项目开发中赶上三端接入h5的需求,因此本身动手作h5页面,可是在作的过程当中也赶上了许多的问题javascript 小程序端不支持在本地引入,因此须要将h5发布服务器,以请求接口的形式进行访问html ...
- 微信小程序多次跳转后不能点_微信小程序运营需要先知道它的规则
不管是做SEO(搜索引擎优化排名)还是做SEM投放广告,都需要知道它的规则,因为只有知道了他的规则之后才能合理的优化,才能在运营的过程中不踩雷区,合理运用平台的规则来实现自己的目的.那么微信小程序也一 ...
- h5 bootstrap 小程序模板_微信小程序和H5的区别在哪里?主要有三点
原标题:微信小程序和H5的区别在哪里?主要有三点 随着移动互联网的发展,许多应用在不断的产生,要说现在更新快.开放功能多的应用,只能是微信小程序了.微信小程序开放了60多个流量入口,更新了各种新的功能 ...
- Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue - [object Object]
在开发模式下渲染出的Angular页面包含了很多形如下图ng-reflect-的html属性,很多时候其值都为[object Object]. 如果处于调试目的,需要在Chrome开发者工具里观察这些 ...
- html5页面滑动设计,HTML5设计小技巧有哪些
HTML5设计小技巧有哪些 你是否知道6个鲜为人知的HTML 5设计小技巧,就跟随百分网小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网! 慎用向右滑动操作.慎用横屏展示效果.按钮 ...
- java编码技巧_编码小技巧 让java编程更便捷
经过一段时间的编码,程序员们或多或少会形成自己的编码习惯,好的习惯能帮助自己写出更好的代码,方便程序的维护.抱着侥幸心理,对"可能会出错"的代码没有做"防错性程序设计&q ...
- layer 关闭一个弹窗打不开新的的弹窗_电脑小技巧关闭FF弹窗
电脑小技巧--电脑做无线热点 电脑小技巧--U盘坏了如何修复 电脑小技巧--自动维护计划.任务关闭.禁用 电脑小技巧--预防U盘中毒 电脑小技巧--提高U盘读写速度 电脑小技巧--调整引导高级选项加快 ...
- cesium获取模型高度_【小技巧】快速生成城市建筑Sketchup模型
作者:徐半仙 / 微信公众号:空间规划小课堂 如果给你城市片区的CAD 建成下面的模型你需要多久? 今天讲解下如何在有建筑轮廓的情况下 如何快速建成以下效果城市模型 首先我们打开Arcsene或者Ar ...
- Linux中_Ubuntu上_命令_使用小技巧记录
Linux特殊命令使用小技巧心得记录 查看gpu使用率: 查看系统使用情况: 在终端杀死进程: 查看内存使用情况: 系统跟踪器//或者按alt + F2打开运行窗口,输入: 重启服务器上Mysql服务 ...
最新文章
- log4j, common-logging, slf4j 关系
- 产品运行所需的信息检索失败_域名解析失败
- shell中的变量及运算符
- 聊一聊,用户画像的前世今生
- Vue+Spring boot前后端响应流程总结
- 如何构造天然满足某些约束的神经网络?
- Windows中断那些事儿
- js计算排名_今天,我们讲一下,快速排名与黑帽SEO
- SpringBoot vue图片上传不能立即回显问题解决
- linux iphone 同步时间,与iPad/iPhone同步
- zabbix通过钉钉报警
- CJSON之完全基于C库函数的使用
- Java怎么实现文件数据拷贝
- Linux系统发行版本介绍(一)——CentOS介绍
- java se面试题_Java SE 8面试问答(第2部分)
- 同一局域网内怎样获取新来美眉QQ号码!((*^__^*) 嘻嘻……)
- 使用wunderlist进行TODO管理
- 古文物青铜器VR高清模型H5三维可视化在线展示
- MyBatisX插件没有出现蓝色鸟
- 合同法律风险管理 合同签字主体
热门文章
- 关于 Sketch 你可以知道的几个小秘密 (快捷键用法)
- html自动对齐快捷键,Sketch 技巧:好用的对齐快捷键(附设置教程)
- 在MT终端模拟器中使用Termux命令
- 【一起入门NLP】中科院自然语言处理第13课-NLP基础任务④:序列生成问题(Seq2Seq)
- When and why vgs command can change metadata and incur old metadata to be backed up?
- 贫穷限制了想象:富豪200亿房产当摆设,贫民窟1440人共用一厕所
- 怎么给QT工程ui添加图片
- 2022年财务顾问FA行业研究报告
- java notifier_Java Notifier類代碼示例
- 跳过SourceTree的注册步骤