热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

h5一镜到底_序列帧一镜到底H5开发实现分析

什么是序列帧类H5我们遇到的一类H5,其中包括“强动画”效果,UI设计提供的是一系列序列帧的素材时,前端将序列帧素材还原成动画进行展示的H

什么是序列帧类H5

我们遇到的一类H5,其中包括“强动画”效果,UI设计提供的是一系列序列帧的素材时,前端将序列帧素材还原成动画进行展示的H5.

几种实现方法

gif

采用gif格式的图片来展示序列帧动画,会存在图片文件大,移动端失真以及安卓端卡顿,以及循环播放情况下有时只会播放一次的情况。只能作为零碎的点缀素材时使用,不推荐复杂动画使用gif来实现。

canvas基本实现

通过canvas画布中通过drawImage方法动态改变序列帧图片,根据时间间隔,重复进行画布的清除和重绘,清除前一帧画面内容,创建后一帧画面。

改方法只适用于简单的动画元素,且页面不应该有动作和动画关联,比如点击切换动画,此时由于频繁的重绘,会阻塞js的其他的处理,比如计时器等。

相关案例 圣诞跑H5.

解决阻塞问题的方法:针对计时器等计算操作,可以通过web worker线程进行计算,和主线程进行通知。

该插件是一款序列帧图片播放插件,支持通过canvas\img播放,可控制播放速度,可循环播放、倒序播放,设置循环播放及监听事件等功能。在canvas的处理情况下已经进行了优化处理。

使用该插件需要注意的是,提前预加载所有的序列帧图片,并且将其作为数组参数传给插件。

CreateJs

CreateJS是基于HTML5开发的一套模块化的库和工具。通过结合一些常用的库如 EaselJs、TweenJs等可以非常快捷的开发基于HTML5的动画和交互应用。

在 Adobe Animate 使用HTML5标签元素的功能,创建接口,动画,和资源库,并可以直接导出可读性强的,高效的 CreateJS 代码。

ZOë是一个AIR应用出口SWF动画作为EaselJS spritesheets用于画布和CSS。保持帧标签、重用相似帧及更多功能!

该库在微信小游戏的开发中较常见。

PixiJS

Pixi.js 是一个开源的HTML5 2D 渲染引擎,使用 WebGL 实现,不支持的浏览器会自动降低到 Canvas 实现。能帮助展示、驱动和管理富有交互性的图形、制作游戏。使用Javascript以及其他HTML5技术,结合PixiJS引擎,可以创建出丰富的交互式图形,跨平台的应用程序和游戏。PixiJS 的目标是提供一个快速且轻量级的2D库,并能兼容所有设备。此外,让开发者无需了解WebGL,就可以感受到硬件加速的力量。

PixiJS针对页面中所有的动画元素都可以独立进行相关设置和操作、增加事件,方便我们根据需要来实现对应的展示和交互。

基本的使用方法是:

创建一个场景;

在场景中创建舞台(stage)和渲染器(render);

画面中的元素是以创建精灵(sprite)的方式来实现;

之后进行展示和动画的播放;

针对序列帧素材,我们可以通过创建雪碧图(CSS Sprite,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分)的形式来减少加载资源请求,此处推荐Texturepacker工具,堪称PixiJS开发的辅助神器。

不仅仅序列帧能够放到雪碧图里面,其他的素材也可以根据实际情况放到雪碧图中,这样能够有效降低页面资源请求数

Texturepacker可以根据选择的对应框架,来生成PixiJS所需要的雪碧图素材以及相关的json文件,方便使用PixiJs的开发。通过其loader功能加载素材获取资源信息。

案例:

微业贷抽签H5(其中的抽签动作和光效)

优点:便于UI设计根据设计情况直接输出序列帧素材,通过前端开发能够相关完整的还原其动画效果

Phaser

