CN104866506B - A kind of method and device of playing animation - Google Patents
A kind of method and device of playing animation 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; 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR 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; CALCULATING OR 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; CALCULATING OR 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; CALCULATING OR 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; CALCULATING OR 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
The invention discloses a kind of method and devices of playing animation, belong to field of computer technology.The described method includes: obtaining first position and first deviation angle of the object in the period 1, the period 1 is before current period；According to first position and the first deviation angle, object is obtained in the second position of current period；If the second position is in the predeterminable area in webpage, according to the image of second position rendered object in the predeterminable area in webpage.Described device includes: the first acquisition module, the second acquisition module and the first drafting module.The present invention can save terminal and obtain flow required for web data, shorten the time that terminal obtains web data.
Description
Technical field
The present invention relates to field of computer technology, in particular to a kind of method and device of playing animation.
Background technique
In order to beautify webpage, programmer is provided with the animation file for beautifying webpage in web data, and terminal is aobvious
The animation file can be played in some region of webpage by showing when webpage, such as play what snowflake descended slowly and lightly in the top area of webpage
The animation etc. that animation or leaf are fallen.
Currently, animation file is made of a frame frame image, and these images are all that technical staff draws.For example, right
In the animation that snowflake descends slowly and lightly, when technical staff calculates each according to the motion modes such as uniform motion or simple nonlinear motion
Between put the location of snowflake；According to the location of each time point snowflake, the corresponding frame of each time point is drawn respectively
Image, the animation file that every frame image composition snowflake descends slowly and lightly in chronological order；Then the animation file is put into web data
In, terminal can play the animation that snowflake descends slowly and lightly when showing webpage in the top area of the webpage.
In the implementation of the present invention, the inventor finds that the existing technology has at least the following problems:
Animation file in web data includes multiple image, since image occupies biggish capacity, terminal is caused to obtain
The flow spent when web data increases, and extends the time that terminal obtains web data.
Summary of the invention
Flow required for web data is obtained in order to save terminal, shortens the time that terminal obtains web data, this hair
It is bright to provide a kind of method and device of playing animation.The technical solution is as follows:
A kind of method of playing animation, which comprises
Obtain first position and first deviation angle of the object in the period 1, the period 1 current period it
Before；
According to the first position and the first deviation angle, the object is obtained in the second position of current period；
If the second position is in the predeterminable area in webpage, according to the second position in the webpage
The image of the object is drawn in predeterminable area.
A kind of device of playing animation, described device include:
First obtains module, for obtaining first position and first deviation angle of the object in the period 1, described first
Period is before current period；
Second obtains module, for obtaining the first position and the first deviation angle that module obtains according to described first
Degree, obtains the object in the second position of current period；
First drafting module, if it is default in webpage to obtain the second position that module obtains for described second
In region, then the image of the object is drawn in the predeterminable area in the webpage according to the second position.
In embodiments of the present invention, first position and first deviation angle of the object in the period 1, period 1 are obtained
Before current period；According to first position and the first deviation angle, object is obtained in the second position of current period；If the
Two positions are in the predeterminable area in webpage, then in the predeterminable area according to the second position in webpage rendered object image.
Since terminal obtains object the second of current period in the first position of period 1 and the first deviation angle according to object
Position, according to the image of second position rendered object in the predeterminable area in webpage, so periodically in predeterminable area
The image of rendered object, realizes the playing animation in predeterminable area, does not increase the capacity of web data, saves terminal and obtains
Flow required for web data is taken, the time that terminal obtains web data is shortened.
Detailed description of the invention
Fig. 1 is a kind of method flow diagram for playing animation that the embodiment of the present invention 1 provides；
Fig. 2-1 is a kind of method flow diagram for playing animation that the embodiment of the present invention 2 provides；
Fig. 2-2 is the first schematic diagram of predeterminable area that the embodiment of the present invention 2 provides；
Fig. 2-3 is the second schematic diagram of predeterminable area that the embodiment of the present invention 2 provides；
Fig. 2-4 is the predeterminable area third schematic diagram that the embodiment of the present invention 2 provides；
Fig. 3 is a kind of apparatus structure schematic diagram for playing animation that the embodiment of the present invention 3 provides.
Specific embodiment
To make the object, technical solutions and advantages of the present invention clearer, below in conjunction with attached drawing to embodiment party of the present invention
Formula is described in further detail.
Embodiment 1
Referring to Fig. 1, the embodiment of the invention provides a kind of methods of playing animation, comprising:
Step 101: obtaining first position and first deviation angle of the object in the period 1, the period 1 is in current period
Before；
Step 102 obtains object in the second position of current period according to first position and the first deviation angle；
Step 103: default in webpage according to the second position if the second position is in the predeterminable area in webpage
The image of rendered object in region.
Preferably, first position and first deviation angle of the object in the period 1 are obtained, comprising:
According to the mark of object, corresponding position is obtained from the corresponding relationship of the mark of object, position and deviation angle
And deviation angle；
The position and deviation angle that will acquire are identified as first position and first deviation angle of the object in the period 1
Degree.
Further, object is obtained before the first position of period 1 and the first deviation angle, further includes:
When starting to show the webpage, the continuous predetermined number period is obtained, according to the predeterminable area in the webpage
Length and width, determine within each period of acquisition into the predeterminable area increase object quantity；
When reaching in the period of acquisition, according to the number for increasing object into the predeterminable area within the period of the arrival
The width of amount and the predeterminable area, determine initial position of the increased each object in predeterminable area, each object it is big
Small and deviation angle initial value is each object allocation identification；
Initial position and size according to each object, draw the image of each object in predeterminable area；
The initial value of the mark of each object, initial position and deviation angle is stored in mark, position and the offset of object
In the corresponding relationship of angle.
Preferably, according to first position and the first deviation angle, object is obtained in the second position of current period, comprising:
Increase by the first deviation angle, obtains object in the second deviation angle of current period；
According to the second deviation angle, the position offset of computing object；
According to the position offset of first position and object, computing object is in the second position of current period；
Preferably, according to the second deviation angle, the position offset of computing object, comprising:
According to the second deviation angle, pass through formula (1) as follows, the position offset of computing object, positional shift
Amount includes abscissa offset and ordinate offset；
Preferably, in formula (1), m is abscissa offset, and n is ordinate offset, and ρ is the close of preset object
Degree, r are the size of object, and angle is the second deviation angle.
Further, according to the position offset of first position and object, computing object is in the second position of current period
Later, further includes:
By the first position of object and the first deviation angle in the corresponding relationship of the mark of object, position and deviation angle
It is updated to the second position and the second deviation angle of object.
Further, this method further include:
If in predeterminable area of the second position not in webpage, according to the length and width of predeterminable area, determining pair
As the initial position in predeterminable area, according to the image of initial position rendered object in predeterminable area.
Further, it is determined that object further includes after the initial position at the top of predeterminable area
Increase by the first deviation angle, obtains object in the second deviation angle of current period；
By the first position of object and the first deviation angle in the corresponding relationship of the mark of object, position and deviation angle
It is updated to the initial position and the second deviation angle of object.
In embodiments of the present invention, first position and first deviation angle of the object in the period 1, period 1 are obtained
Before current period；According to first position and the first deviation angle, object is obtained in the second position of current period；If the
Two positions are in the predeterminable area in webpage, then in the predeterminable area according to the second position in webpage rendered object image.
Since terminal obtains object the second of current period in the first position of period 1 and the first deviation angle according to object
Position, according to the image of second position rendered object in the predeterminable area in webpage, so periodically in predeterminable area
The image of rendered object, realizes the playing animation in predeterminable area, does not increase the capacity of web data, saves terminal and obtains
Flow required for web data is taken, the time that terminal obtains web data is shortened.
Embodiment 2
The embodiment of the invention provides a kind of methods of playing animation.
In embodiments of the present invention, terminal is when showing webpage, and periodically computing object is locating in one cycle
Position draws out the image of object according to the location of object in the predeterminable area of webpage, to realize playing animation.
Referring to fig. 2-1, this method comprises:
Step 201: the continuous predetermined number period is obtained when starting and showing webpage, according to the predeterminable area in webpage
Length and width determines the quantity for increasing object into predeterminable area within each period of acquisition；
Wherein, the predeterminable area in webpage is the region for playing animation, can be in webpage for playing animation
Canvas element etc., position of the predeterminable area in webpage can on the top of webpage, bottom, the left side or the right etc., for example,
The predeterminable area as shown in Fig. 2-2 is at the top of webpage.Starting in the continuous predetermined number period after display webpage, every
Object is added into predeterminable area in a period, and predeterminable area is filled up.
This step can be, when starting to show webpage, obtain the length and width of the predeterminable area in webpage, according to obtaining
The length and width taken calculates the area of predeterminable area, according to the area of preset object densities and the predeterminable area of calculating, meter
The product for calculating the area of preset object densities and predeterminable area, when the product of calculating is determined as in predeterminable area full of object
The total quantity of object.Obtain the preset continuous predetermined number period.According to the total quantity of the object of calculating and acquisition
The number in period calculates the quantity of the object newly increased in each period.
For example, be illustrated for playing the animation that snowflake descends slowly and lightly in embodiments of the present invention, then the object in this example
For snowflake.Predeterminable area in the webpage as shown in Fig. 2-2, it is assumed that the length and width of predeterminable area is 10, preset snow
Flower density is 0.1.When showing webpage, the length 10 and width 10 of the predeterminable area in webpage are obtained, according to the length of acquisition
10 and width 10 to calculate the area of predeterminable area be 100, according to the face of preset snowflake density 0.1 and the predeterminable area calculated
Product 100, the product for calculating the area 100 of preset snowflake density 0.1 and predeterminable area is 10, and the product 10 of calculating is determined as
The total quantity of snowflake when being full of snowflake in predeterminable area.It has preset and has been full of in continuous predetermined number period predeterminable area
Snowflake, it is assumed that the number in preset period is 5, obtains preset continuous pre- 5 periods.According to the snowflake of calculating
The number 5 of total quantity 10 and the period obtained, the quantity for calculating the snowflake newly increased in each period is 2.
Step 202: when reaching in the period of acquisition, according to the number for increasing object into predeterminable area within the period of arrival
The width of amount and predeterminable area, determine initial position of the increased each object in predeterminable area, each object size and
The initial value of deviation angle is each object allocation identification；
Wherein, deviation angle is the angle between object displacement in one cycle and preset direction, for example, object exists
Position in a cycle changes to B point from A point, then displacement of the object within the period is displacement AB, it is assumed that preset direction is
Direction horizontally to the right, then object is the angle being displaced between AB and direction horizontally to the right in the deviation angle in the period.
This step specifically, acquisition period reach when, according within the period of arrival into predeterminable area increase pair
The width of the predeterminable area of the quantity and acquisition of elephant, sets the abscissa of increased each object at random, and by each object
Ordinate be set as zero, so obtain initial position of each object in predeterminable area.The size of each object is set, each
The size of object is all in default magnitude range.The initial value of the deviation angle of each object is set, for example, it is inclined to set each object
The initial value for moving angle can be 0 or 1 etc..For each object allocation identification.
Wherein, the size of each object of setting can be equal, can also be unequal.
For example, when reaching in the period of acquisition, it is assumed that when a cycle of acquisition reaches, according in a cycle
Increase the quantity 2 of snowflake and the width 10 of the predeterminable area obtained into predeterminable area, set the value of the abscissa of snowflake at random,
The value of the ordinate of snowflake is set as zero, it is assumed that the abscissa value of a piece of snowflake set is 1, then the initial position of the snowflake is sat
It is designated as (1,0), it is assumed that the abscissa value of another snowflake set is 5, then the initial position co-ordinates of the snowflake are (5,0).It is false
If having preset 3 different radiuses is respectively 0.2,0.4 and 0.6, one and half are selected from preset 3 radiuses
Diameter, it is assumed that the radius selected is 0.4, the radius by the radius 0.4 selected as increased 2 snowflakes.Set this 2 snowflakes
The initial value of deviation angle is 0.Be the snowflake allocation identification 001 of (1,0) for initial position co-ordinates, be initial position co-ordinates be (5,
0) snowflake allocation identification 002.
Wherein, the same with the period for each period of other acquisitions, aforesaid operations are executed to determine that each object exists
Initial position, the size of each object and the initial value of deviation angle in predeterminable area, and be each object allocation identification.
Wherein it is determined that initial position of each object in predeterminable area, the size of each object and deviation angle out
After initial value, the first of each object is drawn out in the operation for executing step 203 within the period of arrival into the predeterminable area of webpage
Beginning image.
Step 203: the size of the initial position in predeterminable area and each object according to each object, in the pre- of webpage
If drawing the image of each object in region；
For example, as Figure 2-3, according to the half of initial position (1,0) and the piece snowflake of the snowflake 001 in predeterminable area
The radius 0.4 of the initial position (5,0) and the piece snowflake of diameter 0.4 and snowflake 002 in predeterminable area, in the default of webpage
The image of this 2 snowflakes is drawn out in region.
Wherein, after the image for drawing out each object into the predeterminable area of webpage within the period of arrival, by such as
Lower step 204 stores the mark of each object, the initial value of initial position and deviation angle.
Step 204: the initial value of the mark of each object, initial position and deviation angle is stored in mark, the position of object
It sets in the corresponding relationship with deviation angle；
For example, the initial value of the mark of every snowflake, initial position and deviation angle is stored in snowflake as shown in Table 1
In the corresponding relationship of mark, position and deviation angle.
Table 1
| The mark of snowflake | Position | Deviation angle |
| 001 | (1,0) | 0 |
| 002 | (5,0) | 0 |
| …… | …… |
Further, if the size of each object is not identical, also need to store the mark and size of each object
Corresponding relationship.
Wherein, each period obtained for other is the same with the period, execute the operation of step 202-204 as above according to
Initial position of the increased each object in predeterminable area is in the predeterminable area when reaching in each period of acquisition to webpage
Draw out the image of increased each object.
Second round after showing webpage needs to repaint in predeterminable area when reaching a cycle
The image of each object be illustrated by taking an object as an example in the present embodiment, in predeterminable area for ease of description
Other each objects in addition to the object are the same with the object, and the operation for executing following steps 205-210 is each to repaint
The image of object.
Step 205: obtaining first position and first deviation angle of the object in the period 1, the period 1 is in current period
Before；
Wherein, the period 1 is before current period and adjacent with current period.
This step from predeterminable area specifically, obtain the mark of object, according to the mark of the object of acquisition, from having stored
The mark of object, position and deviation angle corresponding relationship in, obtain corresponding position and deviation angle, the position that will acquire
First position and first deviation angle of the object in the period 1 are identified as with deviation angle.
For example, obtain the mark 001 of snowflake from predeterminable area, according to the mark 001 of the snowflake of acquisition, from having stored such as
In the corresponding relationship of the mark of snowflake shown in table 1, position and deviation angle, corresponding position (1,0) and deviation angle are obtained
0, the position (1,0) that will acquire and deviation angle 0 are identified as the snowflake and deviate in the first position of period 1 and first
Angle.
Step 206: first position and the first deviation angle according to object in the period 1 obtain the object in current week
The second position of phase；
Specifically, a deviation angle incrementss are preset, such as deviation angle incrementss can be 0.01 or 0.02.
First deviation angle of the object that will acquire in the period 1 adds pre-set deviation angle incrementss, to increase by first partially
Angle is moved, obtains the object in the second deviation angle of current period；According to the second deviation angle, pass through formula as follows
(1), the position offset of the object is calculated；According to the position offset of first position and the object, pass through public affairs as follows
Formula (2) calculates the object in the second position of current period.
Wherein, in formula (1), m is the position offset of the abscissa of object, and n is that the position of the ordinate of object is inclined
Shifting amount, ρ are the density of preset object, and r is the size of object, and angle is second deviation angle of the object in current period.
Wherein, in formula (2), x is abscissa of the object in the second position of current period, and x ' was object at first week
The abscissa of the first position of phase, y are ordinate of the object in the second position of current period, and y ' is object in the period 1
The ordinate of first position.
For example, it is assumed that pre-set deviation angle incrementss are 0.01, preset snowflake density is 0.1, the half of snowflake
Diameter is 0.4.First deviation angle 0 of the snowflake that will acquire in the period 1 adds pre-set deviation angle incrementss
0.01, to increase by the first deviation angle, the snowflake is obtained in the second deviation angle 0.01 of current period；According to the second deviation angle
Degree 0.01, by formula (3) as follows, the position offset for calculating the abscissa of the snowflake is 0.02, ordinate
Position offset is 2.19；According to first position (1,0), the position of the position offset 0.02 of the abscissa of the snowflake and ordinate
Set offset 2.19, by formula (4) as follows, calculate the snowflake in the second position of current period be (1.02,
2.19).
Further, it if the size of each object is not identical, needs according to the mark of object from stored each
In the mark of object and the corresponding relationship of size, the size of object is obtained, then according to the size of object, object in the period 1
First position and the first deviation angle, obtain the object in the second position of current period.
Wherein, after the second position for obtaining the object, judge whether the abscissa of the second position and ordinate are distinguished
Less than the length and width of the predeterminable area of webpage, if it is, judging that the second position in the predeterminable area of webpage, executes
Step 207 draws the image of the object in the predeterminable area of webpage.If it is not, then judging the second position not in the pre- of webpage
If in region, executing step 209 to determine the object in the initial position at the top of predeterminable area, drawing according to initial position should
The image of object.
Step 207: drawing the figure of the object in the predeterminable area of webpage in the second position of current period according to object
Picture；
Specifically, delete webpage in predeterminable area in the object image, according to object in current period locating for
The image of the object is drawn in predeterminable area in the second position.
For example, the second position of the snowflake obtained is (1.02,2.19), the abscissa 1.02 of the second position is less than default
The length 10 and ordinate 2.19 in region judge that the second position in predeterminable area, is deleted again smaller than the width 10 of predeterminable area
Except the image of the snowflake in the predeterminable area in webpage, according to the snowflake locating for current period the second position (1.02,
2.19) image of the snowflake is drawn in predeterminable area, as in Figure 2-4.
Wherein, the image of the object is drawn out in the predeterminable area of webpage in the second position of current period according to object
Later, as follows the position of the object in the corresponding relationship of 208 mark, position and the deviation angles for carrying out upgating object and
Deviation angle.
Step 208: by the first position of object and first in the corresponding relationship of the mark of object, position and deviation angle
Deviation angle is updated to the second position and the second deviation angle of object；
Specifically, the mark that object is obtained from predeterminable area, according to the mark of the object of acquisition, from the mark of object,
First position and the first deviation angle of the object are obtained in the corresponding relationship of position and deviation angle, the object that will acquire
First position is updated to the second position of the object, and the first deviation angle of the object that will acquire is updated to the second of the object
Deviation angle.
For example, the mark 001 of snowflake is obtained from predeterminable area, according to the mark 001 of the snowflake of acquisition, 1 institute of Cong Rubiao
First position (1,0) and the first offset of the snowflake are obtained in the corresponding relationship of the mark of the snowflake shown, position and deviation angle
Angle 0, the first position (1,0) for the snowflake that will acquire are updated to the second position (1.02,2.19) of the snowflake, will acquire
First deviation angle 0 of the snowflake is updated to the second deviation angle 0.01 of the snowflake, as shown in table 2.
Table 2
| The mark of snowflake | Position | Deviation angle |
| 001 | (1.02,2.19) | 0.01 |
| …… | …… | …… |
Wherein, it when next cycle arrives, then jumps back to step 205 and carrys out the location of computing object, and according to right
As the image of object is drawn out in location in the predeterminable area of webpage.
Step 209: according to the length and width of predeterminable area, determining the object in the initial bit at the top of predeterminable area
It sets, the image of the object is drawn according to initial position；
Specifically, according to the width of the quantity of determining object and the predeterminable area of acquisition, the random horizontal seat for setting object
The value of the ordinate of the object is set as zero by target value, and the abscissa value of setting and ordinate value are formed the object default
The initial position at the top in region.The image for deleting the object in the predeterminable area in webpage, according to object in predeterminable area
The initial position at top the image of the object is drawn in predeterminable area.
Further, it is determined that the object that the object after the initial position at the top of predeterminable area, also will acquire is
It is right to obtain this to increase by the first deviation angle plus pre-set deviation angle incrementss for first deviation angle in one period
As the second deviation angle in current period.
For example, it is assumed that the second position of the snowflake obtained is (11,9), then the abscissa 11 of the second position is greater than preset areas
The length 10 in domain then judges the second position not in predeterminable area.According to the quantity 10 of determining snowflake and obtain default
The length 10 in region, the value of the random abscissa for setting snowflake, is set as zero for the value of the ordinate of the snowflake, it is assumed that the snow of setting
Colored abscissa value is 3, and the abscissa 3 of setting and ordinate value 0 are formed the snowflake in the initial bit at the top of predeterminable area
Set (3,0).Delete the image of the snowflake in the predeterminable area in webpage, the initial bit according to snowflake at the top of predeterminable area
Set the image that (3,0) draw the snowflake in predeterminable area.
Further, it is determined that the object that the object after the initial position at the top of predeterminable area, also will acquire is
First deviation angle 0 in one period is obtained plus pre-set deviation angle incrementss 0.01 with increasing by the first deviation angle
Second deviation angle 0.01 of the object in current period.
Wherein, after drawing out the image of the object in the predeterminable area of webpage according to the initial position of object, pass through
Following steps 210 carry out position and the deviation angle of the object in the corresponding relationship of the mark of upgating object, position and deviation angle.
Step 210: by the first position of the object and in the corresponding relationship of the mark of object, position and deviation angle
One deviation angle is updated to the initial position and the second deviation angle of the object.
Specifically, the mark that object is obtained from predeterminable area, according to the mark of the object of acquisition, from the mark of object,
First position and the first deviation angle of the object are obtained in the corresponding relationship of position and deviation angle, the object that will acquire
First position is updated to the initial position of the object, and the first deviation angle of the object that will acquire is updated to the second of the object
Deviation angle.
For example, the mark 001 of snowflake is obtained from predeterminable area, according to the mark 001 of the snowflake of acquisition, 1 institute of Cong Rubiao
First position (1,0) and the first offset of the snowflake are obtained in the corresponding relationship of the mark of the snowflake shown, position and deviation angle
The first position (1,0) of angle 0, the snowflake that will acquire is updated to the initial position (3,0) of the snowflake, the snowflake that will acquire
The first deviation angle 0 be updated to the second deviation angle 0.01 of the snowflake, as shown in table 3.
Table 3
| The mark of snowflake | Position | Deviation angle |
| 001 | (3,0) | 0.01 |
| …… | …… | …… |
Wherein, it when next cycle arrives, then jumps back to step 205 and carrys out the location of computing object, and according to right
As the image of object is drawn out in location in the predeterminable area of webpage.
Wherein, in embodiments of the present invention, determine that object exists in the position of period 1 and deviation angle according to object
Then the position of current period deletes the object in predeterminable area, repaints object in the position of current period according to object
Image, thus shown in predeterminable area object from the position of period 1 move to current period position animation view
Frequently, periodic computing object current period position and the figure of object is repainted in the position of current period according to object
Picture realizes playing animation in the predeterminable area of webpage.
In embodiments of the present invention, first position and first deviation angle of the object in the period 1, period 1 are obtained
Before current period；According to first position and the first deviation angle, object is obtained in the second position of current period；If the
Two positions are in the predeterminable area in webpage, then in the predeterminable area according to the second position in webpage rendered object image.
Since terminal obtains object the second of current period in the first position of period 1 and the first deviation angle according to object
Position, according to the image of second position rendered object in the predeterminable area in webpage, so periodically in predeterminable area
The image of rendered object, realizes the playing animation in predeterminable area, does not increase the capacity of web data, saves terminal and obtains
Flow required for web data is taken, the time that terminal obtains web data is shortened.
Embodiment 3
Referring to Fig. 3, the embodiment of the invention provides a kind of devices of playing animation, comprising:
First obtains module 301, for obtaining first position and first deviation angle of the object in the period 1, first week
Phase is before current period；
Second obtains module 302, for obtaining the first position and the first deviation angle that module 301 obtains according to first,
Object is obtained in the second position of current period；
First drafting module 303, if obtaining preset areas of the second position of the acquisition of module 302 in webpage for second
In domain, then in the predeterminable area according to the second position in webpage rendered object image.
Wherein, the first acquisition module 301 includes:
Acquiring unit is obtained from the corresponding relationship of the mark of object, position and deviation angle for the mark according to object
Take corresponding position and deviation angle；
Determination unit, position and deviation angle for will acquire unit acquisition are identified as object in the period 1
First position and the first deviation angle.
Further, the device further include:
First determining module, for the continuous predetermined number period being obtained, according in webpage when starting to show webpage
The length and width of predeterminable area determines the quantity for increasing object into predeterminable area within each period of acquisition；
Second determining module, for increasing into predeterminable area according within the period of arrival in the period arrival of acquisition
Add the quantity of object and the width of predeterminable area, determines initial position of the increased each object in predeterminable area, each right
The size of elephant and the initial value of deviation angle are each object allocation identification；
Second drafting module, the initial position and size of each object for being determined according to determining module, in preset areas
The image of each object is drawn in domain；
Memory module, the initial value of the mark of each object, initial position and deviation angle for determining determining module
It is stored in the corresponding relationship of the mark of object, position and deviation angle.
Wherein, the second acquisition module 302 includes:
Adding unit obtains object in the second deviation angle of current period for increasing by the first deviation angle；
First computing unit, the second deviation angle for being obtained according to adding unit, the position offset of computing object；
Second computing unit, for the position offset according to first position and the object of the first computing unit calculating, meter
Object is calculated in the second position of current period；
Wherein, the first computing unit, for passing through formula (1) as follows, computing object according to the second deviation angle
Position offset；
Wherein, in formula (1), m is the position offset of the abscissa of object, and n is that the position of the ordinate of object is inclined
Shifting amount, ρ are the density of preset object, and r is the size of object, and angle is the second deviation angle.
Further, second module 302 is obtained, is also used to the corresponding relationship of the mark in object, position and deviation angle
The middle second position and the second deviation angle that the first position of object and the first deviation angle are updated to object.
Further, device, if be also used in predeterminable area of the second position not in webpage, according to preset areas
The length and width in domain determines initial position of the object in predeterminable area, is drawn in predeterminable area according to initial position pair
The image of elephant.
Further, the device further include:
Increase module, for increasing by the first deviation angle, obtains object in the second deviation angle of current period；
Update module, in the corresponding relationship of the mark of object, position and deviation angle by the first position of object
The initial position and the second deviation angle of object are updated to the first deviation angle.
In embodiments of the present invention, first position and first deviation angle of the object in the period 1, period 1 are obtained
Before current period；According to first position and the first deviation angle, object is obtained in the second position of current period；If the
Two positions are in the predeterminable area in webpage, then in the predeterminable area according to the second position in webpage rendered object image.
Since terminal obtains object the second of current period in the first position of period 1 and the first deviation angle according to object
Position, according to the image of second position rendered object in the predeterminable area in webpage, so periodically in predeterminable area
The image of rendered object, realizes the playing animation in predeterminable area, does not increase the capacity of web data, saves terminal and obtains
Flow required for web data is taken, the time that terminal obtains web data is shortened.
Those of ordinary skill in the art will appreciate that realizing that all or part of the steps of above-described embodiment can pass through hardware
It completes, relevant hardware can also be instructed to complete by program, the program can store in a kind of computer-readable
In storage medium, storage medium mentioned above can be read-only memory, disk or CD etc..
The foregoing is merely presently preferred embodiments of the present invention, is not intended to limit the invention, it is all in spirit of the invention and
Within principle, any modification, equivalent replacement, improvement and so on be should all be included in the protection scope of the present invention.
Claims (14)
1. a kind of method of playing animation, which is characterized in that the described method includes:
The mark that object is obtained from the predeterminable area in webpage, according to the mark of the object of acquisition, from the mark of the object of storage
In the corresponding relationship of knowledge, position and deviation angle, corresponding position and deviation angle are obtained, the position that will acquire and deviation angle
It is determined as first position and first deviation angle of the object in the period 1, the period 1 is before current period；
According to the first position and the first deviation angle, the object is obtained in the second position of current period；
If institute is drawn in the predeterminable area, according to the second position in the second position in the predeterminable area
State the image of object；
The acquisition object is before the first position of period 1 and the first deviation angle, further includes:
When starting to show the webpage, the length and width of continuous predetermined number period and the predeterminable area is obtained；
According to the length and width of the predeterminable area, the area of the predeterminable area is determined, calculate preset object densities and described
The product of the area of predeterminable area, the total quantity of object when the product of calculating is determined as in the predeterminable area full of object,
According to the number of calculated total quantity and the period of acquisition, calculating increases within each period of acquisition into the predeterminable area
Add the quantity of object；
Acquisition period reach when, according within the period of the arrival into the predeterminable area increase object quantity and
The width of the predeterminable area determines initial position, each object of the increased each object in the predeterminable area
Size and deviation angle initial value, be each object allocation identification；
According to the initial position and size of each object, the image of each object is drawn in the predeterminable area；
The initial value of the mark of each object, initial position and deviation angle is stored in the corresponding relationship.
2. the method as described in claim 1, which is characterized in that the acquisition object is in the first position of period 1 and first
Deviation angle, comprising:
According to the mark of object, corresponding position and partially is obtained from the corresponding relationship of the mark of object, position and deviation angle
Move angle；
It is inclined in the first position of period 1 and first that the position of the acquisition and deviation angle are identified as the object
Move angle.
3. the method as described in claim 1, which is characterized in that it is described according to the first position and the first deviation angle, it obtains
Take the object in the second position of current period, comprising:
Increase by first deviation angle, obtains the object in the second deviation angle of current period；
According to second deviation angle, the position offset of the object is calculated；
According to the position offset of the first position and the object, the object is calculated in the second position of current period.
4. method as claimed in claim 3, which is characterized in that it is described according to second deviation angle, calculate the object
Position offset, comprising:
The position offset of the object is calculated by formula (1) as follows according to second deviation angle, it is described
Position offset includes abscissa offset and ordinate offset；
Wherein, in formula (1), m is abscissa offset, and n is ordinate offset, and ρ is the density of preset object, and r is
The size of the object, angle are second deviation angle.
5. method as claimed in claim 3, which is characterized in that the position according to the first position and the object is inclined
Shifting amount calculates the object after the second position of current period, further includes:
By the first position of the object and the first deviation angle in the corresponding relationship of the mark of object, position and deviation angle
It is updated to the second position and the second deviation angle of the object.
6. the method as described in any one of claim 1-5 claim, which is characterized in that the method also includes:
If in predeterminable area of the second position not in webpage, according to the length and width of the predeterminable area, really
Fixed initial position of the object in the predeterminable area, drawn in the predeterminable area according to the initial position described in
The image of object.
7. method as claimed in claim 6, which is characterized in that the determination object is at the top of the predeterminable area
After initial position, further include
Increase by first deviation angle, obtains the object in the second deviation angle of current period；
By the first position of the object and the first deviation angle in the corresponding relationship of the mark of object, position and deviation angle
It is updated to the initial position and the second deviation angle of the object.
8. a kind of device of playing animation, which is characterized in that described device includes:
First obtains module, for obtaining the mark of object from the predeterminable area in webpage, according to the mark of the object of acquisition,
From the corresponding relationship of the mark of the object of storage, position and deviation angle, corresponding position and deviation angle are obtained, will acquire
Position and deviation angle be determined as first position and first deviation angle of the object in the period 1, the period 1
Before current period；
Second obtains module, for obtaining the first position and the first deviation angle that module obtains according to described first, obtains
Take the object in the second position of current period；
First drafting module, if for it is described second obtain module obtain the second position in the predeterminable area,
The image of the object is then drawn in the predeterminable area according to the second position；
Described device further include:
First determining module, for when starting to show the webpage, obtaining continuous predetermined number period and described default
The length and width in region determines the area of the predeterminable area according to the length and width of the predeterminable area, calculates default
Object densities and the predeterminable area area product, the product of calculating is determined as in the predeterminable area full of object
When object total quantity, according to the number of calculated total quantity and the period of acquisition, calculate within each period of acquisition to
Increase the quantity of object in the predeterminable area；
Second determining module, for acquisition period arrival when, according within the period of the arrival to the predeterminable area
The width of the middle quantity for increasing object and the predeterminable area, determines that increased each object is initial in the predeterminable area
Position, the size of each object and deviation angle initial value, be each object allocation identification；
Second drafting module, the initial position and size of each object for being determined according to the determining module, in institute
State the image that each object is drawn in predeterminable area；
Memory module, the mark of each object, initial position and deviation angle for determining the determining module
Initial value is stored in the corresponding relationship.
9. device as claimed in claim 8, which is characterized in that described first, which obtains module, includes:
Acquiring unit, for the mark according to object, the acquisition pair from the corresponding relationship of the mark of object, position and deviation angle
The position answered and deviation angle；
Determination unit, the position and deviation angle for obtaining the acquiring unit are identified as the object
The first position in one period and the first deviation angle.
10. device as claimed in claim 8, which is characterized in that described second, which obtains module, includes:
Adding unit obtains the object in the second deviation angle of current period for increasing by first deviation angle；
First computing unit, second deviation angle for being obtained according to the adding unit, calculates the position of the object
Set offset；
Second computing unit, it is inclined for the position according to the first position and the object of first computing unit calculating
Shifting amount calculates the object in the second position of current period.
11. device as claimed in claim 10, which is characterized in that first computing unit, for inclined according to described second
It moves angle and the position offset of the object is calculated by formula (1) as follows；
Wherein, in formula (1), m is the position offset of the abscissa of the object, and n is the position of the ordinate of the object
Offset is set, ρ is the density of preset object, and r is the size of the object, and angle is second deviation angle.
12. device as claimed in claim 10, which is characterized in that it is described second obtain module, be also used to object mark,
The first position of the object and the first deviation angle are updated to the object in the corresponding relationship of position and deviation angle
The second position and the second deviation angle.
13. the device as described in any one of claim 8-12 claim, which is characterized in that described device, if be also used to
In predeterminable area of the second position not in webpage, then according to the length and width of the predeterminable area, it is described right to determine
As the initial position in the predeterminable area, the figure of the object is drawn in the predeterminable area according to the initial position
Picture.
14. device as claimed in claim 13, which is characterized in that described device further include:
Increase module and obtains the object in the second deviation angle of current period for increasing by first deviation angle；
Update module, in the corresponding relationship of the mark of object, position and deviation angle by the first position of the object
The initial position and the second deviation angle of the object are updated to the first deviation angle.
Priority Applications (5)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410065537.6A CN104866506B (en) | 2014-02-25 | 2014-02-25 | A kind of method and device of playing animation |
| JP2016544825A JP2017507403A (en) | 2014-02-25 | 2015-02-13 | Animation reproduction method and apparatus |
| PCT/CN2015/073033 WO2015127871A1 (en) | 2014-02-25 | 2015-02-13 | Animation playback method and apparatus |
| KR1020167017542A KR101847516B1 (en) | 2014-02-25 | 2015-02-13 | Animation playback method and apparatus |
| 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 (en) | 2014-02-25 | 2014-02-25 | A kind of method and device of playing animation |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104866506A CN104866506A (en) | 2015-08-26 |
| CN104866506B true CN104866506B (en) | 2019-07-09 |
Family
ID=53912341
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410065537.6A Active CN104866506B (en) | 2014-02-25 | 2014-02-25 | A kind of method and device of playing animation |
Country Status (5)
| Country | Link |
|---|---|
| US (1) | US9972118B2 (en) |
| JP (1) | JP2017507403A (en) |
| KR (1) | KR101847516B1 (en) |
| CN (1) | CN104866506B (en) |
| WO (1) | WO2015127871A1 (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101266693A (en) * | 2008-03-31 | 2008-09-17 | 康佳集团股份有限公司 | A method for dynamic control of animation operation process |
| CN101615298A (en) * | 2009-08-12 | 2009-12-30 | 腾讯科技（深圳）有限公司 | The method and apparatus that a kind of animation is play |
| CN101901274A (en) * | 2010-08-11 | 2010-12-01 | 深圳市茁壮网络股份有限公司 | Method and device for achieving special effects of webpage |
| CN103473799A (en) * | 2013-09-02 | 2013-12-25 | 腾讯科技（深圳）有限公司 | Picture dynamic processing method, device and terminal equipment |
Family Cites Families (22)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2001334065A (en) * | 2000-03-21 | 2001-12-04 | Sony Computer Entertainment Inc | Entertainment device, recording medium, and weather deciding method |
| JP4443716B2 (en) * | 2000-03-29 | 2010-03-31 | 株式会社バンダイナムコゲームス | GAME DEVICE AND INFORMATION STORAGE MEDIUM |
| JP3706545B2 (en) * | 2001-02-23 | 2005-10-12 | コナミ株式会社 | Image generation method and program used therefor |
| JP3686920B2 (en) | 2002-05-21 | 2005-08-24 | コナミ株式会社 | 3D image processing program, 3D image processing method, and video game apparatus |
| JP3665058B2 (en) * | 2003-02-26 | 2005-06-29 | 三菱重工業株式会社 | Simulator scenario production support program and simulator device |
| US8125172B2 (en) * | 2004-05-06 | 2012-02-28 | Mechoshade Systems, Inc. | Automated shade control method and system |
| EP1686454B1 (en) * | 2005-01-28 | 2018-12-26 | Kyocera Corporation | Display apparatus |
| JP3881363B1 (en) * | 2005-09-22 | 2007-02-14 | 株式会社コナミデジタルエンタテインメント | GAME DEVICE, GAME DEVICE CONTROL METHOD, AND PROGRAM |
| US8122356B2 (en) * | 2007-10-03 | 2012-02-21 | Eastman Kodak Company | Method for image animation using image value rules |
| CN101320482B (en) * | 2008-07-08 | 2011-09-07 | 浙江大学 | Drafting method for virtual running athlete based on video texture |
| JP5541487B2 (en) * | 2009-11-27 | 2014-07-09 | ソニー株式会社 | Display control apparatus and display control system |
| 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 (en) * | 2010-11-02 | 2014-01-08 | 深圳市融创天下科技股份有限公司 | Method and system for creating and drawing interface control tree and mobile terminal |
| US9451319B2 (en) * | 2010-12-17 | 2016-09-20 | Microsoft Technology Licensing, Llc | Streaming digital content with flexible remote playback |
| CN102346782A (en) * | 2011-10-25 | 2012-02-08 | 中兴通讯股份有限公司 | Method and device for displaying pictures on browser of user terminal as required |
| 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 (en) * | 2012-08-24 | 2016-06-22 | 中兴通讯股份有限公司 | A kind of display control method, device and terminal |
| US8752206B2 (en) * | 2012-09-12 | 2014-06-10 | The Directv Group, Inc. | Method and system for authorizing playback from multiple devices |
| KR102057937B1 (en) * | 2012-12-06 | 2019-12-23 | 삼성전자주식회사 | Display apparatus for displaying images and method thereof |
| US9485459B2 (en) * | 2012-12-14 | 2016-11-01 | Biscotti Inc. | Virtual window |
-
2014
- 2014-02-25 CN CN201410065537.6A patent/CN104866506B/en active Active
-
2015
- 2015-02-13 KR KR1020167017542A patent/KR101847516B1/en active IP Right Grant
- 2015-02-13 JP JP2016544825A patent/JP2017507403A/en active Pending
- 2015-02-13 WO PCT/CN2015/073033 patent/WO2015127871A1/en active Application Filing
-
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 (en) * | 2008-03-31 | 2008-09-17 | 康佳集团股份有限公司 | A method for dynamic control of animation operation process |
| CN101615298A (en) * | 2009-08-12 | 2009-12-30 | 腾讯科技（深圳）有限公司 | The method and apparatus that a kind of animation is play |
| CN101901274A (en) * | 2010-08-11 | 2010-12-01 | 深圳市茁壮网络股份有限公司 | Method and device for achieving special effects of webpage |
| CN103473799A (en) * | 2013-09-02 | 2013-12-25 | 腾讯科技（深圳）有限公司 | Picture dynamic processing method, device and terminal equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| KR101847516B1 (en) | 2018-04-10 |
| US9972118B2 (en) | 2018-05-15 |
| WO2015127871A1 (en) | 2015-09-03 |
| CN104866506A (en) | 2015-08-26 |
| US20160300380A1 (en) | 2016-10-13 |
| KR20160092010A (en) | 2016-08-03 |
| JP2017507403A (en) | 2017-03-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104822088B (en) | Video image zooming method and apparatus | |
| CN106296779B (en) | A kind of threedimensional model rendering indication method and system | |
| CN103679125B (en) | The method of face tracking | |
| CN105550199B (en) | A kind of point polymerization and device based on multi-source map | |
| CN104181365B (en) | A kind of measuring device with zooming display function | |
| CN106060665B (en) | Television content recommended method, device and page server | |
| CN105094622B (en) | Adjust the method and apparatus of form col width | |
| CN106227482A (en) | The control method of a kind of game picture refreshing and relevant device | |
| CN106017483B (en) | A kind of method for drafting, drawing system and the navigation terminal of map vehicle icon | |
| CN104376050A (en) | Method for dynamically scheduling and displaying massive vector data in three-dimensional scene | |
| CN104156242B (en) | A kind of data cached preloading, loading method and device | |
| CN103021259B (en) | The rendering intent of map movement and system | |
| CN101656037A (en) | Method for displaying large-format picture on small screen equipment and small screen equipment | |
| CN104866506B (en) | A kind of method and device of playing animation | |
| CN109388306A (en) | Information display method and device | |
| CN105205128B (en) | Sequential based on scoring feature recommends method and recommendation apparatus | |
| CN106484845A (en) | Information point area determination method based on electronic chart and device | |
| CN106023280A (en) | Data trend curve diagram drawing method | |
| CN110046210B (en) | Map information updating method and device, electronic equipment and storage medium | |
| JP2015103189A (en) | Magnetic material analyzer, magnetic material analysis program and magnetic material analysis method | |
| CN104122075A (en) | Method for directly measuring displayer motion blurs and based on moving square block width | |
| CN103426201A (en) | Mass model data browsing method based on three-dimensional digital city system | |
| CN112445989A (en) | WebGIS (Web geographic information System) -based map text label avoidance display method and device | |
| CN108289233B (en) | Display method, computer-readable storage medium, computer device, and display apparatus | |
| CN109325090A (en) | A kind of tile map display methods, system, terminal and storage medium |
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 |