从零到一:实现通用一镜到底 H5

2024-03-26 14:50

本文主要是介绍从零到一:实现通用一镜到底 H5,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

(给前端大全加星标,提升前端技能


作者:Vincent_Pat

https://segmentfault.com/a/1190000017848401


写在前面

整个2018年都被工作支配,文章自17年就断更了,每次看到有消息提示过往的文章被收藏,或者有人点赞,都不胜唏嘘。不过,凡事要始终保持积极的心态,现在回归为时未晚。最近有项目要做一镜到底,那就稍作研究吧。

一镜到底是什么?

一镜到底,是指拍摄中没有cut情况,运用一定技巧将作品一次性拍摄完成。

那么运用到H5上面,是怎样的表现?网上案例也有很多,这里推荐数英的一篇文章,应用尽有:一镜到底H5大合集:一口气看尽一个H5的套路(https://www.digitaling.com/articles/40228.html)。

主要表现形式为以下几类:

  • 画中画(例如:网易-《娱乐画传》)

  • 时空穿梭(例如:天猫-《穿越时空的邀请函》)

  • 滚动动画(例如:网易-《爱的形状》)

  • 视频(这个好像没什么好说的...跟本文无关)

体验方式主要有:

  • 按住

  • 滑动

技术需求分析

640?wx_fmt=gif

如上图的《爱的形状》,用户滑动屏幕,方块滚动,并且用户能控制播放进度;期间方块上面的纹理一直在变化,意味着动画一直在播放。

提取要点,要实现一个一镜到底H5,通常会有以下技术需求:

  1. 绘制画面:这里我们一般选用基于canvas的库,性能会更好,也方便实现效果。

  2. 添加动画:其中包括过渡、帧动画,因此需要一个动画库。

  3. 进度控制:要实现通过用户操作,来控制整个H5的前进、后退、暂停等,我们会需要进度控制相关的库。

  4. 用户操作:一镜到底的H5一般都需要用户操作以“播放”,按住或滑动,按住比较简单,用原生事件实现就好,滑动相对复杂一点,涉及阻尼运动,因此需要一个滑动相关的库。

有了需求,我们就可以相应去找解决方案了。绘图有用3D的threejs的,动画有人用anime.js,各有所好,能实现需求就行。

最终针对以上需求,我选用了AlloyTouch、TimelineMax、Pixi.js、TweenMax这几个库来实现通用的一镜到底。各个框架的优点这里就不赘述了,想了解详情的可以自行搜索,几乎都有中文资料,也很容易使用。

实现步骤要点
  1. 用Pixi创建场景,加入到想要加入的DOM容器当中。

  2. 用Pixi.loader加载精灵图。

  3. 将精灵图、背景及文本等元素绘制出来。

  4. 用TimelineMax创建一个总的Timeline,初始设置paused为true,可以设定整条Timeline的长度为1。

  5. 用TweenMax创建好过渡动画,然后将TweenMax加入到Timeline中,duration比如是占10%的话,就设定为0.1,从滚动到30%开始播放动画的话,delay就设置为0.3。

  6. 用AlloyTouch创建滚动监听,并设置好滚动高度,例如1000。

  7. 监听AlloyTouch的change事件,用当前滚动值 / 滚动高度 得到当前页面的进度。

  8. 调用总Timeline的seek方法,寻找到当前页面进度的地方,可以简单理解成拨动视频播放器的进度条滑块。

  9. 至此就可以通过用户滑动操作,控制页面元素的动画播放、后退了。

你可能会问那怎样实现上面说的几种类型的一镜到底?实际上,几种类型的不同只是动画变换方式不一样而已。

  • 画中画(缩放同时平移)

  • 时空穿梭(以中心缩放)

  • 滚动动画(平移为主,期间播放其他动画)

示例项目

简单写了个demo,如果感兴趣的朋友可以拉下来自己把玩一下。

点此查看仓库:https://git.coding.net/MomentStudio/long-take-demo.git

点此查看demo:http://cdn.shikehuyu.com/long-take-demo-v1.0/index.html

(注:项目中素材来源于网络,仅供交流学习使用,切勿商用!)

展望

这里只实现了一个一镜到底H5的主要效果部分,距离完成还有很多工作:

  • 微信分享设置及引导

  • 添加一个加载界面

  • 添加音乐音效(用过howler,感觉不错)

  • 可能需要的生成海报(html2canvas,生成海报easy job)

  • ...

结语

这次没有用太多篇幅铺开来讲细节,主要是运用几个库组合来实现,而实际操作上还有很多地方要注意的,例如帧动画的实现,滑动的速度控制,滑到顶部、底部的处理等等。实际应用上还要继续打磨,毕竟一个漂亮的H5,是要花很多精力去构思,去优化体验的。



推荐阅读

(点击标题可跳转阅读)

H5 移动调试全攻略

H5 页面在微信端的分享

原生 JS 实现移动端 Touch 滑动反弹



觉得本文对你有帮助?请分享给更多人

关注「前端大全」加星标,提升前端技能

640?wx_fmt=png

喜欢就点一下「好看」呗~

这篇关于从零到一:实现通用一镜到底 H5的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/848862

相关文章

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u