CN104866506B - 一种播放动画的方法及装置 - Google Patents
一种播放动画的方法及装置 Download PDFInfo
- Publication number
- CN104866506B CN104866506B CN201410065537.6A CN201410065537A CN104866506B CN 104866506 B CN104866506 B CN 104866506B CN 201410065537 A CN201410065537 A CN 201410065537A CN 104866506 B CN104866506 B CN 104866506B
- Authority
- CN
- China
- Prior art keywords
- deviation angle
- predeterminable area
- period
- mark
- webpage
- 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.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/106—Display of layout of documents; Previewing
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L47/00—Traffic control in data switching networks
- H04L47/10—Flow control; Congestion control
- H04L47/19—Flow control; Congestion control at layers above the network layer
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Databases & Information Systems (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (AREA)
- Data Mining & Analysis (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Health & Medical Sciences (AREA)
- Processing Or Creating Images (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种播放动画的方法及装置,属于计算机技术领域。所述方法包括:获取对象在第一周期的第一位置和第一偏移角度,第一周期在当前周期之前;根据第一位置和第一偏移角度,获取对象在当前周期的第二位置;如果第二位置在网页中的预设区域内,则根据第二位置在网页中的预设区域中绘制对象的图像。所述装置包括:第一获取模块、第二获取模块和第一绘制模块。本发明能够节省终端获取网页数据所需要的流量,缩短终端获取网页数据的时间。
Description
技术领域
本发明涉及计算机技术领域,特别涉及一种播放动画的方法及装置。
背景技术
为了美化网页,程序员在网页数据中设置了用于美化网页的动画文件,终端在显示网页时会在网页的某个区域中播放该动画文件,例如在网页的顶部区域播放雪花飘落的动画或树叶掉落的动画等。
目前,动画文件是由一帧帧图像组成,且这些图像都是技术人员绘制的。例如,对于雪花飘落的动画,技术人员根据匀速运动或简单的非线性运动等运动方式计算出每个时间点雪花所处的位置;根据每个时间点雪花所处的位置,分别绘制每个时间点对应的一帧图像,按时间顺序将每帧图像组成雪花飘落的动画文件;然后将该动画文件放入网页数据中,终端在显示网页时,可以在该网页的顶部区域中播放雪花飘落的动画。
在实现本发明的过程中,发明人发现现有技术至少存在以下问题:
网页数据中的动画文件包括多幅图像,由于图像占据较大的容量,导致终端获取网页数据时花费的流量增多,并且延长了终端获取网页数据的时间。
发明内容
为了节省终端获取网页数据所需要的流量,缩短终端获取网页数据的时间,本发明提供了一种播放动画的方法及装置。所述技术方案如下:
一种播放动画的方法,所述方法包括:
获取对象在第一周期的第一位置和第一偏移角度,所述第一周期在当前周期之前;
根据所述第一位置和第一偏移角度,获取所述对象在当前周期的第二位置;
如果所述第二位置在网页中的预设区域内,则根据所述第二位置在所述网页中的预设区域中绘制所述对象的图像。
一种播放动画的装置,所述装置包括:
第一获取模块,用于获取对象在第一周期的第一位置和第一偏移角度,所述第一周期在当前周期之前;
第二获取模块,用于根据所述第一获取模块获取的所述第一位置和第一偏移角度,获取所述对象在当前周期的第二位置;
第一绘制模块,用于如果所述第二获取模块获取的所述第二位置在网页中的预设区域内,则根据所述第二位置在所述网页中的预设区域中绘制所述对象的图像。
在本发明实施例中,获取对象在第一周期的第一位置和第一偏移角度,第一周期在当前周期之前;根据第一位置和第一偏移角度,获取对象在当前周期的第二位置;如果第二位置在网页中的预设区域内,则根据第二位置在网页中的预设区域中绘制对象的图像。由于终端根据对象在第一周期的第一位置和第一偏移角度获取了对象在当前周期的第二位置,根据第二位置在网页中的预设区域中绘制对象的图像,如此周期性的在预设区域内绘制对象的图像,实现了在预设区域内播放动画,没有增加网页数据的容量,节省了终端获取网页数据所需要的流量,缩短了终端获取网页数据的时间。
附图说明
图1是本发明实施例1提供的一种播放动画的方法流程图;
图2-1是本发明实施例2提供的一种播放动画的方法流程图;
图2-2是本发明实施例2提供的预设区域第一示意图;
图2-3是本发明实施例2提供的预设区域第二示意图;
图2-4是本发明实施例2提供的预设区域第三示意图;
图3是本发明实施例3提供的一种播放动画的装置结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚,下面将结合附图对本发明实施方式作进一步地详细描述。
实施例1
参见图1,本发明实施例提供了一种播放动画的方法,包括:
步骤101:获取对象在第一周期的第一位置和第一偏移角度,第一周期在当前周期之前;
步骤102根据第一位置和第一偏移角度,获取对象在当前周期的第二位置;
步骤103:如果第二位置在网页中的预设区域内,则根据第二位置在网页中的预设区域中绘制对象的图像。
优选地,获取对象在第一周期的第一位置和第一偏移角度,包括:
根据对象的标识,从对象的标识、位置与偏移角度的对应关系中获取对应的位置和偏移角度;
将获取的位置和偏移角度分别确定为对象在第一周期的第一位置和第一偏移角度。
进一步地,获取对象在第一周期的第一位置和第一偏移角度之前,还包括:
在开始显示所述网页时,获取连续预设个数个周期,根据所述网页中的预设区域的长度和宽度,确定在获取的每个周期内向所述预设区域中增加对象的数量;
在获取的周期到达时,根据在所述到达的周期内向所述预设区域中增加对象的数量和所述预设区域的宽度,确定增加的每个对象在预设区域中的初始位置、每个对象的大小和偏移角度的初值,为每个对象分配标识;
根据每个对象的初始位置和大小,在预设区域中绘制每个对象的图像;
将每个对象的标识、初始位置和偏移角度的初值存储在对象的标识、位置与偏移角度的对应关系中。
优选地,根据第一位置和第一偏移角度,获取对象在当前周期的第二位置,包括:
增加第一偏移角度,得到对象在当前周期的第二偏移角度;
根据第二偏移角度,计算对象的位置偏移量;
根据第一位置和对象的位置偏移量,计算对象在当前周期的第二位置;
优选地,根据第二偏移角度,计算对象的位置偏移量,包括:
根据第二偏移角度,通过如下所示的公式(1),计算对象的位置偏移量,位置偏移量包括横坐标偏移量和纵坐标偏移量;
优选地,在公式(1)中,m为横坐标偏移量,n为纵坐标偏移量,ρ为预设的对象的密度,r为对象的大小,angle为第二偏移角度。
进一步地,根据第一位置和对象的位置偏移量,计算对象在当前周期的第二位置之后,还包括:
在对象的标识、位置与偏移角度的对应关系中将对象的第一位置和第一偏移角度更新为对象的第二位置和第二偏移角度。
进一步地,该方法还包括:
如果第二位置不在网页中的预设区域内,则根据预设区域的长度和宽度,确定对象在预设区域中的初始位置,根据初始位置在预设区域中绘制对象的图像。
进一步地,确定对象在预设区域的顶部的初始位置之后,还包括
增加第一偏移角度,得到对象在当前周期的第二偏移角度;
在对象的标识、位置与偏移角度的对应关系中将对象的第一位置和第一偏移角度更新为对象的初始位置和第二偏移角度。
在本发明实施例中,获取对象在第一周期的第一位置和第一偏移角度,第一周期在当前周期之前;根据第一位置和第一偏移角度,获取对象在当前周期的第二位置;如果第二位置在网页中的预设区域内,则根据第二位置在网页中的预设区域中绘制对象的图像。由于终端根据对象在第一周期的第一位置和第一偏移角度获取了对象在当前周期的第二位置,根据第二位置在网页中的预设区域中绘制对象的图像,如此周期性的在预设区域内绘制对象的图像,实现了在预设区域内播放动画,没有增加网页数据的容量,节省了终端获取网页数据所需要的流量,缩短了终端获取网页数据的时间。
实施例2
本发明实施例提供了一种播放动画的方法。
在本发明实施例中,终端在显示网页时,周期性地计算对象在一个周期内所处的位置,根据对象所处的位置在网页的预设区域中绘制出对象的图像,以实现播放动画。
参见图2-1,该方法包括:
步骤201:在开始显示网页时获取连续预设个数个周期,根据网页中的预设区域的长度和宽度,确定在获取的每个周期内向预设区域中增加对象的数量;
其中,网页中的预设区域为用于播放动画的区域,可以为网页中用于播放动画的canvas元素等,预设区域在网页中的位置可以为在网页的顶部、底部、左边或右边等,例如,如图2-2所示的预设区域在网页的顶部。在开始显示网页后的连续预设个数个周期内,在每个周期内向预设区域中添加对象,以将预设区域填满。
本步骤可以为,在开始显示网页时,获取网页中的预设区域的长度和宽度,根据获取的长度和宽度计算预设区域的面积,根据预设的对象密度和计算的预设区域的面积,计算预设的对象密度和预设区域的面积的乘积,将计算的乘积确定为预设区域中充满对象时对象的总数量。获取预先设定的连续预设个数个周期。根据计算的对象的总数量和获取的周期的个数,计算每个周期中新增加的对象的数量。
例如,在本发明实施例中以播放雪花飘落的动画为例进行说明,则本例中的对象为雪花。如图2-2所示的网页中的预设区域,假设预设区域的长度和宽度均为10,预设的雪花密度为0.1。在显示网页时,获取网页中的预设区域的长度10和宽度10,根据获取的长度10和宽度10计算出预设区域的面积为100,根据预设的雪花密度0.1和计算的预设区域的面积100,计算预设的雪花密度0.1和预设区域的面积100的乘积为10,将计算的乘积10确定为预设区域中充满雪花时雪花的总数量。预先设定了在连续预设个数个周期预设区域中充满雪花,假设预先设定的周期的个数为5,获取预先设定的连续预5个周期。根据计算的雪花的总数量10和获取的周期的个数5,计算出每个周期中新增加的雪花的数量为2。
步骤202:在获取的周期到达时,根据在到达的周期内向预设区域中增加对象的数量和预设区域的宽度,确定增加的每个对象在预设区域中的初始位置、每个对象的大小和偏移角度的初值,为每个对象分配标识;
其中,偏移角度为对象在一个周期内的位移与预设方向之间的夹角,例如,对象在一个周期内的位置从A点变化到B点,则对象在该周期内的位移为位移AB,假设预设方向为水平向右的方向,则对象在该周期内的偏移角度为位移AB与水平向右的方向之间的夹角。
本步骤具体为,在获取的周期到达时,根据在到达的周期内向预设区域中增加对象的数量和获取的预设区域的宽度,随机设定增加的每个对象的横坐标,以及将每个对象的纵坐标设为零,如此得到每个对象在预设区域中的初始位置。设置每个对象的大小,每个对象的大小都在预设大小范围内。设定每个对象的偏移角度的初值,例如,设定每个对象偏移角度的初值可以为0或1等。为每个对象分配标识。
其中,设置的每个对象的大小可以相等,也可以不相等。
例如,在获取的周期到达时,假设获取的第一个周期到达时,根据在第一个周期内向预设区域中增加雪花的数量2和获取的预设区域的宽度10,随机设定雪花的横坐标的值,将雪花的纵坐标的值设为零,假设设定的一片雪花的横坐标值为1,则该雪花的初始位置坐标为(1,0),假设设定的另一片雪花的横坐标值为5,则该雪花的初始位置坐标为(5,0)。假设预先设定了3个不同的半径分别为0.2、0.4和0.6,从预先设定的3个半径中选择一个半径,假设选择的半径为0.4,将选择的半径0.4作为增加的2片雪花的半径。设定这2片雪花的偏移角度的初值为0。为初始位置坐标为(1,0)的雪花分配标识001,为初始位置坐标为(5,0)的雪花分配标识002。
其中,对于其他获取的每个周期同该周期一样,执行上述操作来确定每个对象在预设区域中的初始位置、每个对象的大小和偏移角度的初值,以及为每个对象分配标识。
其中,确定出每个对象在预设区域中的初始位置、每个对象的大小和偏移角度的初值之后,执行步骤203的操作在到达的周期内向网页的预设区域中绘制出每个对象的初始图像。
步骤203:根据每个对象在预设区域中的初始位置和每个对象的大小,在网页的预设区域中绘制每个对象的图像;
例如,如图2-3所示,根据雪花001在预设区域中的初始位置(1,0)和该片雪花的半径0.4,以及雪花002在预设区域中的初始位置(5,0)和该片雪花的半径0.4,在网页的预设区域中绘制出这2片雪花的图像。
其中,在到达的周期内向网页的预设区域中绘制出每个对象的图像之后,通过如下步骤204来存储每个对象的的标识、初始位置和偏移角度的初值。
步骤204:将每个对象的标识、初始位置和偏移角度的初值存储在对象的标识、位置与偏移角度的对应关系中;
例如,将每片雪花的标识、初始位置和偏移角度的初值存储在如表1所示的雪花的标识、位置与偏移角度的对应关系中。
表1
| 雪花的标识 | 位置 | 偏移角度 |
| 001 | (1,0) | 0 |
| 002 | (5,0) | 0 |
| …… | …… |
进一步地,如果每个对象的大小不相同,则还需要存储每个对象的标识与大小的对应关系。
其中,对于其他获取的每个周期同该周期一样,执行如上步骤202-204的操作根据增加的每个对象在预设区域中的初始位置在获取的每个周期到达时向网页的预设区域中绘制出增加的每个对象的图像。
在显示网页后的第二周期开始,每当一个周期到达时,需要重新绘制预设区域中的每个对象的图像,为了便于说明,本实施例中以一个对象为例进行说明,对于预设区域中除该对象外的其他每个对象同该对象一样,执行如下步骤205-210的操作来重新绘制每个对象的图像。
步骤205:获取对象在第一周期的第一位置和第一偏移角度,第一周期在当前周期之前;
其中,第一周期在当前周期之前且与当前周期相邻。
本步骤具体为,从预设区域中获取对象的标识,根据获取的对象的标识,从已存储的对象的标识、位置与偏移角度的对应关系中,获取对应的位置和偏移角度,将获取的位置和偏移角度分别确定为该对象在第一周期的第一位置和第一偏移角度。
例如,从预设区域中获取雪花的标识001,根据获取的雪花的标识001,从已存储如表1所示的雪花的标识、位置与偏移角度的对应关系中,获取对应的位置(1,0)和偏移角度0,将获取的位置(1,0)和偏移角度0分别确定为该雪花在第一周期的第一位置和第一偏移角度。
步骤206:根据对象在第一周期的第一位置和第一偏移角度,获取该对象在当前周期的第二位置;
具体地,预先设置一个偏移角度增加量,如偏移角度增加量可以为0.01或0.02等。将获取的对象在第一周期的第一偏移角度加上预先设置的偏移角度增加量,以增加第一偏移角度,得到该对象在当前周期的第二偏移角度;根据第二偏移角度,通过如下所示的公式(1),计算该对象的位置偏移量;根据第一位置和该对象的位置偏移量,通过如下所示的公式(2),计算该对象在当前周期的第二位置。
其中,在公式(1)中,m为对象的横坐标的位置偏移量,n为对象的纵坐标的位置偏移量,ρ为预设的对象的密度,r为对象的大小,angle为对象在当前周期的第二偏移角度。
其中,在公式(2)中,x为对象在当前周期的第二位置的横坐标,x′为对象在第一周期的第一位置的横坐标,y为对象在当前周期的第二位置的纵坐标,y′为对象在第一周期的第一位置的纵坐标。
例如,假设预先设置的偏移角度增加量为0.01,预设的雪花密度为0.1,雪花的半径为0.4。将获取的雪花在第一周期的第一偏移角度0加上预先设置的偏移角度增加量0.01,以增加第一偏移角度,得到该雪花在当前周期的第二偏移角度0.01;根据第二偏移角度0.01,通过如下所示的公式(3),计算出该雪花的横坐标的位置偏移量为0.02,纵坐标的位置偏移量为2.19;根据第一位置(1,0)、该雪花的横坐标的位置偏移量0.02和纵坐标的位置偏移量2.19,通过如下所示的公式(4),计算出该雪花在当前周期的第二位置为(1.02,2.19)。
进一步地,如果每个对象的大小不相同,则需要根据对象的标识从已存储的每个对象的标识与大小的对应关系中,获取对象的大小,然后根据对象的大小、对象在第一周期的第一位置和第一偏移角度,获取该对象在当前周期的第二位置。
其中,获取该对象的第二位置之后,判断第二位置的横坐标和纵坐标是否均分别小于网页的预设区域的长度和宽度,如果是,则判断出第二位置在网页的预设区域中,执行步骤207在网页的预设区域中绘制该对象的图像。如果否,则判断出第二位置不在网页的预设区域中,执行步骤209来确定该对象在预设区域的顶部的初始位置,根据初始位置绘制该对象的图像。
步骤207:根据对象在当前周期的第二位置在网页的预设区域中绘制该对象的图像;
具体地,删除网页中的预设区域中的该对象的图像,根据对象在当前周期所处的第二位置在预设区域中绘制该对象的图像。
例如,获取的该雪花的第二位置为(1.02,2.19),第二位置的横坐标1.02小于预设区域的长度10且纵坐标2.19也小于预设区域的宽度10,判断出第二位置在预设区域内,删除网页中的预设区域中的该雪花的图像,根据该雪花在当前周期所处的第二位置(1.02,2.19)在预设区域中绘制该雪花的图像,如图2-4所示。
其中,根据对象在当前周期的第二位置在网页的预设区域中绘制出该对象的图像之后,通过如下步骤208来更新对象的标识、位置和偏移角度的对应关系中的对象的位置和偏移角度。
步骤208:在对象的标识、位置与偏移角度的对应关系中将对象的第一位置和第一偏移角度更新为对象的第二位置和第二偏移角度;
具体地,从预设区域中获取对象的标识,根据获取的对象的标识,从对象的标识、位置和偏移角度的对应关系中获取该对象的第一位置和第一偏移角度,将获取的该对象的第一位置更新为该对象的第二位置,将获取的该对象的第一偏移角度更新为该对象的第二偏移角度。
例如,从预设区域中获取雪花的标识001,根据获取的雪花的标识001,从如表1所示的雪花的标识、位置和偏移角度的对应关系中获取该雪花的第一位置(1,0)和第一偏移角度0,将获取的该雪花的第一位置(1,0)更新为该雪花的第二位置(1.02,2.19),将获取的该雪花的第一偏移角度0更新为该雪花的第二偏移角度0.01,如表2所示。
表2
| 雪花的标识 | 位置 | 偏移角度 |
| 001 | (1.02,2.19) | 0.01 |
| …… | …… | …… |
其中,在下一个周期到来时,再跳回到步骤205来计算对象所处的位置,并根据对象所处的位置在网页的预设区域内绘制出对象的图像。
步骤209:根据预设区域的长度和宽度,确定该对象在预设区域的顶部的初始位置,根据初始位置绘制该对象的图像;
具体地,根据确定的对象的数量和获取的预设区域的宽度,随机设定对象的横坐标的值,将该对象的纵坐标的值设为零,将设定的横坐标值和纵坐标值组成该对象在预设区域的顶部的初始位置。删除网页中的预设区域中的该对象的图像,根据对象在预设区域的顶部的初始位置在预设区域中绘制该对象的图像。
进一步地,确定该对象在预设区域的顶部的初始位置之后,还将获取的对象在第一周期的第一偏移角度加上预先设置的偏移角度增加量,以增加第一偏移角度,得到该对象在当前周期的第二偏移角度。
例如,假设获取的雪花的第二位置为(11,9),则第二位置的横坐标11大于预设区域的长度10,则判断出第二位置不在预设区域内。根据确定的雪花的数量10和获取的预设区域的长度10,随机设定雪花的横坐标的值,将该雪花的纵坐标的值设为零,假设设定的雪花的横坐标值为3,将设定的横坐标3和纵坐标值0组成该雪花在预设区域的顶部的初始位置(3,0)。删除网页中的预设区域中的该雪花的图像,根据雪花在预设区域的顶部的初始位置(3,0)在预设区域中绘制该雪花的图像。
进一步地,确定该对象在预设区域的顶部的初始位置之后,还将获取的对象在第一周期的第一偏移角度0加上预先设置的偏移角度增加量0.01,以增加第一偏移角度,得到该对象在当前周期的第二偏移角度0.01。
其中,根据对象的初始位置在网页的预设区域中绘制出该对象的图像之后,通过如下步骤210来更新对象的标识、位置和偏移角度的对应关系中的对象的位置和偏移角度。
步骤210:在对象的标识、位置与偏移角度的对应关系中将该对象的第一位置和第一偏移角度更新为该对象的初始位置和第二偏移角度。
具体地,从预设区域中获取对象的标识,根据获取的对象的标识,从对象的标识、位置和偏移角度的对应关系中获取该对象的第一位置和第一偏移角度,将获取的该对象的第一位置更新为该对象的初始位置,将获取的该对象的第一偏移角度更新为该对象的第二偏移角度。
例如,从预设区域中获取雪花的标识001,根据获取的雪花的标识001,从如表1所示的雪花的标识、位置和偏移角度的对应关系中获取该雪花的第一位置(1,0)和第一偏移角度0,将获取的该雪花的第一位置(1,0)更新为该雪花的初始位置(3,0),将获取的该雪花的第一偏移角度0更新为该雪花的第二偏移角度0.01,如表3所示。
表3
| 雪花的标识 | 位置 | 偏移角度 |
| 001 | (3,0) | 0.01 |
| …… | …… | …… |
其中,在下一个周期到来时,再跳回到步骤205来计算对象所处的位置,并根据对象所处的位置在网页的预设区域内绘制出对象的图像。
其中,在本发明实施例中,根据对象在第一周期的位置和偏移角度来确定对象在当前周期的位置,然后删除预设区域中的对象,根据对象在当前周期的位置重新绘制对象的图像,由此在预设区域中显示了对象从第一周期的位置运动到当前周期的位置的动画视频,周期性的计算对象在当前周期的位置并根据对象在当前周期的位置重新绘制对象的图像,在网页的预设区域内实现了播放动画。
在本发明实施例中,获取对象在第一周期的第一位置和第一偏移角度,第一周期在当前周期之前;根据第一位置和第一偏移角度,获取对象在当前周期的第二位置;如果第二位置在网页中的预设区域内,则根据第二位置在网页中的预设区域中绘制对象的图像。由于终端根据对象在第一周期的第一位置和第一偏移角度获取了对象在当前周期的第二位置,根据第二位置在网页中的预设区域中绘制对象的图像,如此周期性的在预设区域内绘制对象的图像,实现了在预设区域内播放动画,没有增加网页数据的容量,节省了终端获取网页数据所需要的流量,缩短了终端获取网页数据的时间。
实施例3
参见图3,本发明实施例提供了一种播放动画的装置,包括:
第一获取模块301,用于获取对象在第一周期的第一位置和第一偏移角度,第一周期在当前周期之前;
第二获取模块302,用于根据第一获取模块301获取的第一位置和第一偏移角度,获取对象在当前周期的第二位置;
第一绘制模块303,用于如果第二获取模块302获取的第二位置在网页中的预设区域内,则根据第二位置在网页中的预设区域中绘制对象的图像。
其中,第一获取模块301包括:
获取单元,用于根据对象的标识,从对象的标识、位置与偏移角度的对应关系中获取对应的位置和偏移角度;
确定单元,用于将获取单元获取的位置和偏移角度分别确定为对象在第一周期的第一位置和第一偏移角度。
进一步地,该装置还包括:
第一确定模块,用于在开始显示网页时,获取连续预设个数个周期,根据网页中的预设区域的长度和宽度,确定在获取的每个周期内向预设区域中增加对象的数量;
第二确定模块,用于在获取的周期到达时,根据在到达的周期内向预设区域中增加对象的数量和预设区域的宽度,确定增加的每个对象在预设区域中的初始位置、每个对象的大小和偏移角度的初值,为每个对象分配标识;
第二绘制模块,用于根据确定模块确定的每个对象的初始位置和大小,在预设区域中绘制每个对象的图像;
存储模块,用于将确定模块确定的每个对象的标识、初始位置和偏移角度的初值存储在对象的标识、位置与偏移角度的对应关系中。
其中,第二获取模块302包括:
增加单元,用于增加第一偏移角度,得到对象在当前周期的第二偏移角度;
第一计算单元,用于根据增加单元得到的第二偏移角度,计算对象的位置偏移量;
第二计算单元,用于根据第一位置和第一计算单元计算的对象的位置偏移量,计算对象在当前周期的第二位置;
其中,第一计算单元,用于根据第二偏移角度,通过如下所示的公式(1),计算对象的位置偏移量;
其中,在公式(1)中,m为对象的横坐标的位置偏移量,n为对象的纵坐标的位置偏移量,ρ为预设的对象的密度,r为对象的大小,angle为第二偏移角度。
进一步地,第二获取模块302,还用于在对象的标识、位置与偏移角度的对应关系中将对象的第一位置和第一偏移角度更新为对象的第二位置和第二偏移角度。
进一步地,该装置,还用于如果第二位置不在网页中的预设区域内,则根据预设区域的长度和宽度,确定对象在预设区域中的初始位置,根据初始位置在预设区域中绘制对象的图像。
进一步地,该装置还包括:
增加模块,用于增加第一偏移角度,得到对象在当前周期的第二偏移角度;
更新模块,用于在对象的标识、位置与偏移角度的对应关系中将对象的第一位置和第一偏移角度更新为对象的初始位置和第二偏移角度。
在本发明实施例中,获取对象在第一周期的第一位置和第一偏移角度,第一周期在当前周期之前;根据第一位置和第一偏移角度,获取对象在当前周期的第二位置;如果第二位置在网页中的预设区域内,则根据第二位置在网页中的预设区域中绘制对象的图像。由于终端根据对象在第一周期的第一位置和第一偏移角度获取了对象在当前周期的第二位置,根据第二位置在网页中的预设区域中绘制对象的图像,如此周期性的在预设区域内绘制对象的图像,实现了在预设区域内播放动画,没有增加网页数据的容量,节省了终端获取网页数据所需要的流量,缩短了终端获取网页数据的时间。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成,也可以通过程序来指令相关的硬件完成,所述的程序可以存储于一种计算机可读存储介质中,上述提到的存储介质可以是只读存储器,磁盘或光盘等。
以上所述仅为本发明的较佳实施例,并不用以限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
Claims (14)
1.一种播放动画的方法,其特征在于,所述方法包括:
从网页中的预设区域中获取对象的标识,根据获取的对象的标识,从存储的对象的标识、位置与偏移角度的对应关系中,获取对应的位置和偏移角度,将获取的位置和偏移角度确定为所述对象在第一周期的第一位置和第一偏移角度,所述第一周期在当前周期之前;
根据所述第一位置和第一偏移角度,获取所述对象在当前周期的第二位置;
如果所述第二位置在所述预设区域内,则根据所述第二位置在所述预设区域中绘制所述对象的图像;
所述获取对象在第一周期的第一位置和第一偏移角度之前,还包括:
在开始显示所述网页时,获取连续预设个数个周期,以及所述预设区域的长度和宽度;根据所述预设区域的长度和宽度,确定所述预设区域的面积,计算预设的对象密度和所述预设区域的面积的乘积,将计算的乘积确定为所述预设区域中充满对象时对象的总数量,根据计算出的总数量和获取的周期的个数,计算在获取的每个周期内向所述预设区域中增加对象的数量;
在获取的周期到达时,根据在所述到达的周期内向所述预设区域中增加对象的数量和所述预设区域的宽度,确定增加的每个对象在所述预设区域中的初始位置、所述每个对象的大小和偏移角度的初值,为所述每个对象分配标识;
根据所述每个对象的初始位置和大小,在所述预设区域中绘制所述每个对象的图像;将所述每个对象的标识、初始位置和偏移角度的初值存储在所述对应关系中。
2.如权利要求1所述的方法,其特征在于,所述获取对象在第一周期的第一位置和第一偏移角度,包括:
根据对象的标识,从对象的标识、位置与偏移角度的对应关系中获取对应的位置和偏移角度;
将所述获取的位置和偏移角度分别确定为所述对象在第一周期的第一位置和第一偏移角度。
3.如权利要求1所述的方法,其特征在于,所述根据所述第一位置和第一偏移角度,获取所述对象在当前周期的第二位置,包括:
增加所述第一偏移角度,得到所述对象在当前周期的第二偏移角度;
根据所述第二偏移角度,计算所述对象的位置偏移量;
根据所述第一位置和所述对象的位置偏移量,计算所述对象在当前周期的第二位置。
4.如权利要求3所述的方法,其特征在于,所述根据所述第二偏移角度,计算所述对象的位置偏移量,包括:
根据所述第二偏移角度,通过如下所示的公式(1),计算所述对象的位置偏移量,所述位置偏移量包括横坐标偏移量和纵坐标偏移量;
其中,在公式(1)中,m为横坐标偏移量,n为纵坐标偏移量,ρ为预设的对象的密度,r为所述对象的大小,angle为所述第二偏移角度。
5.如权利要求3所述的方法,其特征在于,所述根据所述第一位置和所述对象的位置偏移量,计算所述对象在当前周期的第二位置之后,还包括:
在对象的标识、位置与偏移角度的对应关系中将所述对象的第一位置和第一偏移角度更新为所述对象的第二位置和第二偏移角度。
6.如权利要求1-5任一项权利要求所述的方法,其特征在于,所述方法还包括:
如果所述第二位置不在网页中的预设区域内,则根据所述预设区域的长度和宽度,确定所述对象在所述预设区域中的初始位置,根据所述初始位置在所述预设区域中绘制所述对象的图像。
7.如权利要求6所述的方法,其特征在于,所述确定所述对象在所述预设区域的顶部的初始位置之后,还包括
增加所述第一偏移角度,得到所述对象在当前周期的第二偏移角度;
在对象的标识、位置与偏移角度的对应关系中将所述对象的第一位置和第一偏移角度更新为所述对象的初始位置和第二偏移角度。
8.一种播放动画的装置,其特征在于,所述装置包括:
第一获取模块,用于从网页中的预设区域中获取对象的标识,根据获取的对象的标识,从存储的对象的标识、位置与偏移角度的对应关系中,获取对应的位置和偏移角度,将获取的位置和偏移角度确定为所述对象在第一周期的第一位置和第一偏移角度,所述第一周期在当前周期之前;
第二获取模块,用于根据所述第一获取模块获取的所述第一位置和第一偏移角度,获取所述对象在当前周期的第二位置;
第一绘制模块,用于如果所述第二获取模块获取的所述第二位置在所述预设区域内,则根据所述第二位置在所述预设区域中绘制所述对象的图像;
所述装置还包括:
第一确定模块,用于在开始显示所述网页时,获取连续预设个数个周期,以及所述预设区域的长度和宽度,根据所述预设区域的长度和宽度,确定所述预设区域的面积,计算预设的对象密度和所述预设区域的面积的乘积,将计算的乘积确定为所述预设区域中充满对象时对象的总数量,根据计算出的总数量和获取的周期的个数,计算在获取的每个周期内向所述预设区域中增加对象的数量;
第二确定模块,用于在获取的周期到达时,根据在所述到达的周期内向所述预设区域中增加对象的数量和所述预设区域的宽度,确定增加的每个对象在所述预设区域中的初始位置、所述每个对象的大小和偏移角度的初值,为所述每个对象分配标识;
第二绘制模块,用于根据所述确定模块确定的所述每个对象的初始位置和大小,在所述预设区域中绘制所述每个对象的图像;
存储模块,用于将所述确定模块确定的所述每个对象的标识、初始位置和偏移角度的初值存储在所述对应关系中。
9.如权利要求8所述的装置,其特征在于,所述第一获取模块包括:
获取单元,用于根据对象的标识,从对象的标识、位置与偏移角度的对应关系中获取对应的位置和偏移角度;
确定单元,用于将所述获取单元获取的所述位置和偏移角度分别确定为所述对象在第一周期的第一位置和第一偏移角度。
10.如权利要求8所述的装置,其特征在于,所述第二获取模块包括:
增加单元,用于增加所述第一偏移角度,得到所述对象在当前周期的第二偏移角度;
第一计算单元,用于根据所述增加单元得到的所述第二偏移角度,计算所述对象的位置偏移量;
第二计算单元,用于根据所述第一位置和所述第一计算单元计算的所述对象的位置偏移量,计算所述对象在当前周期的第二位置。
11.如权利要求10所述的装置,其特征在于,所述第一计算单元,用于根据所述第二偏移角度,通过如下所示的公式(1),计算所述对象的位置偏移量;
其中,在公式(1)中,m为所述对象的横坐标的位置偏移量,n为所述对象的纵坐标的位置偏移量,ρ为预设的对象的密度,r为所述对象的大小,angle为所述第二偏移角度。
12.如权利要求10所述的装置,其特征在于,所述第二获取模块,还用于在对象的标识、位置与偏移角度的对应关系中将所述对象的第一位置和第一偏移角度更新为所述对象的第二位置和第二偏移角度。
13.如权利要求8-12任一项权利要求所述的装置,其特征在于,所述装置,还用于如果所述第二位置不在网页中的预设区域内,则根据所述预设区域的长度和宽度,确定所述对象在所述预设区域中的初始位置,根据所述初始位置在所述预设区域中绘制所述对象的图像。
14.如权利要求13所述的装置,其特征在于,所述装置还包括:
增加模块,用于增加所述第一偏移角度,得到所述对象在当前周期的第二偏移角度;
更新模块,用于在对象的标识、位置与偏移角度的对应关系中将所述对象的第一位置和第一偏移角度更新为所述对象的初始位置和第二偏移角度。
Priority Applications (5)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410065537.6A CN104866506B (zh) | 2014-02-25 | 2014-02-25 | 一种播放动画的方法及装置 |
| KR1020167017542A KR101847516B1 (ko) | 2014-02-25 | 2015-02-13 | 애니메이션 재생 방법 및 장치 |
| PCT/CN2015/073033 WO2015127871A1 (en) | 2014-02-25 | 2015-02-13 | Animation playback method and apparatus |
| JP2016544825A JP2017507403A (ja) | 2014-02-25 | 2015-02-13 | アニメーション再生の方法および装置 |
| US15/173,093 US9972118B2 (en) | 2014-02-25 | 2016-06-03 | Animation playback method and apparatus |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410065537.6A CN104866506B (zh) | 2014-02-25 | 2014-02-25 | 一种播放动画的方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104866506A CN104866506A (zh) | 2015-08-26 |
| CN104866506B true CN104866506B (zh) | 2019-07-09 |
Family
ID=53912341
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410065537.6A Active CN104866506B (zh) | 2014-02-25 | 2014-02-25 | 一种播放动画的方法及装置 |
Country Status (5)
| Country | Link |
|---|---|
| US (1) | US9972118B2 (zh) |
| JP (1) | JP2017507403A (zh) |
| KR (1) | KR101847516B1 (zh) |
| CN (1) | CN104866506B (zh) |
| WO (1) | WO2015127871A1 (zh) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101266693A (zh) * | 2008-03-31 | 2008-09-17 | 康佳集团股份有限公司 | 一种动态控制动画运行过程的方法 |
| CN101615298A (zh) * | 2009-08-12 | 2009-12-30 | 腾讯科技(深圳)有限公司 | 一种动画播放的方法和装置 |
| CN101901274A (zh) * | 2010-08-11 | 2010-12-01 | 深圳市茁壮网络股份有限公司 | 实现页面特效的方法及装置 |
| CN103473799A (zh) * | 2013-09-02 | 2013-12-25 | 腾讯科技(深圳)有限公司 | 一种图片的动态处理方法及装置、终端设备 |
Family Cites Families (22)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2001334065A (ja) * | 2000-03-21 | 2001-12-04 | Sony Computer Entertainment Inc | エンタテインメント装置、記憶媒体および天候決定方法 |
| JP4443716B2 (ja) * | 2000-03-29 | 2010-03-31 | 株式会社バンダイナムコゲームス | ゲーム装置、および、情報記憶媒体 |
| JP3706545B2 (ja) * | 2001-02-23 | 2005-10-12 | コナミ株式会社 | 画像の生成方法及びそれに用いるプログラム |
| JP3686920B2 (ja) * | 2002-05-21 | 2005-08-24 | コナミ株式会社 | 3次元画像処理プログラム、3次元画像処理方法及びビデオゲーム装置 |
| JP3665058B2 (ja) * | 2003-02-26 | 2005-06-29 | 三菱重工業株式会社 | シミュレータシナリオ製作支援プログラム及びシミュレータ装置 |
| US8125172B2 (en) * | 2004-05-06 | 2012-02-28 | Mechoshade Systems, Inc. | Automated shade control method and system |
| US8302016B2 (en) * | 2005-01-28 | 2012-10-30 | Kyocera Corporation | Display apparatus |
| JP3881363B1 (ja) | 2005-09-22 | 2007-02-14 | 株式会社コナミデジタルエンタテインメント | ゲーム装置、ゲーム装置の制御方法及びプログラム |
| US8122356B2 (en) * | 2007-10-03 | 2012-02-21 | Eastman Kodak Company | Method for image animation using image value rules |
| CN101320482B (zh) * | 2008-07-08 | 2011-09-07 | 浙江大学 | 基于视频纹理的虚拟跑步运动员的绘制方法 |
| JP5541487B2 (ja) * | 2009-11-27 | 2014-07-09 | ソニー株式会社 | 表示制御装置、及び、表示制御システム |
| US8789131B2 (en) * | 2010-05-14 | 2014-07-22 | Lg Electronics Inc. | Electronic device and method of sharing contents thereof with other devices |
| US9317598B2 (en) * | 2010-09-08 | 2016-04-19 | Nokia Technologies Oy | Method and apparatus for generating a compilation of media items |
| CN101980154B (zh) * | 2010-11-02 | 2014-01-08 | 深圳市融创天下科技股份有限公司 | 一种界面控件树的创建和绘制的方法、系统及移动终端 |
| US9451319B2 (en) * | 2010-12-17 | 2016-09-20 | Microsoft Technology Licensing, Llc | Streaming digital content with flexible remote playback |
| CN102346782A (zh) * | 2011-10-25 | 2012-02-08 | 中兴通讯股份有限公司 | 在用户终端浏览器上按需显示图片的方法及装置 |
| US9645978B2 (en) * | 2011-11-16 | 2017-05-09 | Microsoft Technology Licensing, Llc | Techniques for the automatic animation of changes to document content |
| US9035955B2 (en) * | 2012-05-16 | 2015-05-19 | Microsoft Technology Licensing, Llc | Synchronizing virtual actor's performances to a speaker's voice |
| CN102880290B (zh) * | 2012-08-24 | 2016-06-22 | 中兴通讯股份有限公司 | 一种显示控制方法、装置及终端 |
| US8752206B2 (en) * | 2012-09-12 | 2014-06-10 | The Directv Group, Inc. | Method and system for authorizing playback from multiple devices |
| KR102057937B1 (ko) * | 2012-12-06 | 2019-12-23 | 삼성전자주식회사 | 디스플레이 장치 및 그 이미지 표시 방법 |
| US9485459B2 (en) * | 2012-12-14 | 2016-11-01 | Biscotti Inc. | Virtual window |
-
2014
- 2014-02-25 CN CN201410065537.6A patent/CN104866506B/zh active Active
-
2015
- 2015-02-13 WO PCT/CN2015/073033 patent/WO2015127871A1/en not_active Ceased
- 2015-02-13 KR KR1020167017542A patent/KR101847516B1/ko active Active
- 2015-02-13 JP JP2016544825A patent/JP2017507403A/ja active Pending
-
2016
- 2016-06-03 US US15/173,093 patent/US9972118B2/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101266693A (zh) * | 2008-03-31 | 2008-09-17 | 康佳集团股份有限公司 | 一种动态控制动画运行过程的方法 |
| CN101615298A (zh) * | 2009-08-12 | 2009-12-30 | 腾讯科技(深圳)有限公司 | 一种动画播放的方法和装置 |
| CN101901274A (zh) * | 2010-08-11 | 2010-12-01 | 深圳市茁壮网络股份有限公司 | 实现页面特效的方法及装置 |
| CN103473799A (zh) * | 2013-09-02 | 2013-12-25 | 腾讯科技(深圳)有限公司 | 一种图片的动态处理方法及装置、终端设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| US20160300380A1 (en) | 2016-10-13 |
| WO2015127871A1 (en) | 2015-09-03 |
| US9972118B2 (en) | 2018-05-15 |
| KR20160092010A (ko) | 2016-08-03 |
| CN104866506A (zh) | 2015-08-26 |
| JP2017507403A (ja) | 2017-03-16 |
| KR101847516B1 (ko) | 2018-04-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109308469B (zh) | 用于生成信息的方法和装置 | |
| CN106296779B (zh) | 一种三维模型渲染显示方法及系统 | |
| TWI671647B (zh) | 計算頁面首屏描繪時長的方法、裝置及電子設備 | |
| CN104166553B (zh) | 一种显示方法及电子设备 | |
| CN109675309B (zh) | 一种游戏场景的构造方法和装置 | |
| CN104822088A (zh) | 视频图像缩放方法和装置 | |
| CN111462283B (zh) | 大量相同角色动画播放方法、介质、设备及装置 | |
| CN105389246B (zh) | 界面主题动态显示控制方法和系统 | |
| CN104063125B (zh) | 一种桌面图标管理方法和装置 | |
| CN106060665B (zh) | 电视内容推荐方法、装置及页面服务器 | |
| CN107479871A (zh) | 一种海量的矢量数据的访问和渲染方法、电子设备及存储介质 | |
| CN106017483B (zh) | 一种地图车辆图标的绘制方法、绘制系统及导航终端 | |
| CN104376050A (zh) | 一种在三维场景动态调度并显示海量矢量数据的方法 | |
| CN109933066A (zh) | 一种机器人移动轨迹回放的方法及设备 | |
| CN112214562A (zh) | 数据处理方法、装置、电子设备及机器可读存储介质 | |
| CN104866506B (zh) | 一种播放动画的方法及装置 | |
| CN105578268B (zh) | 图片显示方法及装置 | |
| CN101656037A (zh) | 在小屏幕设备上显示大幅面图片的方法、小屏幕设备 | |
| CN109388306A (zh) | 信息显示方法及装置 | |
| CN107656979A (zh) | 一种时序对象二维空间显示方法及系统 | |
| CN103870091B (zh) | 多窗口显示方法及其系统 | |
| CN104954718A (zh) | 一种移动智能终端及其录像方法 | |
| CN104504057B (zh) | 一种利用公共网络地图辅助土地调查的方法 | |
| CN109492853A (zh) | 模拟工程量计算方法、装置、存储介质及计算机设备 | |
| Davison | The ecology of Hordeum murinum LI Analysis of the distribution in Britain |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |