当前位置: 首页 > Web前端 > HTML5

从零到一:实现万能一镜到底H5

时间:2023-04-05 23:14:52 HTML5

写在前面。整个2018年都是工作为主。文章从2017年开始更新,每次有消息说往期文章被保存,或者有人点赞,不后悔。不过,凡事始终保持积极的心态,再回头也不迟。最近有个项目要做one-shot到底,稍微研究一下。究竟什么是镜子?百度百科-一拍到底一拍到底是指在拍摄过程中没有切入,运用一定的技巧一次拍摄完成的作品。那么应用于H5时表现如何呢?网上也有很多案例。这里是书影的一篇文章,各种应用:一镜到底H5合集:一次看清所有H5套路。主要表现形式有:画中画(例如:网易-《娱乐画传》)时空穿梭(例如:天猫-《穿越时空的邀请函》)滚动动画(例如:网易-《爱的形状》)视频(这个好像没什么好说的。。。跟本文没有关系)主要体验方式有:按下和滑动用户可以控制播放进度;在此期间,块上的纹理不断变化,这意味着动画一直在播放。提炼要点,实现一刀到底的H5,通常有以下技术需求:画屏:这里我们一般选择基于canvas的库,性能会更好,也方便效果的实现.添加动画:这包括过渡、帧动画,因此需要一个动画库。进度控制:通过用户操作来控制整个H5的前进、后退、暂停,我们会需要进度控制相关的库。用户操作:一镜到底的H5一般需要用户操作“播放”,按住或者滑动,按住比较简单,可以用native事件实现,滑动比较复杂,涉及阻尼动作,所以一个滑动相关的库。有了需求,我们就可以找到相应的解决方案。3Dthreejs用于绘图,anime.js用于动画。最终,针对以上需求,我选择了AlloyTouch、TimelineMax、Pixi.js、TweenMax来实现通用的one-shot到底。各个框架的优点这里不再赘述。如果您想了解更多详情,可以自行搜索。中文资料几乎都有,而且简单易用。实现步骤要点使用Pixi创建一个场景,添加到你要加入的DOM容器中。使用Pixi.loader加载精灵。绘制精灵、背景和文本等元素。使用TimelineMax创建总Timeline,初始设置paused为true,将整个Timeline的长度设置为1。使用TweenMax创建过渡动画,然后将TweenMax添加到时间轴中。例如,如果持续时间为10%,则将其设置为0.1。如果动画从滚动到30%开始,将延迟设置为0.3。用AlloyTouch创建一个滚动监听器,设置滚动高度,比如1000。监听AlloyTouch的change事件,通过当前滚动值/滚动高度获取当前页面的进度。调用总Timeline的seek方法查找当前页面的进度可以简单理解为移动视频播放器的进度条滑块。此时就可以通过用户的滑动操作来控制页面元素的动画播放和后退。你可能会问如何实现上面提到的几种one-shot到底?事实上,这几种类型之间的区别只是动画变换的方式不同。画中画(同时缩放和平移)时空穿梭(在中心缩放)滚动动画(主要是平移,期间播放其他动画)sampleproject简单写了个demo,有兴趣的可以可以拉下来自己玩。点此查看仓库点此查看demo(注:项目中素材来源于网络,仅供交流学习之用,请勿用于商业用途!)展望未来,H5主要效果只有一部分有实现到这里,完成之前还有很多工作要做:微信分享设置和引导添加加载界面,添加音乐和音效(我用的是howler,感觉不错)可能需要生成海报(html2canvas,生成海报很容易)...结论这次我没有用太多篇幅来展开细节,主要是使用几个库组合,但实际操作中需要注意的地方还是很多的,比如帧动画的实现,滑动的速度控制,滑动到顶部和底部的处理等,在实际应用中,还需要继续打磨。毕竟一个漂亮的H5需要大量的精力去构思和优化体验。最后,也希望认识更多在H5领域有研究的朋友,互相交流,甚至共同努力!邮箱:vincent@shikehuyu.com