CN106569834A - 基于浏览器的动画制作方法及系统 - Google Patents
基于浏览器的动画制作方法及系统 Download PDFInfo
- Publication number
- CN106569834A CN106569834A CN201610999740.XA CN201610999740A CN106569834A CN 106569834 A CN106569834 A CN 106569834A CN 201610999740 A CN201610999740 A CN 201610999740A CN 106569834 A CN106569834 A CN 106569834A
- Authority
- CN
- China
- Prior art keywords
- track
- paintbrush
- position coordinates
- drafting
- drawing data
- 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
- 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
Abstract
本发明提供一种基于浏览器的动画制作方法及系统，方法包括：创建空白Canvas画布；预设时间间隔；画笔绘制的同时，于画布上按照所述时间间隔顺序采集所述画笔的绘制轨迹上的每一个位置坐标；依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据。画笔在画布上绘制时，按固定时间间隔采集绘制轨迹上的位置坐标，并对应的画笔属性将采集的位置坐标在画布中依次连接线段直至绘制轨迹结束；依次记录画笔属性以及采集的点坐标序列作为绘制数据保存，即完成动画制作，无需安装插件，且浏览器可直接播放。
Description
技术领域
本发明涉及图像处理技术领域，尤其涉及一种基于浏览器的动画制作方法及系统。
背景技术
目前基于浏览器的常见动画格式主要有两种：GIF动画格式和SWF动画格式。
GIF(Graphics Interchange Format)的原义是“图像互换格式”，是CompuServe公司在1987年开发的图像文件格式。GIF文件数据是一种基于LZW算法的连续色调的无损压缩格式，以8位色展示图像，其压缩率一般在50％左右，目前几乎所有浏览器都支持，公共领域也有大量软件在使用GIF图像文件。GIF格式在一个文件中可以存储多幅彩色图像，把存储于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可实现一种简单的逐帧动画。如公开号为CN102542592A的中国专利提出了一种制作主题动画的方法，包括：定义动画制作区域，所述主题动画在所述动画制作区域中制作；导入主题图库，所述主题图库包括与主题动画的主题相关的图形和文字；从主题图库中提取数个相关的图形，将每一个图像制作成一帧，设定每一帧的停留时间，并将这些帧按次序连接起来；从主题图库中提取数个文字，所述文字与所述图形相关，所述文字被插入到按次序连接起来的帧中；将按次序连接并且插入文字后的帧封装形成主题动画。
SWF(Shock Wave Flash)是Adobe公司的动画设计软件Flash的专用格式，是一种支持矢量和点阵图形的动画文件格式，可以生动的展示文字和图片的动态效果，被广泛应用于WEB网页设计、动画制作等领域。SWF格式的主要目标是以流式控制技术和矢量技术为核心，制作短小精悍的小档案以播放动画，计划理念是可以在任何操作系统和浏览器中进行，并让网络较慢的用户也能顺利浏览。
上述两种动画格式，编码和解码较复杂，都需要专业的工具软件进行绘制，制作门槛和成本都较高。GIF动画相较于Flash动画，GIF动画使用位图，而Flash动画使用矢量图像，相应的文件大小要比Flash动画大的多；且GIF动画只能输出256色，已经远远不能满足大众对动画图像色彩的要求，而Flash输出动画图像为真彩，色彩表现更佳。但默认安装的浏览器是不支持Flash的，必须安装Adobe Flash Player插件才支持Flash引擎工作，抬高了使用门槛，尤其是移动设备中的浏览器，大部分不支持Flash，插件的安装也非常繁琐甚至无法安装，而且Flash的播放性能消耗大，且存在安全漏洞等问题，也一直饱受诟病。
发明内容
本发明所要解决的技术问题是：提供一种基于浏览器的动画制作方法及系统，无需安装插件，使用目前主流浏览器即可绘制动画并实现播放。
为了解决上述技术问题，本发明采用的技术方案为：
一种基于浏览器的动画制作方法，包括：
创建空白Canvas画布；
预设时间间隔；
画笔绘制的同时，于画布上按照所述时间间隔顺序采集所述画笔的绘制轨迹上的每一个位置坐标；
依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据。
本发明提供的另一个技术方案为：
一种基于浏览器的动画制作系统，包括：
画布创建单元，用于创建空白Canvas画布；
时间预设单元，用于预设时间间隔；
采集单元，用于画笔绘制的同时，于画布上按照所述时间间隔顺序采集所述画笔的绘制轨迹上的每一个位置坐标；
存储单元，用于依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据。
本发明的有益效果在于：只需调用HTML5Canvas画布的相关API，画笔在画布上绘制时，按固定时间间隔采集绘制轨迹上的位置坐标，并对应画笔属性将采集的位置坐标在画布中依次连接线段直至绘制轨迹结束；依次记录画笔属性以及采集的点坐标序列作为绘制数据保存，即完成动画制作，无需安装插件，且浏览器可直接播放。
附图说明
图1为本发明实施例的基于浏览器的动画制作方法的流程图；
图2为本发明实施例的基于浏览器的动画制作系统的结构示意图；
图3为本发明实施例一的基于浏览器的动画制作方法的流程图；
图4为本发明实施例二的基于浏览器的动画制作方法的画笔属性及对应位置坐标的记录的示意图；
图5为本发明实施例二的基于浏览器的动画制作方法的每一条绘制轨迹上的所述采集的位置坐标记录示意图；
图6为本发明实施例二的基于浏览器的动画制作方法的动画播放的实时控制示意图；
图7为本发明实施例三的基于浏览器的动画制作系统的结构示意图；
图8为本发明实施例四的基于浏览器的动画制作系统的结构示意图。
标号说明：
100、绘制子系统；200、播放子系统；1、画布创建单元；2、时间预设单元；3、采集单元；4、存储单元；5、获取单元；6、渲染单元；7、控制单元；8、设置单元；9、时间设置单元。
具体实施方式
为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
本发明最关键的构思在于：画笔在Canvas画布上绘制的同时，于画布上按照预设的时间间隔顺序采集所述画笔的绘制轨迹上的每一个位置坐标；依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据。
请参照图1，本发明提供：
一种基于浏览器的动画制作方法，包括：
创建空白Canvas画布；
预设时间间隔；
画笔绘制的同时，于画布上按照所述时间间隔顺序采集所述画笔的绘制轨迹上的每一个位置坐标；
依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据。
从上述描述可知，上述绘制轨迹可为一条，也可为多条，对于同一条绘制轨迹的位置坐标，在开始绘制时采集画笔属性即可，也可对于每个坐标都采集一次画笔属性。
进一步的，依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据之后，进一步包括：
获取待播放的绘制数据，解析所述绘制数据，获得所述绘制数据对应的画笔属性和位置坐标；
根据解析后获得的画笔属性和位置坐标按照所述时间间隔在画布中依次连接所有位置坐标，以实现动画播放。
从上述描述可知，播放时依次按画笔属性和位置坐标，以固定的时间间隔在画布中依次连接所有位置坐标，实现播放动画的效果。
进一步的，根据解析后获得的画笔属性和位置坐标按照所述时间间隔在画布中依次连接所有位置坐标，以实现动画播放之后，进一步包括：
设置进度条和与所述进度条绑定的播放游标，所述进度条与所述绘制轨迹关联；
移动播放游标对所述动画播放的进度进行实时控制。
进一步的，所述实时控制包括播放、暂停、后退和前进中的至少一种。
从上述描述可知，通过移动播放游标，即可实现对动画播放的实时控制，如实现前进、后退等。其中播放、暂停、后退和前进是播放中最常碰到的控制。
进一步的，所述绘制轨迹包括两条以上，依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据进一步包括：
记录第一条绘制轨迹的画笔属性以及在所述第一条绘制轨迹上采集的位置坐标；
按照时间顺序依次记录其他绘制轨迹的画笔属性以及在该条绘制轨迹上采集的位置坐标。
从上述描述可知，每一条绘制轨迹即每一笔绘制动作形成的轨迹，而每一笔绘制动作则为画笔开始接触画布至画笔接触画布后第一次离开画布的过程。由于绘制动画时一般都不只一笔绘制动作，而同一笔绘制动作采用的画笔属性是相同的，因此，依次对每一笔绘制动作绘制出来的绘制轨迹，都记录该绘制轨迹的画笔属性以及在绘制轨迹上采集的位置坐标。如，对第一条绘制轨迹，记录第一条绘制轨迹的画笔属性和在第一条绘制轨迹上采集的坐标位置。
进一步的，依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据之后，进一步包括：
获取待播放的绘制数据，解析所述绘制数据得到所述绘制数据包含的所有绘制轨迹的画笔属性和对应的位置坐标，所述绘制轨迹的数量为两条以上；
按照第一条绘制轨迹的画笔属性，按照所述时间间隔在画布中依次连接所述第一条绘制轨迹对应的所有位置坐标；
按照时间顺序依次对其他绘制轨迹对应的所有位置坐标进行连接。
从上述描述可知，由于绘制轨迹有多条，因此解析出来的也为多条绘制轨迹的画笔属性以及对应的位置坐标，因此按照顺序及对应的画笔属性连接每一条绘制轨迹上的位置坐标即可。
进一步的，创建空白Canvas画布之后，画笔绘制之前，进一步包括：
设置画笔属性，所述画笔属性包括颜色、粗细和阴影中的至少一种。
从上述描述可知，画笔属性可以是Canvas画笔属性(包括颜色、样式、阴影、线条样式等)的部份或全部的组合，但不仅仅限于上述属性，如果没有设置，则采用Canvas的默认设置。
请参照图2，本发明的另一个技术方案为：
一种基于浏览器的动画制作系统，包括：
画布创建单元1，用于创建空白Canvas画布；
时间预设单元2，用于预设时间间隔；
采集单元3，用于画笔绘制的同时，于画布上按照所述时间间隔顺序采集所述画笔的绘制轨迹上的每一个位置坐标；
存储单元4，用于依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据。
进一步的，还包括：
获取单元5，用于获取待播放的绘制数据，解析所述绘制数据，获得所述绘制数据对应的画笔属性和位置坐标；
渲染单元6，用于根据解析后获得的画笔属性和位置坐标按照所述时间间隔在画布中依次连接所有位置坐标，以实现动画播放；
控制单元7，用于设置进度条和与所述进度条绑定的播放游标，所述进度条与所述绘制轨迹关联；移动播放游标对所述动画播放的进度进行实时控制。
进一步的，还包括：获取单元5和渲染单元6；
所述绘制轨迹包括两条以上，所述存储单元4具体用于记录第一条绘制轨迹的画笔属性以及在所述第一条绘制轨迹上采集的位置坐标；按照时间顺序依次记录其他绘制轨迹的画笔属性以及在该条绘制轨迹上采集的位置坐标。
所述获取单元5用于获取待播放的绘制数据，解析所述绘制数据得到所述绘制数据包含的所有绘制轨迹的画笔属性和对应的位置坐标，所述绘制轨迹的数量为两条以上；
所述渲染单元6用于按照第一条绘制轨迹的画笔属性，按照所述时间间隔在画布中依次连接所述第一条绘制轨迹对应的所有位置坐标；按照时间顺序依次对其他绘制轨迹对应的所有位置坐标进行连接。
实施例一
请参照图3，本实施例提供一种基于浏览器的动画制作方法，包括：
创建空白Canvas画布；
设置画笔属性，所述画笔属性包括颜色、粗细和阴影等中的至少一种；
预设时间间隔；该时间间隔采用操作系统的事件响应默认值；所述操作系统包括但不仅限于windows、linux、Mac OS、iOS及android等；
画笔绘制的同时，于画布上按照所述时间间隔顺序采集所述画笔的绘制轨迹上的每一个位置坐标；
依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据；
获取待播放的绘制数据，解析所述绘制数据，获得所述绘制数据对应的画笔属性和位置坐标；
根据解析后获得的画笔属性和位置坐标按照所述时间间隔在画布中依次连接所有位置坐标，以实现动画播放；
设置进度条和与所述进度条绑定的播放游标，所述进度条与所述绘制轨迹关联；
移动播放游标对所述动画播放的进度进行实时控制；所述实时控制包括播放、暂停、后退和前进中的至少一种。
需要说明的是，HTML5新增了Canvas画布元素和相应的API用于绘制图像，目前在主流浏览器、包括移动端浏览器中已获得广泛支持。Canvas元素本身并没有绘制能力，它仅仅是图形的容器，必须使用脚本来完成实际的绘图任务。而getContext()方法可返回一个“绘图上下文”对象，该对象提供了用于在画布上绘图的方法和属性。
实施例二
由于一幅绘制图像一般都由若干笔绘制动作完成，即由若干条绘制轨迹构成，因此本实施例提供一种基于浏览器的动画制作方法，包括：
创建空白Canvas画布；
设置画笔属性，所述画笔属性包括颜色、粗细、阴影、样式等中的至少一种；
预设时间间隔；该时间间隔采用操作系统的事件响应默认值；所述操作系统包括但不仅限于windows、linux、Mac OS、iOS及android等；
画笔在画布上绘制时，按固定时间间隔采集所述画笔绘制的每条绘制轨迹上的位置坐标，并对每条绘制轨迹按照器画笔颜色、粗细等画笔属性依次连接所有采集的位置坐标，以在画布中实现动画播放；
依次记录每条绘制轨迹的画笔属性对应每条绘制轨迹的所述采集的位置坐标，保存为绘制数据；如图4所示为画笔属性及对应位置坐标的记录的示意图；其中，每一条绘制轨迹上的所述采集的位置坐标记录示意图如图5所示；如，一幅动画由N条绘制轨迹构成，其中N为正整数，第1条绘制轨迹上采集了8个位置坐标，第2条绘制轨迹上采集了12个位置坐标，则依次记录第1条绘制轨迹的画笔属性以及在第1条绘制轨迹上采集的8个位置坐标，第2条绘制轨迹的画笔属性以及在第2条绘制轨迹上采集的12个位置坐标，以此类推，记录其余N-2条绘制轨迹的数据；
获取要播放的绘制数据，解析得到该绘制数据包含的每条绘制轨迹的画笔属性对应每条绘制轨迹的所述采集的位置坐标；
依次按解析得到的每条绘制轨迹的画笔属性，以固定的时间间隔在画布中依次连接该条绘制轨迹的对应的所述采集的位置坐标，实现播放绘制动画效果；如，以固定的时间间隔在画布中依次连接上述第1条绘制轨迹上的8个位置坐标，然后以固定的时间间隔在画布中依次连接第2条绘制轨迹上的12个位置坐标，按照时间顺序对其他N-2条绘制轨迹上采集的位置坐标进行连接；
设置进度条和与所述进度条绑定的播放游标，所述进度条与所述绘制轨迹关联，将进度条以正序或倒序移动播放游标，实现对真彩绘制动画播放进度的实时控制；所述实时控制包括播放、暂停、前一笔、后一笔实时控制中的一种或几种。
具体的，如图6所示为动画播放的实时控制示意图，动画绘制轨迹的数量为N，则将进度条N等分。假设播放游标当前处于进度条第3条绘制轨迹的位置，当播放游标从当前位置按正序移动至进度条第n条绘制轨迹对应的位置，其中n为正整数，且n小于等于N，实现第3条绘制轨迹至第n条绘制轨迹的连续渲染并展示，即为正序播放；当播放游标从当前位置按倒序移动至进度条第1条绘制轨迹对应的位置，实现第3条绘制轨迹至第1条绘制轨迹的连续渲染并展示，即为倒序播放。
假设播放游标当前处于进度条第3条绘制轨迹对应的位置，此时渲染并展示第3条绘制轨迹。停止移动播放游标，播放即暂停在第3条绘制轨迹的位置。
假设播放游标当前处于进度条第2条绘制轨迹对应的位置，可以将播放游标移动到进度条第3条绘制轨迹对应的位置，渲染并展示第3笔绘制数据，实现前一条绘制轨迹的单条播放。
假设播放游标当前处于进度条第3条绘制轨迹对应的位置，可以将播放游标移动到进度条第2条绘制轨迹对应的位置，渲染并展示第2条绘制轨迹，实现后一条绘制轨迹的单条播放。
实施例三
请参照图7，本实施例提供一种与实施例一的基于浏览器的动画制作方法对应的系统，包括：绘制子系统100和播放子系统200，其中绘制子系统100包括：
画布创建单元1，用于创建空白Canvas画布；设置单元8，用于设置画笔属性；
时间预设单元2，用于预设时间间隔；该时间间隔采用操作系统的事件响应默认值；所述操作系统包括但不仅限于windows、linux、Mac OS、iOS及android等；
采集单元3，用于画笔绘制的同时，于画布上按照所述时间间隔顺序采集所述画笔的绘制轨迹上的每一个位置坐标；
存储单元4，用于依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据；
播放子系统200包括：
获取单元5，用于获取待播放的绘制数据，解析所述绘制数据，获得所述绘制数据对应的画笔属性和位置坐标；
渲染单元6，用于根据解析后获得的画笔属性和位置坐标按照所述时间间隔在画布中依次连接所有位置坐标，以实现动画播放；
控制单元7，用于设置进度条和与所述进度条绑定的播放游标，所述进度条与所述绘制轨迹关联；移动播放游标对所述动画播放的进度进行实时控制。
实施例四
请参照图8，本实施例提供一种与实施例二的基于浏览器的动画制作方法对应的系统，包括：绘制子系统100和播放子系统200，其中绘制子系统100包括：
其中绘制子系统100包括：
画布创建单元1，用于创建空白Canvas画布；设置单元8，用于设置画笔属性；
时间预设单元2，用于预设时间间隔；该时间间隔采用操作系统的事件响应默认值；所述操作系统包括但不仅限于windows、linux、Mac OS、iOS及android等；
采集单元3，用于画笔绘制的同时，于画布上按照所述时间间隔顺序采集所述画笔的绘制轨迹上的每一个位置坐标；所述绘制轨迹为两条以上；
存储单元4，用于记录第一条绘制轨迹的画笔属性以及在所述第一条绘制轨迹上采集的位置坐标；按照时间顺序依次记录其他绘制轨迹的画笔属性以及在该条绘制轨迹上采集的位置坐标依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据；
所述播放子系统200包括：
获取单元5，用于所述获取单元用于获取待播放的绘制数据，解析所述绘制数据，获得两条以上的绘制轨迹的画笔属性和对应的位置坐标；
渲染单元6，用于所述渲染单元用于按照第一条绘制轨迹的画笔属性，按照所述时间间隔在画布中依次连接所述第一条绘制轨迹对应的所有位置坐标；按照时间顺序依次对其他绘制轨迹对应的所有位置坐标进行连接；
控制单元7，用于设置进度条和与所述进度条绑定的播放游标，所述进度条与所述绘制轨迹关联；移动播放游标对所述动画播放的进度进行实时控制；
时间设置单元9，用于根据需要设置渲染固定时间间隔，以调整真彩动画播放速度；
具体的，所述控制单元提供撤销、还原、清空画布等实时控制按钮，实现绘制动作的实时控制；
其中，撤销按钮的实时控制方法为：记录每条绘制操作或清空操作，同时记录每条绘制操作的绘制轨迹及其相关数据，并保存为一个可撤销操作序列，点击撤销按钮时，删除可撤销操作序列的最后一条操作记录，同时将该操作记录放入可还原操作序列中，并根据撤销后的绘制数据在画布中展示图像；
还原按钮的实时控制方法为：可还原操作序列中保存了多个操作记录，点击一次还原按钮时，删除可还原操作序列中的最后一条操作记录，并显示该记录的轨迹，可按照同样的方法继续进行还原操作；当执行新的绘制操作或清空画布时，清空可还原操作序列；
清空画布按钮的实时控制方法为：点击清空画布按钮时，清除画布中所展示的图像，同时清空绘制数据序列和可还原操作序列。
优选的，对上述绘制子系统和播放子系统进行封装，仅对外提供数据源接口。
综上所述，本发明提供的基于浏览器的动画制作方法及系统，解决了在浏览器中真彩动画的绘制和播放需要安装插件，使用门槛高的问题，极大提高用户体验。此外，本发明通过绘制子系统和播放子系统封装隐藏了动画绘制和播放的实现细节，仅对外公开数据源接口，为基于WEB的应用集成提供了便利。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种基于浏览器的动画制作方法，其特征在于，包括：
创建空白Canvas画布；
预设时间间隔；
画笔绘制的同时，于画布上按照所述时间间隔顺序采集所述画笔的绘制轨迹上的每一个位置坐标；
依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据。
2.根据权利要求1所述的基于浏览器的动画制作方法，其特征在于，依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据之后，进一步包括：
获取待播放的绘制数据，解析所述绘制数据，获得所述绘制数据对应的画笔属性和位置坐标；
根据解析后获得的画笔属性和位置坐标按照所述时间间隔在画布中依次连接所有位置坐标，以实现动画播放。
3.根据权利要求2所述的基于浏览器的动画制作方法，其特征在于，根据解析后获得的画笔属性和位置坐标按照所述时间间隔在画布中依次连接所有位置坐标，以实现动画播放之后，进一步包括：
设置进度条和与所述进度条绑定的播放游标，所述进度条与所述绘制轨迹关联；
移动播放游标对所述动画播放的进度进行实时控制。
4.根据权利要求3所述的基于浏览器的动画制作及播放方法，其特征在于，所述实时控制包括播放、暂停、后退和前进中的至少一种。
5.根据权利要求1所述的基于浏览器的动画制作方法，其特征在于，所述绘制轨迹包括两条以上，依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据进一步包括：
记录第一条绘制轨迹的画笔属性以及在所述第一条绘制轨迹上采集的位置坐标；
按照时间顺序依次记录其他绘制轨迹的画笔属性以及在该条绘制轨迹上采集的位置坐标。
6.根据权利要求5所述的基于浏览器的动画制作方法，其特征在于，依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据之后，进一步包括：
获取待播放的绘制数据，解析所述绘制数据，得到所述绘制数据包含的所有绘制轨迹的画笔属性和对应的位置坐标，所述绘制轨迹的数量为两条以上；
按照第一条绘制轨迹的画笔属性，按照所述时间间隔在画布中依次连接所述第一条绘制轨迹对应的所有位置坐标；
按照时间顺序依次对其他绘制轨迹对应的所有位置坐标进行连接。
7.根据权利要求1所述的基于浏览器的动画制作方法，其特征在于，创建空白Canvas画布之后，画笔绘制之前，进一步包括：
设置画笔属性，所述画笔属性包括颜色、粗细和阴影中的至少一种。
8.一种基于浏览器的动画制作系统，其特征在于，包括：
画布创建单元，用于创建空白Canvas画布；
时间预设单元，用于预设时间间隔；
采集单元，用于画笔绘制的同时，于画布上按照所述时间间隔顺序采集所述画笔的绘制轨迹上的每一个位置坐标；
存储单元，用于依次记录位置坐标对应的画笔属性及采集的位置坐标，保存为绘制数据。
9.根据权利要求8所述的基于浏览器的动画制作系统，其特征在于，还包括：
获取单元，用于获取待播放的绘制数据，解析所述绘制数据，获得所述绘制数据对应的画笔属性和位置坐标；
渲染单元，用于根据解析后获得的画笔属性和位置坐标按照所述时间间隔在画布中依次连接所有位置坐标，以实现动画播放；
控制单元，用于设置进度条和与所述进度条绑定的播放游标，所述进度条与所述绘制轨迹关联；移动播放游标对所述动画播放的进度进行实时控制。
10.根据权利要求8所述的基于浏览器的动画制作系统，其特征在于，还包括：获取单元和渲染单元；
所述绘制轨迹包括两条以上，所述存储单元具体用于记录第一条绘制轨迹的画笔属性以及在所述第一条绘制轨迹上采集的位置坐标；按照时间顺序依次记录其他绘制轨迹的画笔属性以及在该条绘制轨迹上采集的位置坐标；
所述获取单元用于获取待播放的绘制数据，解析所述绘制数据，得到所述绘制数据包含的所有绘制轨迹的画笔属性和对应的位置坐标，所述绘制轨迹的数量为两条以上；
所述渲染单元用于按照第一条绘制轨迹的画笔属性，按照所述时间间隔在画布中依次连接所述第一条绘制轨迹对应的所有位置坐标；按照时间顺序依次对其他绘制轨迹对应的所有位置坐标进行连接。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610999740.XA CN106569834A (zh) | 2016-11-14 | 2016-11-14 | 基于浏览器的动画制作方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610999740.XA CN106569834A (zh) | 2016-11-14 | 2016-11-14 | 基于浏览器的动画制作方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106569834A true CN106569834A (zh) | 2017-04-19 |
Family
ID=58542232
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610999740.XA Pending CN106569834A (zh) | 2016-11-14 | 2016-11-14 | 基于浏览器的动画制作方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106569834A (zh) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107767431A (zh) * | 2017-09-28 | 2018-03-06 | 北京知道创宇信息技术有限公司 | 一种Web动画制作方法及计算设备 |
| CN108845858A (zh) * | 2018-06-28 | 2018-11-20 | 北京酷我科技有限公司 | 一种弧线运动的动画算法 |
| CN108874385A (zh) * | 2018-06-28 | 2018-11-23 | 北京酷我科技有限公司 | 一种能量守恒双摆球的动画效果算法 |
| CN109271226A (zh) * | 2018-09-25 | 2019-01-25 | 江苏电力信息技术有限公司 | 一种自适应动态标绘面板方法 |
| CN110111401A (zh) * | 2018-01-31 | 2019-08-09 | 北京新唐思创教育科技有限公司 | 用于网络课堂的动画播放方法及装置 |
| CN110727825A (zh) * | 2019-09-20 | 2020-01-24 | 彩讯科技股份有限公司 | 动画播放的控制方法、装置、服务器和存储介质 |
| CN110989878A (zh) * | 2019-11-01 | 2020-04-10 | 百度在线网络技术（北京）有限公司 | 小程序中的动画展示方法、装置、电子设备及存储介质 |
| CN111192348A (zh) * | 2018-10-29 | 2020-05-22 | 中国移动通信有限公司研究院 | 数据处理方法及装置、电子设备及存储介质 |
| CN111722731A (zh) * | 2019-03-19 | 2020-09-29 | 福建天晴数码有限公司 | 一种基于Unity引擎的地形系统的画笔实现方法及终端 |
| CN115167735A (zh) * | 2020-09-24 | 2022-10-11 | Oppo广东移动通信有限公司 | 图像生成方法和装置、终端和可读存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101207470A (zh) * | 2007-12-05 | 2008-06-25 | 北京金山软件有限公司 | 一种网络数据同步的方法及系统 |
| CN103077025A (zh) * | 2012-12-28 | 2013-05-01 | 锐达互动科技股份有限公司 | 一种封闭几何图形擦除轨迹线并生成新轨迹线的方法 |
| CN103440101A (zh) * | 2013-08-16 | 2013-12-11 | 深圳市经纬科技有限公司 | 一种手写原笔迹数据的处理方法、系统及手机 |
| CN103500059A (zh) * | 2013-09-16 | 2014-01-08 | 天脉聚源(北京)传媒科技有限公司 | 一种通过移动互联网进行绘画的方法、系统及装置 |
-
2016
- 2016-11-14 CN CN201610999740.XA patent/CN106569834A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101207470A (zh) * | 2007-12-05 | 2008-06-25 | 北京金山软件有限公司 | 一种网络数据同步的方法及系统 |
| CN103077025A (zh) * | 2012-12-28 | 2013-05-01 | 锐达互动科技股份有限公司 | 一种封闭几何图形擦除轨迹线并生成新轨迹线的方法 |
| CN103440101A (zh) * | 2013-08-16 | 2013-12-11 | 深圳市经纬科技有限公司 | 一种手写原笔迹数据的处理方法、系统及手机 |
| CN103500059A (zh) * | 2013-09-16 | 2014-01-08 | 天脉聚源(北京)传媒科技有限公司 | 一种通过移动互联网进行绘画的方法、系统及装置 |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107767431A (zh) * | 2017-09-28 | 2018-03-06 | 北京知道创宇信息技术有限公司 | 一种Web动画制作方法及计算设备 |
| CN110111401A (zh) * | 2018-01-31 | 2019-08-09 | 北京新唐思创教育科技有限公司 | 用于网络课堂的动画播放方法及装置 |
| CN108845858A (zh) * | 2018-06-28 | 2018-11-20 | 北京酷我科技有限公司 | 一种弧线运动的动画算法 |
| CN108874385A (zh) * | 2018-06-28 | 2018-11-23 | 北京酷我科技有限公司 | 一种能量守恒双摆球的动画效果算法 |
| CN109271226A (zh) * | 2018-09-25 | 2019-01-25 | 江苏电力信息技术有限公司 | 一种自适应动态标绘面板方法 |
| CN111192348A (zh) * | 2018-10-29 | 2020-05-22 | 中国移动通信有限公司研究院 | 数据处理方法及装置、电子设备及存储介质 |
| CN111192348B (zh) * | 2018-10-29 | 2023-03-31 | 中国移动通信有限公司研究院 | 数据处理方法及装置、电子设备及存储介质 |
| CN111722731B (zh) * | 2019-03-19 | 2022-06-07 | 福建天晴数码有限公司 | 一种基于Unity引擎的地形系统的画笔实现方法及终端 |
| CN111722731A (zh) * | 2019-03-19 | 2020-09-29 | 福建天晴数码有限公司 | 一种基于Unity引擎的地形系统的画笔实现方法及终端 |
| CN110727825A (zh) * | 2019-09-20 | 2020-01-24 | 彩讯科技股份有限公司 | 动画播放的控制方法、装置、服务器和存储介质 |
| CN110989878A (zh) * | 2019-11-01 | 2020-04-10 | 百度在线网络技术（北京）有限公司 | 小程序中的动画展示方法、装置、电子设备及存储介质 |
| CN110989878B (zh) * | 2019-11-01 | 2021-07-20 | 百度在线网络技术（北京）有限公司 | 小程序中的动画展示方法、装置、电子设备及存储介质 |
| CN115167735A (zh) * | 2020-09-24 | 2022-10-11 | Oppo广东移动通信有限公司 | 图像生成方法和装置、终端和可读存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106569834A (zh) | 基于浏览器的动画制作方法及系统 | |
| US20220080318A1 (en) | Method and system of automatic animation generation | |
| CN102541515B (zh) | 一种实现切屏特效的方法及装置 | |
| CN111669623B (zh) | 视频特效的处理方法、装置以及电子设备 | |
| US8918758B2 (en) | Systems and methods for storing object and action data during media content development | |
| CN108665520A (zh) | 一种页面动画渲染的方法及装置 | |
| CN111193876B (zh) | 视频中添加特效的方法及装置 | |
| CN109636884A (zh) | 动画处理方法、装置及设备 | |
| CN108010112A (zh) | 动画处理方法、装置及存储介质 | |
| CN102135873B (zh) | 一种创建用户界面的方法和装置 | |
| CN105630459A (zh) | 一种将ppt转换为html页面的方法 | |
| AU2005229639A1 (en) | Coordinating animations and media in computer display output | |
| CN103338235B (zh) | 在手机上实现动态壁纸交互式、个性化创作的方法 | |
| CN103294451B (zh) | 富页面中应用的多任务多窗口实现方法及系统 | |
| CN104581353B (zh) | 一种视频的录制/播放方法及录制/播放装置 | |
| CN103092612A (zh) | 实现安卓操作系统3d桌面贴图的方法及电子装置 | |
| CN103593184B (zh) | 图像显示系统及图像显示方法 | |
| CN104866318A (zh) | 一种多窗口中标签页的展示方法及装置 | |
| CN107402985A (zh) | 视频特效输出控制方法、装置及计算机可读存储介质 | |
| CN103020237A (zh) | 一种网页更新方法和装置 | |
| CN107728905A (zh) | 一种弹幕显示方法、装置及存储介质 | |
| CN112689197B (zh) | 一种文件格式转换方法、装置、以及计算机存储介质 | |
| KR102292789B1 (ko) | 디스플레이장치 및 그 제어방법 | |
| US20140282000A1 (en) | Animated character conversation generator | |
| CN105468573A (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 |
Application publication date: 20170419 |
|
| RJ01 | Rejection of invention patent application after publication |