CN101882321B - System and method for rendering animation user interface - Google Patents
System and method for rendering animation user interface Download PDFInfo
- Publication number
- CN101882321B CN101882321B CN200910050881A CN200910050881A CN101882321B CN 101882321 B CN101882321 B CN 101882321B CN 200910050881 A CN200910050881 A CN 200910050881A CN 200910050881 A CN200910050881 A CN 200910050881A CN 101882321 B CN101882321 B CN 101882321B
- Authority
- CN
- China
- Prior art keywords
- control
- layer
- attribute
- animation
- rendering
- 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.)
- Expired - Fee Related
Links
Images
Abstract
The invention relates to a method for rendering an animation user interface. The method comprises the following steps of: changing a target value of the attribute of an image layer corresponding to a control according to input information received by the control; changing the current value of the attribute of the image layer corresponding to the control according to the change of the target value of the attribute of the image layer corresponding to the control; and approaching the current value of the attribute of the image layer corresponding to the control to the target value of the attribute of the image layer corresponding to the control, thereby generating an animation. The invention also provides a system for rendering an animation user interface. The invention can simply and efficiently realize the rendering of the animation user interface.
Description
Technical field
The present invention relates to a kind of animation rendering system and method, particularly about a kind of rendering animation user interface system and method.
Background technology
Along with the development of embedded products such as mobile phone, personal digital assistant, Global Positioning System (GPS), the demand of user interface is improved constantly.User interface with dynamic visual effect has received user's extensive welcome.
In existing technology, the implementation procedure more complicated of animation user interface.Each animation needs programmer's explicitly to create and produce, and in explicit generation animation process, needs to be concerned about the detailed problems such as establishment, operation and management of animation.Therefore, the programmer possibly write a large amount of realization codes and come explicitly to create an animation, and the mode of this explicitly establishment animation can increase programmer's the duplication of labour, also can increase the probability that starts a leak in the animation creation process.
Summary of the invention
In view of above content, be necessary to provide the simple rendering animation user interface of a kind of implementation procedure system, rendering animation user interface efficient can be improved, and the rendering animation user interface mistake can be prevented.
In addition, also be necessary to provide a kind of implementation procedure simple rendering animation user interface method, can improve rendering animation user interface efficient, and can prevent the mistake of playing up of animation user interface.
A kind of rendering animation user interface system; This system comprises control, module is set, parsing module, drafting module, update module and synthesis module; Wherein: said pattern and the frame number that module is used to be provided with the animation that is associated with control be set; Said pattern is accused the variation pattern of the attribute of the corresponding figure layer of part, and said frame number refers to form the number of the frame of animation; Said control is used to receive input information, and the input information that receives is converted into the message that changes layer properties, and sends the message that changes layer properties, to change the corresponding desired value of scheming the attribute of layer of control; Said parsing module is used to receive and resolve the message of the change layer properties that control sends, to determine whether to repaint the corresponding figure of control layer; Said drafting module is used for when needs repaint the corresponding figure of control layer, repaints the corresponding figure layer of said control as required; Said update module is used for pattern and the frame number according to the animation that is associated with control that is provided with; Change the currency of the attribute of the corresponding figure layer of said control, the currency of the attribute of the corresponding figure layer of control is approached to the desired value of the attribute of the corresponding figure layer of control; And said synthesis module is used for the corresponding figure layer of the said control after changing is synthesized to the rendering result buffer zone and exports rendering result.
A kind of rendering animation user interface method, the method comprising the steps of: the pattern and the frame number of the animation be associated with control are set, and said pattern is accused the variation pattern of the corresponding figure of part layer attribute, said frame number refers to form the number of the frame of animation; Control receives input information, and the input information that receives is converted into the message of information and sending this changes layer properties that changes layer properties, to change the desired value of the corresponding attribute of scheming layer of control; Receive and resolve the message that changes layer properties,, repaint the corresponding figure layer of control as required as if repainting the corresponding figure layer of control; According to the pattern and the frame number of the animation that is associated with control that is provided with, the currency of the attribute of the corresponding figure layer of change control makes the currency of the attribute of the corresponding figure layer of control approach to the desired value of the attribute of the corresponding figure layer of control; The corresponding figure layer of control after changing is synthesized to the rendering result buffer zone and exports rendering result; The currency that reaches the attribute as if the corresponding figure of control layer is not equal to the desired value of the corresponding figure of control layer attribute, then returns the step of the currency of the attribute of changing the corresponding figure of control layer.
The present invention is converted into the user change of desired value of the attribute of the corresponding figure layer of control to the operation of control, thereby excites animation.The mode that the user need not adopt explicitly to create animation produces animation, needn't be concerned about the detailed problems such as establishment, operation and management of animation, thereby improve rendering animation user interface efficient, and avoid the mistake of playing up of animation user interface.
Description of drawings
Fig. 1 is the functional block diagram of rendering animation user interface of the present invention system.
Fig. 2 is the process flow diagram of rendering animation user interface method of the present invention.
Embodiment
Animation is made up of a plurality of frames, and a frame is exactly a static picture.Usually employing figure layer is made animation, on the figure layer, can draw any content of wanting.
Figure layer have the position, highly, attributes such as width, background colour and transparency.The position is exactly the coordinate of figure layer, comprises horizontal ordinate and ordinate.For example, with (x representes horizontal ordinate for x, the y) position of presentation graphs layer, and y representes ordinate.The size of height and width table diagrammatic sketch layer.The readability that potometer diagrammatic sketch layer content shows, the transparency through adjusting figure layer can realize various translucent effects.
Control is a kind of object in the user interface, comprises button, list box, text box etc.According to the present invention, after control receives input information, can produce the animation that is associated with control.The animation that is associated with control is produced by the corresponding figure layer of control.
Consulting shown in Figure 1ly, is the functional block diagram of rendering animation user interface of the present invention system.This system is applicable to embedded systems such as mobile phone, PDA(Personal Digital Assistant).
Said rendering animation user interface system 10 comprises control 100, module 101 is set, parsing module 102, drafting module 103, update module 104 and synthesis module 105.
Said pattern and the frame number that module 101 is used to be provided with the animation that is associated with control 100 be set.Said pattern is accused the attribute change modes of part 100 corresponding figure layers, for example linear change, accelerate and mode such as slack-off gradually gradually.Said frame number refers to form the number of the frame of animation, for example 14 frames.
Said control 100 is used to receive input information, and the input information that receives is converted into the message that changes layer properties, and sends the message that changes layer properties, to change the control 100 corresponding desired values of scheming the attribute of layer.Said input information possibly operated and produce this control 100 by the user, for example, thereby the user clicks a button this button is produced an input information.The input information that control 100 receives also possibly for example, send message by other control and give control 100 and produce because other reasons produces.After receiving input information, control 100 is converted into the message that changes layer properties with the input information that receives, and the message that will change layer properties sends to parsing module 102.For example; The user clicks a button; Suppose that this button is set to redness to the corresponding logic of button click incident for background colour; After then this button receives user's click, call SetBackColor (Red) and send the message (promptly changing the message of figure layer background colour attribute) that changes background colour, the desired value of background colour is become redness.
In the present embodiment, the function of change layer properties comprises CreateLayer, SetLayerContent, SetLayerPosition, SetLayerWidth, SetLayerOpacity, SetBackColor, RemoveLayerByIndex etc.Wherein, CreateLayer representes to set up new figure layer, and SetLayerContent representes to be provided with figure layer content, and SetLayerPosition representes to be provided with layer position; SetLayerWidth representes to be provided with figure layer width; SetLayerOpacity representes to be provided with layer opacity, and SetBackColor representes to be provided with background colour, and RemoveLayerByIndex representes to move the figure layer.
Said parsing module 102 is used to receive and resolve the message that changes layer properties, to determine whether repainting control 100 corresponding figure layers.Just can excite when generally speaking, having only a proxy function that redraws to bind mutually and redraw with the change of the desired value of certain attribute of control 100 corresponding figure layers.That is to say; If the disposal route of the change of the desired value of certain attribute of appointment control 100 corresponding figure layers is to redraw (need specify through proxy function usually); When then the desired value of this attribute of control 100 corresponding figure layers changes, just can repaint control 100 corresponding figure layers.
Said drafting module 103 is used for when needs repaint control 100 corresponding figure layers, repaints control 100 corresponding figure layers as required.Drafting module 103 can increase newly, delete or revise the content in the control 100 corresponding figure layers as required.For instance; Suppose that control 100 corresponding figure layers comprise the sun, trees and pond, then drafting module 103 can increase new content in this figure layer, as draws a house; Drafting module 103 can be deleted original content in this figure layer; As the pond is deleted, the content of 103 pairs of these figure layers of drafting module is made amendment, and for example the pond is changed to the river.
Said update module 104 is used for pattern and the frame number according to the animation that is provided with, the currency of the attribute of change control 100 corresponding figure layers.For instance, suppose that the pattern of animation is set to accelerate gradually, frame number is set to 14, and the currency of the position horizontal ordinate of control 100 corresponding figure layers is 0, and desired value is 105; Then the currency of the position horizontal ordinate of control 100 corresponding figure layers incrementally changes, and for example changes to 1,3,6,10 successively from 0; 15,21,28,36,45; 55,66,78,91,105.That is to say, change to 105 from 0 through 14 frame controls, 100 corresponding currencys of scheming the position horizontal ordinate of layer.
Said synthesis module 105 is used for the 100 corresponding figure layers of the control after changing are synthesized to the rendering result buffer zone and export rendering result.For example, rendering result is outputed to mobile phone screen.Need to prove that the changes that the corresponding figure layer of control 100 is taken place possibly only repaint, and perhaps only are Alternative Attributes, also possibly be not only to have repainted but also Alternative Attribute.
Consulting shown in Figure 2ly, is the process flow diagram of rendering animation user interface method of the present invention.This method is applicable to embedded systems such as mobile phone, PDA(Personal Digital Assistant).
Step S200 is provided with pattern and frame number that module 101 is provided with the animation that is associated with control 100.Said pattern is accused the attribute change modes of part 100 corresponding figure layers, for example linear change, accelerate and mode such as slack-off gradually gradually.Said frame number refers to form the number of the frame of animation, for example 14 frames.
Step S201, control 100 receives input information, and the input information that receives is converted into the message of change layer properties, and sends the message that changes layer properties, to change the desired value of control 100 corresponding figure layers attribute.Said input information possibly operated and produce this control 100 by the user, for example, thereby the user clicks a button this button is produced an input information.The input information that control 100 receives also possibly for example, send message by other control and give control 100 and produce because other reasons produces.After receiving input information, control 100 is converted into the message that changes layer properties with the input information that receives, and the message that will change layer properties sends to parsing module 102.For example; The user clicks a button; Suppose that this button is set to redness to the corresponding logic of button click incident for background colour; After then this button receives user's click, call SetBackColor (Red) and send the message (promptly changing the message of figure layer background colour attribute) that changes background colour, the desired value of background colour is become redness.
In the present embodiment, the function of change layer properties comprises CreateLayer, SetLayerContent, SetLayerPosition, SetLayerWidth, SetLayerOpacity, SetBackColor, RemoveLayerByIndex etc.Wherein, CreateLayer representes to set up new figure layer, and SetLayerContent representes to be provided with figure layer content, and SetLayerPosition representes to be provided with layer position; SetLayerWidth representes to be provided with figure layer width; SetLayerOpacity representes to be provided with layer opacity, and SetBackColor representes to be provided with background colour, and RemoveLayerByIndex representes to move the figure layer.
Step S202, parsing module 102 receives and resolves the message that changes layer properties, to determine whether repainting control 100 corresponding figure layers.Just can excite when generally speaking, having only a proxy function that redraws to bind mutually and redraw with the change of the desired value of certain attribute of control 100 corresponding figure layers.That is to say; If the disposal route of the change of the desired value of certain attribute of appointment control 100 corresponding figure layers is to redraw (need specify through proxy function usually); When then the desired value of this attribute of control 100 corresponding figure layers changes, just can repaint control 100 corresponding figure layers.If need not repaint control 100 corresponding figure layer, then execution in step S204.
Step S203, if need repaint control 100 corresponding figure layers, drafting module 103 repaints control 100 corresponding figure layers as required.Drafting module 103 can increase newly, delete or revise the content in the control 100 corresponding figure layers as required.For instance; Suppose that control 100 corresponding figure layers comprise the sun, trees and pond, then drafting module 103 can increase new content in this figure layer, as draws a house; Drafting module 103 can be deleted original content in this figure layer; As the pond is deleted, the content of 103 pairs of these figure layers of drafting module is made amendment, and for example the pond is changed to the river.
Step S204, update module 104 need to judge whether change control 100 corresponding currencys of scheming the attribute of layer according to the desired value of the attribute of control 100 corresponding figure layers.If the currency of the attribute of control 100 corresponding figure layers is not equal to the desired value of the attribute of control 100 corresponding figure layers, then need change the currency of the attribute of these control 100 corresponding figure layers.Otherwise,, then need not change the currency of the attribute of control 100 corresponding figure layers, process ends if the currency of the attribute of control 100 corresponding figure layers equals the desired value of the attribute of control 100 corresponding figure layers.
Step S205; If need the currency of the attribute of change control 100 corresponding figure layers; Update module 104 makes the currency of the attribute of control 100 corresponding figure layers approach to the desired value of the attribute of control 100 corresponding figure layers according to the currency of the attribute of pattern that is provided with and frame number change control 100 corresponding figure layers.For instance, suppose that the pattern of animation is set to accelerate gradually, frame number is set to 14, and the currency of the position horizontal ordinate of the attribute of control 100 corresponding figure layers is 0, and desired value is 105; Then the currency of the position horizontal ordinate of the attribute of control 100 corresponding figure layers incrementally changes, and for example changes to 1,3,6,10 successively from 0; 15,21,28,36,45; 55,66,78,91,105.That is to say, change to 105 from 0 through 14 frame controls, 100 corresponding currencys of scheming the position horizontal ordinate of layer.
Step S206, the control 100 corresponding figure layers after synthesis module 105 will change are synthesized to the rendering result buffer zone and export rendering result.For example, rendering result is outputed to mobile phone screen.Need to prove that the changes that the corresponding figure layer of control 100 is taken place possibly only repaint, and perhaps only are Alternative Attributes, also possibly be not only to have repainted but also Alternative Attribute.
Claims (6)
1. a rendering animation user interface system is characterized in that, this system comprises control, module is set, parsing module, drafting module, update module and synthesis module, wherein:
Said pattern and the frame number that module is used to be provided with the animation that is associated with control be set, said pattern is accused the variation pattern of the attribute of the corresponding figure layer of part, and said frame number refers to form the number of the frame of animation;
Said control is used to receive input information, and the input information that receives is converted into the message that changes layer properties, and sends the message that changes layer properties, to change the corresponding desired value of scheming the attribute of layer of control;
Said parsing module is used to receive and resolve the message of the change layer properties that control sends, to determine whether to repaint the corresponding figure of control layer;
Said drafting module is used for when needs repaint the corresponding figure of control layer, repaints the corresponding figure layer of said control as required;
Said update module is used for pattern and the frame number according to the animation that is associated with control that is provided with; Change the currency of the attribute of the corresponding figure layer of said control, the currency of the attribute of the corresponding figure layer of control is approached to the desired value of the attribute of the corresponding figure layer of control; And
Said synthesis module is used for the corresponding figure layer of the said control after changing is synthesized to the rendering result buffer zone and exports rendering result.
2. rendering animation user interface as claimed in claim 1 system is characterized in that, the pattern of the said animation that is associated with control comprises linear change, accelerates and slack-off gradually gradually.
3. rendering animation user interface as claimed in claim 1 system is characterized in that this system is applicable to embedded system.
4. rendering animation user interface method is characterized in that the method comprising the steps of:
The pattern and the frame number of the animation be associated with control are set, and said pattern is accused the variation pattern of the corresponding figure of part layer attribute, and said frame number refers to form the number of the frame of animation;
Control receives input information, and the input information that receives is converted into the message of information and sending this changes layer properties that changes layer properties, to change the desired value of the corresponding attribute of scheming layer of control;
Receive and resolve the message that changes layer properties,, repaint the corresponding figure layer of control as required as if repainting the corresponding figure layer of control;
According to the pattern and the frame number of the animation that is associated with control that is provided with, the currency of the attribute of the corresponding figure layer of change control makes the currency of the attribute of the corresponding figure layer of control approach to the desired value of the attribute of the corresponding figure layer of control;
The corresponding figure layer of control after changing is synthesized to the rendering result buffer zone and exports rendering result; And
The currency of the attribute as if the corresponding figure of control layer is not equal to the desired value of the attribute of the corresponding figure layer of control, then returns the step of the currency of the attribute of changing the corresponding figure of control layer.
5. rendering animation user interface method as claimed in claim 4 is characterized in that, the pattern of the said animation that is associated with control comprises linear change, accelerates and slack-off gradually gradually.
6. rendering animation user interface method as claimed in claim 4 is characterized in that this method is applicable to embedded system.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN200910050881A CN101882321B (en) | 2009-05-08 | 2009-05-08 | System and method for rendering animation user interface |
| HK11102972.5A HK1148855A1 (en) | 2009-05-08 | 2011-03-24 | An animation gui (graphics user interface) rendering system and method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN200910050881A CN101882321B (en) | 2009-05-08 | 2009-05-08 | System and method for rendering animation user interface |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN101882321A CN101882321A (en) | 2010-11-10 |
| CN101882321B true CN101882321B (en) | 2012-09-05 |
Family
ID=43054331
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN200910050881A Expired - Fee Related CN101882321B (en) | 2009-05-08 | 2009-05-08 | System and method for rendering animation user interface |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN101882321B (en) |
| HK (1) | HK1148855A1 (en) |
Families Citing this family (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102346916A (en) * | 2011-09-26 | 2012-02-08 | 深圳市万兴软件有限公司 | Image layer rendering method and device |
| US9196075B2 (en) | 2011-11-14 | 2015-11-24 | Microsoft Technology Licensing, Llc | Animation of computer-generated display components of user interfaces and content items |
| CN104750490B (en) * | 2012-03-28 | 2018-12-28 | 北京奇虎科技有限公司 | Interface animation realization method and system |
| CN102867323B (en) * | 2012-09-13 | 2015-11-25 | 深圳市茁壮网络股份有限公司 | A kind of disposal route, Apparatus and system of 3D texture |
| CN103544263B (en) * | 2013-10-16 | 2017-05-10 | 广东欧珀移动通信有限公司 | Rendering method and rendering device for mobile terminal |
| US10157593B2 (en) | 2014-02-24 | 2018-12-18 | Microsoft Technology Licensing, Llc | Cross-platform rendering engine |
| CN105427358B (en) * | 2015-12-23 | 2020-05-12 | 武汉斗鱼网络科技有限公司 | View animation generation method and system based on android |
| CN106204695B (en) * | 2016-06-23 | 2020-12-15 | 厦门黑镜科技有限公司 | Editing method and device of 3D animation |
| CN107943805B (en) * | 2016-10-12 | 2022-02-25 | 阿里巴巴集团控股有限公司 | Animation rendering and publishing method and device |
| CN106951055B (en) * | 2017-03-10 | 2019-07-12 | Oppo广东移动通信有限公司 | A kind of display control method of mobile terminal, device and mobile terminal |
| CN112929732B (en) * | 2019-12-06 | 2022-07-08 | 腾讯科技（深圳）有限公司 | Video processing method and device and computer storage medium |
| CN113986432A (en) * | 2021-10-27 | 2022-01-28 | 北京乐驾科技有限公司 | Vehicle-mounted terminal animation interface display method and device, storage medium and electronic device |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6714202B2 (en) * | 1999-12-02 | 2004-03-30 | Canon Kabushiki Kaisha | Method for encoding animation in an image file |
| CN1866264A (en) * | 2005-05-21 | 2006-11-22 | 华为技术有限公司 | Scene generating method and system for mobile game |
| CN101216762A (en) * | 2007-12-29 | 2008-07-09 | 腾讯科技（深圳）有限公司 | Interface library architecture |
-
2009
- 2009-05-08 CN CN200910050881A patent/CN101882321B/en not_active Expired - Fee Related
-
2011
- 2011-03-24 HK HK11102972.5A patent/HK1148855A1/en not_active IP Right Cessation
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6714202B2 (en) * | 1999-12-02 | 2004-03-30 | Canon Kabushiki Kaisha | Method for encoding animation in an image file |
| CN1866264A (en) * | 2005-05-21 | 2006-11-22 | 华为技术有限公司 | Scene generating method and system for mobile game |
| CN101216762A (en) * | 2007-12-29 | 2008-07-09 | 腾讯科技（深圳）有限公司 | Interface library architecture |
Also Published As
| Publication number | Publication date |
|---|---|
| CN101882321A (en) | 2010-11-10 |
| HK1148855A1 (en) | 2011-09-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN101882321B (en) | System and method for rendering animation user interface | |
| CN103019684B (en) | A kind of method of the configuration service page based on dynamic template | |
| CN103383645B (en) | Code generating method and system | |
| US9196075B2 (en) | Animation of computer-generated display components of user interfaces and content items | |
| US9483240B1 (en) | Data binding dependency analysis | |
| US20090313004A1 (en) | Platform-Independent Application Development Framework | |
| CN103577042A (en) | Method and device for providing a message function | |
| CN106062705A (en) | Cross-platform rendering engine | |
| CN103970737A (en) | Data constitution method and device | |
| US20200312299A1 (en) | Method and system for semantic intelligent task learning and adaptive execution | |
| KR20080021081A (en) | Fine-grained control of z-order elements in a xml presentation | |
| CN103853543A (en) | Method used for quickly constructing forms in enterprise information system development process | |
| CN104317576A (en) | Code automatic generation method and system based on eclipse | |
| CN105404512B (en) | A kind of application window interface change method and device | |
| KR20120093218A (en) | System and methods for a run time configurable user interface controller | |
| CN103412748A (en) | Display control method, device and system for user interface of embedded platform | |
| CN105354072A (en) | Code generation method based on Eclipse platform | |
| CN105224337A (en) | A kind of desktop starter dynamically adds floating window method | |
| CN101699396A (en) | Method for generating wireless terminal menu and device thereof | |
| CN104239067A (en) | Making method and device of miniature client end | |
| CN103513977A (en) | Display method and device for group member list | |
| CN102541544B (en) | The processing method of Tree control, Apparatus and system | |
| CN105573973A (en) | Method for performing data correlation on EXCEL data in PPT file | |
| CN106157353A (en) | A kind of word rendering intent and word rendering device | |
| CN102591580B (en) | View object refreshing method and view object refreshing system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 1148855 Country of ref document: HK |
|
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: GR Ref document number: 1148855 Country of ref document: HK |
|
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20120905 Termination date: 20180508 |
|
| CF01 | Termination of patent right due to non-payment of annual fee |