CN113778425A - 基于canvas实现在浏览器中播放ppt动画的方法 - Google Patents
基于canvas实现在浏览器中播放ppt动画的方法 Download PDFInfo
- Publication number
- CN113778425A CN113778425A CN202010441091.8A CN202010441091A CN113778425A CN 113778425 A CN113778425 A CN 113778425A CN 202010441091 A CN202010441091 A CN 202010441091A CN 113778425 A CN113778425 A CN 113778425A
- Authority
- CN
- China
- Prior art keywords
- animation
- canvas
- browser
- playing
- drawn
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
Abstract
本发明公开了一种基于canvas实现在浏览器中播放ppt动画的方法，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果；充分利用显示器的刷新机制，比较节省系统资源；显示器有固定的刷新频率(60Hz或75Hz)，也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。
Description
技术领域
本发明属于软件处理方法技术领域，具体涉及一种基于canvas实现在浏览器中播放ppt动画的方法。
背景技术
HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，用canvas替代原来的div布局，有效增加文本的保密性和大型文本绘制效率。
目前想要实现动画的时候基本上是使用CSS3的animation属性，但是此类动画都是与html的标签元素绑定，但是目前所有数据都是绘制在一个canvas标签中，所以CSS3的animation便走不通了。
因此，有必要设计一种基于canvas实现在浏览器中播放ppt动画的方法来解决上述技术问题。
发明内容
为克服上述现有技术中的不足，本发明目的在于提供一种基于canvas实现在浏览器中播放ppt动画的方法。
为实现上述目的及其他相关目的，本发明提供的技术方案是：一种基于 canvas实现在浏览器中播放ppt动画的方法，其特征在于：其包括如下步骤：
步骤一：对ERO数据进行解析，后端解析文档数据生成动画数据；
步骤二：在步骤一的前提下，按照具体的动画时间来调用浏览器的定时循环操作接口；
步骤三：按照每一帧设置动画的参数；
步骤四：在设置完参数后，进行动画内容的绘制；
步骤五：在动画内容绘制完毕后，设置动画播完状态的参数；
优选的，步骤二中按照具体的动画时间来调用浏览器的定时循环操作接口，在此步骤之前，需要设置每个动画播放之间的状态为未播放状态。
优选的，所述步骤二的详细过程为：先获取动画执行时间，然后得到需要执行的调用浏览器的定时循环操作接口的次数。
优选的，设置startTime、endTime以及count，所述需要执行的调用浏览器的定时循环操作接口的次数具体为(endTime-startTime)*60。
优选的，步骤四在绘制动画之前，设置count＝0，在绘制动画时，从第一帧绘制直到count＝(endTime-startTime)*60结束为止。
本方案的实现原理为：所有数据都是在一个canvas里面绘制而成，要想看到动画的播放过程，必须不断的绘制canvas，其中核心是调用 requestAnimationFrame。
requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。设置这个API(设置回调函数，若你想在浏览器下次重绘之前继续更新下一让各种网页动画效果(DOM动画、 Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在帧动画，那么回调函数自身必须再次调用 window.requestAnimationFrame())的目的是为了下一个动画帧安排一次网页重绘。requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率(60Hz或75Hz)，也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。
目前实现canvas的ppt动画即是1s绘制60次canvas，每一次绘制通过改变文本，图片的坐标，透明度，从而展示出ppt动画的效果。
本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。
附图说明
结合参考附图及接下来的详细描述，本发明将更容易理解，其中同样的附图标记对应同样的结构部件，其中：
图1为本发明具体实施方法流程图。
图2为后端解析数据生成动画数据操作截图。
图3为进入式动画类型操作截图。
图4为强调式动画类型操作截图。
图5为退出式动画类型操作截图。
图6为动作路径式动画类型操作截图。
具体实施方式
为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明做出进一步详细的说明。
此处所称的“一个实施例”或“实施例”是指与所述实施例相关的特定特征、结构或特性至少可包含于本发明至少一个实现方式中。在本说明书中不同地方出现的“在一个实施例中”并非必须都指同一个实施例，也不必须是与其他实施例互相排斥的单独或选择实施例。
实施例
一种基于canvas实现在浏览器中播放ppt动画的方法，其具体实现流程如下：流程图如图1所示；
1.ERO数据解析：
后端解析文档数据生成动画数据，数据结构如图2所示；
2.每个动画播放之间的状态设置为未播放状态：
即状态animationState＝0
3.按照动画时间调用requestAnimationFrame：
获取动画执行时间(即endTime-startTime),然后得到需要执行requestAnimationFrame的次数，(即(endTime-startTime)*60)，设置count＝0，从第一帧绘制直到count＝(endTime-startTime)*60结束为止。
4.动画播放完状态设置：
即状态animationState＝2，根据animationState和动画种类来显示绘制内容
所有数据都是在一个canvas里面绘制而成，要想看到动画的播放过程，必须不断的绘制canvas，其中核心是调用requestAnimationFrame。
requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。设置这个API(设置回调函数，若你想在浏览器下次重绘之前继续更新下一让各种网页动画效果(DOM动画、 Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉浏览器希望执行一个动画，让浏览器在帧动画，那么回调函数自身必须再次调用 window.requestAnimationFrame())的目的是为了下一个动画帧安排一次网页重绘。requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率(60Hz或75Hz)，也就是说，每秒最多只能重绘60次或75次，requestAnimationFrame的基本思想就是与这个刷新频率保持同步，利用这个刷新频率进行页面重绘。此外，使用这个API，一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。
目前实现canvas的ppt动画即是1s绘制60次canvas，每一次绘制通过改变文本，图片的坐标，透明度，从而展示出ppt动画的效果。
目前市场上的动画类型都分为4大类：
1.进入类型
播放之前：在此类动画播放之前是看不见的，遇到此次类型的动画先不绘制。
播放中：绘制过程中，canvas.globalAlpha不断增加，通过canvas.translate 等方法变换坐标达到动画变化。
播放之后：正常绘制
代码实现：(以渐变式缩放为例)如图3所示；
2.强调类型
播放之前：在此类动画播放之前是看见的，遇到此次类型的动画先正常绘制。
播放中：绘制过程中，通过canvas.translate等方法变换坐标达到动画变化。
播放之后：每次绘制的时候调用最后一帧的绘画状态(譬如说放大类型的动画，播放完后会提留在放大的界面)。
代码实现：(以放大缩小为例)如图4所示；
3.退出类型
播放之前：在此类动画播放之前是看见的，遇到此次类型的动画先正常绘制。
播放中：绘制过程中，canvas.globalAlpha不断减少，通过canvas.translate 等方法变换坐标达到动画变化。
播放之后：不再绘制
代码实现：(以渐变退出为例)如图5所示
4.动作路径类型
播放之前：在此类动画播放之前是看见的，遇到此次类型的动画先正常绘制。
播放中：绘制过程中，通过canvas.translate等方法变换坐标达到动画变化。
播放之后：每次绘制的时候调用最后一帧的绘画状态(效果同强调类型的动画)。
代码实现：(以自定义路径为例)如图6所示。
上述说明已经充分揭露了本发明的具体实施方式。需要指出的是，熟悉该领域的技术人员对本发明的具体实施方式所做出的任何改动均不脱离本发明的权利要求书的范围。相应地，本发明的权利要求的范围也并不仅仅局限于前述具体实施方式。
Claims (5)
1.一种基于canvas实现在浏览器中播放ppt动画的方法，其特征在于：其包括如下步骤：
步骤一：对ERO数据进行解析，后端解析文档数据生成动画数据；
步骤二：在步骤一的前提下，按照具体的动画时间来调用浏览器的定时循环操作接口；
步骤三：按照每一帧设置动画的参数；
步骤四：在设置完参数后，进行动画内容的绘制；
步骤五：在动画内容绘制完毕后，设置动画播完状态的参数。
2.根据权利要求1所述的一种基于canvas实现在浏览器中播放ppt动画的方法，其特征在于：步骤二中按照具体的动画时间来调用浏览器的定时循环操作接口，在此步骤之前，需要设置每个动画播放之间的状态为未播放状态。
3.根据权利要求1所述的一种基于canvas实现在浏览器中播放ppt动画的方法，其特征在于：所述步骤二的详细过程为：先获取动画执行时间，然后得到需要执行的调用浏览器的定时循环操作接口的次数。
4.根据权利要求3所述的一种基于canvas实现在浏览器中播放ppt动画的方法，其特征在于：设置startTime、endTime以及count，所述需要执行的调用浏览器的定时循环操作接口的次数具体为(endTime-startTime)*60。
5.根据权利要求4所述的一种基于canvas实现在浏览器中播放ppt动画的方法，其特征在于：步骤四在绘制动画之前，设置count＝0，在绘制动画时，从第一帧绘制直到count＝(endTime-startTime)*60结束为止。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010441091.8A CN113778425A (zh) | 2020-05-22 | 2020-05-22 | 基于canvas实现在浏览器中播放ppt动画的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010441091.8A CN113778425A (zh) | 2020-05-22 | 2020-05-22 | 基于canvas实现在浏览器中播放ppt动画的方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113778425A true CN113778425A (zh) | 2021-12-10 |
Family
ID=78834136
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010441091.8A Pending CN113778425A (zh) | 2020-05-22 | 2020-05-22 | 基于canvas实现在浏览器中播放ppt动画的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113778425A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115474074A (zh) * | 2022-08-29 | 2022-12-13 | 咪咕文化科技有限公司 | 一种视频背景替换方法、装置、计算设备和存储介质 |
-
2020
- 2020-05-22 CN CN202010441091.8A patent/CN113778425A/zh active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115474074A (zh) * | 2022-08-29 | 2022-12-13 | 咪咕文化科技有限公司 | 一种视频背景替换方法、装置、计算设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10497086B2 (en) | Methods and apparatuses for providing a hardware accelerated web engine | |
| CN100412868C (zh) | 一种嵌入式浏览器网页显示效果的优化方法 | |
| US8959432B2 (en) | Utilizing document structure for animated pagination | |
| CN105096368B (zh) | 三维对象处理方法和相关装置 | |
| CN111432262B (zh) | 页面视频渲染方法及装置 | |
| CN111221596B (zh) | 字体渲染方法、装置及计算机可读存储介质 | |
| CN103034729A (zh) | 网页绘制系统和方法 | |
| CN107707965B (zh) | 一种弹幕的生成方法和装置 | |
| CN113038222B (zh) | 视频处理方法、装置、电子设备及存储介质 | |
| US20210166457A1 (en) | Graphic drawing method and apparatus, device, and storage medium | |
| CN107967344B (zh) | 网页动画效果的实现方法、系统、设备及存储介质 | |
| CN102547469B (zh) | 一种多图片Web页面浏览显示加速的方法 | |
| WO2014036857A1 (zh) | 一种动画播放的方法，装置及设备 | |
| KR102292789B1 (ko) | 디스플레이장치 및 그 제어방법 | |
| CN112711729A (zh) | 基于页面动画的渲染方法、装置、电子设备及存储介质 | |
| CN113778425A (zh) | 基于canvas实现在浏览器中播放ppt动画的方法 | |
| CN111107427B (zh) | 图像处理的方法及相关产品 | |
| CN106488298B (zh) | 一种在ui中图像绘制的方法及装置和电视 | |
| CN111131910A (zh) | 弹幕实现方法、装置、电子设备和可读存储介质 | |
| CN101986289B (zh) | 一种提高浏览器页面渲染速度的方法和装置 | |
| US20120105455A1 (en) | Utilizing document structure for animated pagination | |
| US20190114735A1 (en) | Graphics performance for complex user interfaces | |
| CN110557627B (zh) | 性能的监测方法、装置以及存储介质 | |
| CN111369641A (zh) | 一种基于Vue.js框架的污水处理工艺图组态方法 | |
| CN111915705A (zh) | 图片可视化编辑方法、装置、设备和介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |