CN106780672A - 一种浏览器、动画编辑播放***及方法 - Google Patents
一种浏览器、动画编辑播放***及方法 Download PDFInfo
- Publication number
- CN106780672A CN106780672A CN201710032268.7A CN201710032268A CN106780672A CN 106780672 A CN106780672 A CN 106780672A CN 201710032268 A CN201710032268 A CN 201710032268A CN 106780672 A CN106780672 A CN 106780672A
- Authority
- CN
- China
- Prior art keywords
- animation
- source code
- code data
- css
- editor
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- 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/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Processing Or Creating Images (AREA)
Abstract
本申请公开了一种浏览器、动画编辑播放***及方法,其中,所述动画编辑播放***基于CSS技术提供了一种动画从编辑到播放的较为完善的***,以实现替代基于Flash的动画编辑播放***的目的。并且整个动画的编辑及播放过程不需要用户直接输入复杂的CSS标准的源码数据,只需要将目标动画的动画参数输入到所述编辑模块即可通过所述生成模块转换成CSS标准的源码数据,从而使得所述播放模块可以根据所述CSS标准的源码数据播放所述目标动画,降低了所述动画编辑播放***的使用难度,增加了所述动画编辑播放***的适用性。
Description
技术领域
本申请涉及网页动画技术领域,更具体地说,涉及一种浏览器、动画编辑播放***及方法。
背景技术
网页动画是一种实现动态界面交互和设计效果的技术,现有技术中完善的动画编辑播放***为基于Flash技术的动画编辑播放***。但是基于Flash技术的动画编辑播放***需要以插件的形式嵌入到浏览器中才能够使用,增加了浏览器的运行复杂程度,并且随着网页动画技术的不断发展,基于Flash技术的动画编辑播放***暴露除了诸如安全性差、占用内存多以及耗电量大的缺点,使得越来越多的硬件及软件厂家表示将逐步淘汰基于Flash技术的动画编辑播放***。
因此,寻找一种替代Flash技术,且较为完善的动画编辑播放***成为研究人员努力的方向。
发明内容
为解决上述技术问题,本发明提供了一种浏览器、动画编辑播放***及方法,实现了提供一种基于CSS技术,且较为完善的动画编辑播放***的目的。
为实现上述技术目的,本发明实施例提供了如下技术方案:
一种动画编辑播放***,包括:
编辑模块,用于获取目标动画的动画参数;
生成模块,用于根据所述动画参数,生成层叠样式表CSS标准的源码数据;
播放模块,用于根据所述CSS标准的源码数据播放所述目标动画。
可选的,所述动画参数包括场景参数、图层参数、时间轴参数、关键帧参数和元素参数中的至少一项。
可选的,所述CSS标准的源码数据包括:内容源码数据、样式风格源码数据和交互源码数据。
可选的,所述内容源码数据为HTML源码数据;
所述样式风格源码数据为CSS源码数据;
所述交互源码数据为Javascript源码数据。
一种动画编辑播放方法,包括:
获取目标动画的动画参数;
根据所述动画参数,生成层叠样式表CSS标准的源码数据;
根据所述CSS标准的源码数据播放所述目标动画。
可选的,所述获取目标动画的动画参数包括:
获取目标动画的场景参数、图层参数、时间轴参数、关键帧参数和元素参数中的至少一项。
可选的,所述根据所述动画参数,生成层叠样式表CSS标准的源码数据包括:
根据所述动画参数,生成内容源码数据、样式风格源码数据和交互源码数据。
可选的,所述内容源码数据为HTML源码数据;
所述样式风格源码数据为CSS源码数据;
所述交互源码数据为Javascript源码数据。
一种浏览器,包括如上述任一项所述的动画编辑播放***。
从上述技术方案可以看出,本发明实施例提供了一种浏览器、动画编辑播放***及方法,其中,所述动画编辑播放***基于CSS技术提供了一种动画从编辑到播放的较为完善的***,以实现替代基于Flash的动画编辑播放***的目的。并且整个动画的编辑及播放过程不需要用户直接输入复杂的CSS标准的源码数据,只需要将目标动画的动画参数输入到所述编辑模块即可通过所述生成模块转换成CSS标准的源码数据,从而使得所述播放模块可以根据所述CSS标准的源码数据播放所述目标动画,降低了所述动画编辑播放***的使用难度,增加了所述动画编辑播放***的适用性。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据提供的附图获得其他的附图。
图1为本申请的一个实施例提供的一种动画编辑播放***的结构示意图;
图2为本申请的一个实施例提供的一种动画编辑播放方法的流程示意图;
图3为本申请的另一个实施例提供的一种动画编辑播放方法的流程示意图;
图4为本申请的又一个实施例提供的一种动画编辑播放方法的流程示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
本申请实施例提供了一种动画编辑播放***,如图1所示,包括:
编辑模块100,用于获取目标动画的动画参数;
生成模块200,用于根据所述动画参数,生成层叠样式表CSS标准的源码数据;
播放模块300,用于根据所述CSS标准的源码数据播放所述目标动画。
需要说明的是,在本实施例中,所述编辑模块100为用户提供了一个交互界面,用于供用户进行目标动画的编辑操作,并且用户对目标动画进行编辑操作时只需要输入目标动画的动画参数即可,而不用直接编辑较为复杂的层叠样式表(Cascading Style Sheets,CSS)标准的源码数据,降低了用户利用所述动画编辑播放***进行动画编辑的难度,增加了所述动画编辑播放***的适用性。当用户通过所述编辑模块100输入所述目标动画的动画参数后,所述生成模块200根据各个动画参数与CSS标准的源码数据的对应关系,生成CSS标准的源码数据,以供所述播放模块300根据所述CSS标准的源码数据播放所述目标动画。
CSS是一种控制网页元素样式风格的语言,最初只用于控制页面元素的静态外观属性,例如字体、边框、背景色和边距等,但随着CSS标准的改进和技术的进步,CSS标准开始加入动画技术,可以通过设置关键帧和转场过渡等方式实现页面元素的动态效果。并且CSS标准的源码数据被现今几乎所有的浏览器所支持,浏览器不需要额外的插件即可根据CSS标准的源码数据播放目标动画,降低了浏览器的负担和占用的内存资源,降低了所述动画编辑播放***的耗电量,使其能够更加良好的应用于移动设备中。
本申请实施例提供的动画编辑播放***基于CSS技术提供了一种动画从编辑到播放的较为完善的***,以实现替代基于Flash的动画编辑播放***的目的。并且整个动画的编辑及播放过程不需要用户直接输入复杂的CSS标准的源码数据,只需要将目标动画的动画参数输入到所述编辑模块100即可通过所述生成模块200转换成CSS标准的源码数据,从而使得所述播放模块300可以根据所述CSS标准的源码数据播放所述目标动画,降低了所述动画编辑播放***的使用难度,增加了所述动画编辑播放***的适用性。
在上述实施例的基础上,在本申请的一个实施例中,所述动画参数包括场景参数、图层参数、时间轴参数、关键帧参数和元素参数中的至少一项。
需要说明的是,所述动画参数是指能够定义所述目标动画的各种属性的参数,在本申请的其他实施例中,所述动画参数还包括转场过渡参数,本申请对所述动画参数所包含的具体内容并不做限定,具体视实际情况而定。
在上述实施例的基础上,在本申请的另一个实施例中,所述CSS标准的源码数据包括:内容源码数据、样式风格源码数据和交互源码数据。
其中,所述内容源码数据用于表示所述目标动画的内容,所述样式风格源码数据用于表示所述目标动画的样式和风格种类,所述交互源码数据包含所述目标动画逻辑控制数据,例如从A点到B点画一条贝塞尔曲线,这个过程就由所述交互源码数据控制。
具体地,在本申请的一个实施例中,所述内容源码数据为HTML(HyperText MarkupLanguage,超文本标记语言)源码数据;
所述样式风格源码数据为CSS源码数据;
所述交互源码数据为Javascript源码数据。
相应的,本申请实施例还提供了一种动画编辑播放方法,如图2所示,包括:
S101:获取目标动画的动画参数;
S102:根据所述动画参数,生成层叠样式表CSS标准的源码数据;
S103:根据所述CSS标准的源码数据播放所述目标动画。
需要说明的是,在本实施例中,在步骤S101中为用户提供了一个交互界面,用于供用户进行目标动画的编辑操作,并且用户对目标动画进行编辑操作时只需要输入目标动画的动画参数即可,而不用直接编辑较为复杂的层叠样式表(Cascading Style Sheets,CSS)标准的源码数据,降低了用户利用所述动画编辑播放方法进行动画编辑的难度,增加了所述动画编辑播放方法的适用性。当用户输入所述目标动画的动画参数后,在步骤S102中根据各个动画参数与CSS标准的源码数据的对应关系,生成CSS标准的源码数据,以根据所述CSS标准的源码数据播放所述目标动画。
CSS是一种控制网页元素样式风格的语言,最初只用于控制页面元素的静态外观属性,例如字体、边框、背景色和边距等,但随着CSS标准的改进和技术的进步,CSS标准开始加入动画技术,可以通过设置关键帧和转场过渡等方式实现页面元素的动态效果。并且CSS标准的源码数据被现今几乎所有的浏览器所支持,浏览器不需要额外的插件即可根据CSS标准的源码数据播放目标动画,降低了浏览器的负担和占用的内存资源,降低了所述动画编辑播放方法的耗电量,使其能够更加良好的应用于移动设备中。
本申请实施例提供的动画编辑播放方法基于CSS技术提供了一种动画从编辑到播放的较为完善的流程,以实现替代基于Flash的动画编辑播放方法的目的。并且整个动画的编辑及播放过程不需要用户直接输入复杂的CSS标准的源码数据,只需要输入目标动画的动画参数即可转换成CSS标准的源码数据,从而可以根据所述CSS标准的源码数据播放所述目标动画,降低了所述动画编辑播放方法的使用难度,增加了所述动画编辑播放方法的适用性。
在上述实施例的基础上,在本申请的一个实施例中,如图3所示,所述获取目标动画的动画参数包括:
S1011:获取目标动画的场景参数、图层参数、时间轴参数、关键帧参数和元素参数中的至少一项。
需要说明的是,所述动画参数是指能够定义所述目标动画的各种属性的参数,在本申请的其他实施例中,所述动画参数还包括转场过渡参数,本申请对所述动画参数所包含的具体内容并不做限定,具体视实际情况而定。
在上述实施例的基础上,在本申请的另一个实施例中,如图4所示,所述根据所述动画参数,生成层叠样式表CSS标准的源码数据包括:
S1021:根据所述动画参数,生成内容源码数据、样式风格源码数据和交互源码数据。
其中,所述内容源码数据用于表示所述目标动画的内容,所述样式风格源码数据用于表示所述目标动画的样式和风格种类,所述交互源码数据包含所述目标动画逻辑控制数据,例如从A点到B点画一条贝塞尔曲线,这个过程就由所述交互源码数据控制。
具体地,在本申请的一个实施例中,所述内容源码数据为HTML(HyperText MarkupLanguage,超文本标记语言)源码数据;
所述样式风格源码数据为CSS源码数据;
所述交互源码数据为Javascript源码数据。
相应的,本申请实施例还提供了一种浏览器,包括如上述任一实施例所述的动画编辑播放***。
综上所述,本申请实施例提供了一种浏览器、动画编辑播放***及方法,其中,所述动画编辑播放***基于CSS技术提供了一种动画从编辑到播放的较为完善的***,以实现替代基于Flash的动画编辑播放***的目的。并且整个动画的编辑及播放过程不需要用户直接输入复杂的CSS标准的源码数据,只需要将目标动画的动画参数输入到所述编辑模块100即可通过所述生成模块200转换成CSS标准的源码数据,从而使得所述播放模块300可以根据所述CSS标准的源码数据播放所述目标动画,降低了所述动画编辑播放***的使用难度,增加了所述动画编辑播放***的适用性。
本说明书中各个实施例采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似部分互相参见即可。
对所公开的实施例的上述说明,使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的,本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下,在其它实施例中实现。因此,本发明将不会被限制于本文所示的这些实施例,而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
Claims (9)
1.一种动画编辑播放***,其特征在于,包括:
编辑模块,用于获取目标动画的动画参数;
生成模块,用于根据所述动画参数,生成层叠样式表CSS标准的源码数据;
播放模块,用于根据所述CSS标准的源码数据播放所述目标动画。
2.根据权利要求1所述的动画编辑播放***,其特征在于,所述动画参数包括场景参数、图层参数、时间轴参数、关键帧参数和元素参数中的至少一项。
3.根据权利要求1所述的动画编辑播放***,其特征在于,所述CSS标准的源码数据包括:内容源码数据、样式风格源码数据和交互源码数据。
4.根据权利要求3所述的动画编辑播放***,其特征在于,所述内容源码数据为HTML源码数据;
所述样式风格源码数据为CSS源码数据;
所述交互源码数据为Javascript源码数据。
5.一种动画编辑播放方法,其特征在于,包括:
获取目标动画的动画参数;
根据所述动画参数,生成层叠样式表CSS标准的源码数据;
根据所述CSS标准的源码数据播放所述目标动画。
6.根据权利要求5所述的动画编辑播放方法,其特征在于,所述获取目标动画的动画参数包括:
获取目标动画的场景参数、图层参数、时间轴参数、关键帧参数和元素参数中的至少一项。
7.根据权利要求5所述的动画编辑播放方法,其特征在于,所述根据所述动画参数,生成层叠样式表CSS标准的源码数据包括:
根据所述动画参数,生成内容源码数据、样式风格源码数据和交互源码数据。
8.根据权利要求7所述的动画编辑播放方法,其特征在于,所述内容源码数据为HTML源码数据;
所述样式风格源码数据为CSS源码数据;
所述交互源码数据为Javascript源码数据。
9.一种浏览器,其特征在于,包括如权利要求1-4任一项所述的动画编辑播放***。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710032268.7A CN106780672A (zh) | 2017-01-16 | 2017-01-16 | 一种浏览器、动画编辑播放***及方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201710032268.7A CN106780672A (zh) | 2017-01-16 | 2017-01-16 | 一种浏览器、动画编辑播放***及方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN106780672A true CN106780672A (zh) | 2017-05-31 |
Family
ID=58947050
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201710032268.7A Pending CN106780672A (zh) | 2017-01-16 | 2017-01-16 | 一种浏览器、动画编辑播放***及方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106780672A (zh) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107403460A (zh) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | 动画生成方法及装置 |
CN109741427A (zh) * | 2018-12-14 | 2019-05-10 | 新华三大数据技术有限公司 | 动画数据处理方法、装置、电子设备及存储介质 |
CN110910477A (zh) * | 2018-08-27 | 2020-03-24 | 北京京东尚科信息技术有限公司 | 页面动画显示方法、装置和计算机可读存储介质 |
Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101196818A (zh) * | 2006-12-08 | 2008-06-11 | 上海全景数字技术有限公司 | 快速图形化开发*** |
CN102520951A (zh) * | 2011-12-13 | 2012-06-27 | 天津大学 | 基于Flash的三维游戏场景管理*** |
CN102866886A (zh) * | 2012-09-04 | 2013-01-09 | 北京航空航天大学 | 一种基于Web的算法动画可视化开发*** |
CN103176986A (zh) * | 2011-12-20 | 2013-06-26 | 上海博泰悦臻电子设备制造有限公司 | Flash动画数据转换为HTML5数据的方法 |
CN104360866A (zh) * | 2014-12-01 | 2015-02-18 | 深圳七彩畅想网络技术有限公司 | 一种代码生成方法及代码生成器 |
CN104933142A (zh) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | 动画展示方法和装置 |
CN105094804A (zh) * | 2015-06-18 | 2015-11-25 | 北京奇虎科技有限公司 | 在页面中添加动画的方法和装置 |
CN106294501A (zh) * | 2015-06-09 | 2017-01-04 | 腾讯科技(深圳)有限公司 | 网页动画效果显示方法和装置 |
-
2017
- 2017-01-16 CN CN201710032268.7A patent/CN106780672A/zh active Pending
Patent Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101196818A (zh) * | 2006-12-08 | 2008-06-11 | 上海全景数字技术有限公司 | 快速图形化开发*** |
CN102520951A (zh) * | 2011-12-13 | 2012-06-27 | 天津大学 | 基于Flash的三维游戏场景管理*** |
CN103176986A (zh) * | 2011-12-20 | 2013-06-26 | 上海博泰悦臻电子设备制造有限公司 | Flash动画数据转换为HTML5数据的方法 |
CN102866886A (zh) * | 2012-09-04 | 2013-01-09 | 北京航空航天大学 | 一种基于Web的算法动画可视化开发*** |
CN104360866A (zh) * | 2014-12-01 | 2015-02-18 | 深圳七彩畅想网络技术有限公司 | 一种代码生成方法及代码生成器 |
CN106294501A (zh) * | 2015-06-09 | 2017-01-04 | 腾讯科技(深圳)有限公司 | 网页动画效果显示方法和装置 |
CN104933142A (zh) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | 动画展示方法和装置 |
CN105094804A (zh) * | 2015-06-18 | 2015-11-25 | 北京奇虎科技有限公司 | 在页面中添加动画的方法和装置 |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107403460A (zh) * | 2017-07-11 | 2017-11-28 | 北京潘达互娱科技有限公司 | 动画生成方法及装置 |
CN110910477A (zh) * | 2018-08-27 | 2020-03-24 | 北京京东尚科信息技术有限公司 | 页面动画显示方法、装置和计算机可读存储介质 |
CN110910477B (zh) * | 2018-08-27 | 2022-06-07 | 北京京东尚科信息技术有限公司 | 页面动画显示方法、装置和计算机可读存储介质 |
CN109741427A (zh) * | 2018-12-14 | 2019-05-10 | 新华三大数据技术有限公司 | 动画数据处理方法、装置、电子设备及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US7920149B2 (en) | Rollback in a browser | |
US7631252B2 (en) | Distributed processing when editing an image in a browser | |
CN104637078B (zh) | 一种图像处理方法及装置 | |
CN104239305B (zh) | 生成及展现电子文档的方法及装置 | |
CN112184856A (zh) | 支持多图层特效及动画混合的多媒体处理装置 | |
JP2023518388A (ja) | ビデオ特殊効果の処理方法、装置、電子機器及びコンピュータプログラム | |
CN106780672A (zh) | 一种浏览器、动画编辑播放***及方法 | |
EP2755409B1 (en) | Multimedia message editing method and device | |
CN107895394A (zh) | 动画特效实现方法、装置、终端设备及存储介质 | |
CN104951311B (zh) | 一种页面制作方法及装置 | |
CN103279559A (zh) | 基于安卓***的富文本编辑方法及富文本编辑器 | |
CN112614211B (zh) | 用于文本、图像自适应排版及动画联动的方法及装置 | |
CN103631877A (zh) | 网页表格的处理方法 | |
CN104616331A (zh) | 移动设备上的图像处理方法和装置 | |
CN107133206A (zh) | 一种数字内容制作和展示工具及其应用 | |
CN114997105A (zh) | 设计模板以及素材的生成方法、计算设备及存储介质 | |
JP2010141371A (ja) | 動画コンテンツ作成・再生補助システム | |
CN101188684B (zh) | 一种图形制播中图形模板的继承设备 | |
CN107230244A (zh) | 一种动画文件的生成方法和渲染*** | |
CN102572302B (zh) | 关键帧曲线在修改素材出入点后的多种处理方法 | |
KR20100130186A (ko) | 그래픽 디지털 문서의 동영상화 장치 및 방법 | |
CN103488620A (zh) | 一种多点触控的出版物排版方法 | |
WO2007131233A2 (en) | Browser image manipulation | |
US8532423B2 (en) | Representing high-resolution media content in a lower resolution system | |
CN102143209A (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 | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20170531 |