Phaser 是一款快速、免费以及开源 HTML5 游戏框架,它支持 WebGL 和 Canvas 两种渲染模式,可以在任何 Web 浏览器环境下运行,游戏可以通过第三方工具转为 iOS、Android 支持的 Native APP,允许使用 Javascript 和 TypeScript 进行开发。和上面提到的PixiJS类似。具体的使用方法大家自行参考吧,只作为引入。

Egret

Egret是一套HTML5游戏开发解决方案,产品包含Egret Engine,Egret Wing,EgretVS,Res Depot,Texture Merger,TS Conversion,Egret Feather,Egret Inspector等 ...

什么是一镜到底

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

表现形式

画中画(例如:网易-《娱乐画传》, 缩放同时平移)

时空穿梭(例如:天猫-《穿越时空的邀请函》, 以中心缩放)

滚动动画(例如:网易-《爱的形状》,平移为主,期间播放其他动画)

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

实现方法

技术需求

绘制画面:这里我们一般选用基于canvas的库,性能会更好,也方便实现效果。(如上面提到的CreateJs、PixiJs、Egret等)

添加动画:其中包括过渡、帧动画,因此需要一个动画库。(如 TweenMax等)

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

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

实现基本流程

用Pixi创建场景,加入到想要加入的DOM容器当中。

用Pixi.loader加载精灵图。

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

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

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

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

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

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

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

总结

通过上面针对序列帧和一镜到底的简单梳理,既能够让前端比较好的还原设计给出的动画过程,还能够以此来辅助相关类型的H5的开发,满足更多的场景需求的开发。

参考资源:



推荐阅读
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 在 Linux 系统中,`/proc` 目录实现了一种特殊的文件系统,称为 proc 文件系统。与传统的文件系统不同,proc 文件系统主要用于提供内核和进程信息的动态视图,通过文件和目录的形式呈现。这些信息包括系统状态、进程细节以及各种内核参数,为系统管理员和开发者提供了强大的诊断和调试工具。此外,proc 文件系统还支持实时读取和修改某些内核参数,增强了系统的灵活性和可配置性。 ... [详细]
  • SQLmap自动化注入工具命令详解(第28-29天 实战演练)
    SQL注入工具如SQLMap等在网络安全测试中广泛应用。SQLMap是一款开源的自动化SQL注入工具,支持12种不同的数据库,具体支持的数据库类型可在其插件目录中查看。作为当前最强大的注入工具之一,SQLMap在实际应用中具有极高的效率和准确性。 ... [详细]
  • 1. 给定一个包含 n 个整数的数组 a 和一个整数 x,需要判断数组中是否存在两个不同的元素,它们的和恰好等于 x。2. 反转数对问题:对于一个包含 n 个不同元素的数组 A[1...n],如果存在 i < j 且 A[i] > A[j],则称 (i, j) 为一个反转数对。本文将详细探讨这两种与归并排序相关的算法题目,并提供高效的解决方案。 ... [详细]
  • 题目描述非常吸引人。每颗星星可以通过其在窗口的左下角和右上角位置构建两条扫描线,从而将问题转化为区间增减和求最大值的操作。需要注意的是,位于边界的星星不应计入结果,因此在处理时应分别对左右边界进行适当的增减调整。此外,利用线段树和离散化技术可以显著提高算法效率,确保在大规模数据下的性能表现。 ... [详细]
  • Vuex 实战进阶:构建高效笔记本应用(第二篇)
    在上一篇文章中,我们初步探讨了 Vuex 在该项目中的应用。本文将深入解析整个项目的架构设计。首先回顾 `main.js` 的内容,然后重点分析 `App.vue` 文件,其中引入了 `Toolbar.vue` 和 `NodeList.vue` 组件,详细说明它们在应用中的作用和交互方式。通过这些组件的协同工作,我们将展示如何构建一个高效且响应迅速的笔记本应用。 ... [详细]
  • 深入解析Gradle中的Project核心组件
    在Gradle构建系统中,`Project` 是一个核心组件,扮演着至关重要的角色。通过使用 `./gradlew projects` 命令,可以清晰地列出当前项目结构中包含的所有子项目,这有助于开发者更好地理解和管理复杂的多模块项目。此外,`Project` 对象还提供了丰富的配置选项和生命周期管理功能,使得构建过程更加灵活高效。 ... [详细]
  • 题目描述:小K不幸被LL邪教洗脑,洗脑程度之深使他决定彻底脱离这个邪教。在最终离开前,他计划再进行一次亚瑟王游戏。作为最后一战,他希望这次游戏能够尽善尽美。众所周知,亚瑟王游戏的结果很大程度上取决于运气,但通过合理的策略和算法优化,可以提高获胜的概率。本文将详细解析洛谷P3239 [HNOI2015] 亚瑟王问题,并提供具体的算法实现方法,帮助读者更好地理解和应用相关技术。 ... [详细]
  • 深入探讨Photoshop的高级应用与技巧
    本文深入探讨了Photoshop的高级应用与技巧,不仅涵盖了常用的快捷键,如矩形选框工具(M)、移动工具(V)、套索工具(L)、魔棒工具(W)、裁剪工具(C)等,还介绍了更多专业功能,如图层蒙版、混合模式和智能对象的使用方法,帮助用户提升图像处理的效率和质量。 ... [详细]
  • IDEA中高效利用代码变量名替换功能提升编程效率
    在使用 IntelliJ IDEA 进行公司项目代码审查时,我发现许多变量的命名不符合驼峰式命名规范。起初,我尝试手动逐个修改这些变量名,但效率低下。后来,我偶然发现了 IDEA 中的代码变量名替换功能,这极大地提高了我的工作效率。通过该功能,我可以快速批量地将不规范的变量名修改为符合命名规则的形式,不仅节省了时间,还减少了出错的可能性。此外,我还利用这一功能对整个项目的代码进行了全面的优化,确保所有变量命名一致且易于理解。 ... [详细]
  • JVM参数设置与命令行工具详解
    JVM参数配置与命令行工具的深入解析旨在优化系统性能,通过合理设置JVM参数,确保在高吞吐量的前提下,有效减少垃圾回收(GC)的频率,进而降低系统停顿时间,提升服务的稳定性和响应速度。此外,本文还将详细介绍常用的JVM命令行工具,帮助开发者更好地监控和调优JVM运行状态。 ... [详细]
  • Django框架下的对象关系映射(ORM)详解
    在Django框架中,对象关系映射(ORM)技术是解决面向对象编程与关系型数据库之间不兼容问题的关键工具。通过将数据库表结构映射到Python类,ORM使得开发者能够以面向对象的方式操作数据库,从而简化了数据访问和管理的复杂性。这种技术不仅提高了代码的可读性和可维护性,还增强了应用程序的灵活性和扩展性。 ... [详细]
  • POJ 1696: 空间蚂蚁算法优化与分析
    针对 POJ 1696 的空间蚂蚁算法进行了深入的优化与分析。本研究通过改进算法的时间复杂度和空间复杂度,显著提升了算法的效率。实验结果表明,优化后的算法在处理大规模数据时表现优异,能够有效减少计算时间和内存消耗。此外,我们还对算法的收敛性和稳定性进行了详细探讨,为实际应用提供了可靠的理论支持。 ... [详细]
  • 本文详细介绍了 MiniGUI 中静态控件(CTRL_STATIC)的使用方法及其不同风格的应用。具体而言,采用 SS_SIMPLE 风格的静态控件仅支持单行文本显示,不具备自动换行功能,且文本始终为左对齐。而 SS_LEFT、SS_CENTER 和 SS_RIGHT 风格则分别实现了文本的左对齐、居中和右对齐布局,提供了更多的排版灵活性。此外,文章还探讨了这些控件在实际开发中的应用场景和最佳实践。 ... [详细]
author-avatar
蓝色藻泡泡
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有