Detailed Description
Various aspects of the invention are described below. It should be appreciated that the teachings herein may be embodied in a wide variety of forms and that any specific structure, function, or both being disclosed herein is merely representative. Based on the teachings herein one skilled in the art should appreciate that an aspect disclosed herein may be implemented independently of any other aspects and that two or more of these aspects may be combined in various ways. For example, an apparatus may be implemented or a method may be practiced using any number of the aspects set forth herein. In addition, such an apparatus may be implemented or such a method may be practiced using other structure, functionality, or structure and functionality in addition to or other than one or more of the aspects set forth herein. Furthermore, any aspect described herein may include at least one element of a claim.
Before describing the various embodiments of the present invention, it is stated that the present invention is applicable to intelligent terminals. The smart terminal herein refers to a terminal device (hereinafter, referred to as a terminal device) having wireless communication capability and computing processing capability, and includes, but is not limited to, a notebook computer, a tablet computer, a smart phone, a Personal Data Assistant (PDA), and the like.
Various embodiments of the present invention will be described below with reference to the accompanying drawings.
Referring to fig. 1, fig. 1 is a flowchart of a UI control water curtain display method of the present invention, as shown in fig. 1, the method includes:
and S101, controlling the UI control view to be invalid.
When the user uses the intelligent terminal, the intelligent terminal is triggered to display the UI control in a mode of pressing a start key or a home key. The intelligent terminal responds to the UI control display operation triggered by the user, controls the UI control view to be invalid firstly, namely forces the UI control to be in an invisible state at first. The types of UI controls on the intelligent terminal are various, such as text controls, button controls, state switch controls, picture controls, clock controls, date and time selection controls and the like.
Step S101 can obtain the canvas of the UI control by calling a drawing function, and draw a black mask on the canvas area, so that the UI control is in an invisible state. Therefore, the UI control is forced to be in an invisible state, and then the drawing function is called circularly through the following steps to achieve the water curtain effect.
To more vividly describe the implementation process of the present invention, please refer to the schematic diagram of the UI control water curtain display process shown in fig. 2, where fig. 2 only takes the picture control as an example, the left side of fig. 2 shows the picture control to be displayed, the right side of fig. 2 shows the UI control display process structure diagram, Top refers to the Top of the UI control, Bottom refers to the Bottom of the UI control, the whole UI control is gradually displayed from Top to Bottom, and the total drawing time Duration is 1000 ms. Assuming that the UI refresh frame rate of the smart terminal is 60 frames per second, the drawing function is called to draw every 1/60 seconds through the following steps. Of course, the above values are only exemplary, and in a specific implementation, the refresh frame rate and the total rendering time may be determined according to an actual scene.
Taking a picture control as an example, in step S101, the picture control may be taken as a canvas by first obtaining the canvas of the picture control; a black mask is then drawn over the canvas area, which leaves the picture control initially in an invisible state. Step S101 may also force the UI control view to fail by calling an invalid function.
S102, updating the drawing matrix according to the refresh frame rate; and updating the brush transparency value according to the refreshing frame rate.
After the UI control is forced to be invisible initially, a callback drawing function ondraw (Canvas) method is required to draw the UI control, and Canvas drawing involves two parameters, namely a drawing matrix parameter and a brush, so that the drawing matrix parameter and the brush attribute value are the most important parameters of the drawing function and are parameters which change along with the drawing cycle.
When drawing is executed, firstly calling a StartInimation function to record the starting time TimeStart of the animation, and calling OnDraw (canvas) function to redraw, wherein the OnDraw (canvas) function needs to circularly call drawing matrix parameters and a brush transparency value, and the drawing matrix parameters can be circularly updated according to the following modes:
and updating the drawing matrix by calling a drawing matrix updating function according to the refresh frame rate.
Still further, the method may include the steps of:
according to the refresh frame rate, acquiring the height and width of the UI control by calling a UI control function; updating a drawing matrix by calling a matrix class setting function, wherein the drawing matrix comprises a left end value, a top end value, a right end value and a bottom end value; and when the drawing time ratio is less than 1, setting the top value to be equal to the product of the drawing time ratio and the height, wherein the drawing time ratio is equal to the ratio of the drawing executed time to the total drawing time.
Here, the matrix update function is drawn as an UpdateRect function, and the implementation principle of the UpdateRect function is as follows:
firstly, recording the current system time TimeNew, and drawing an executed time TimePassed which is TimeNew-TimeStart; then, dividing the drawing total time Duration by the TimePassed is equal to the drawing time ratio TimeRate, i.e., TimeRate ═ TimePassed/Duration; and finally, circularly updating the drawing matrix in a mode of circularly acquiring the TimeRate. In the process of cyclic updating, whether the TimeRate is smaller than 1 needs to be judged, if so, the TimeRate is used for updating, and if not, the TimeRate is not smaller than 1, the drawing matrix is indicated to be located in an invisible area of the canvas, the drawing is ended at the moment, and the water curtain scene entering animation of the UI control is ended.
In addition, the inventor also considers that the water curtain effect of the UI control is more gorgeous and the dynamic effect of the UI control is better when the drawing speed is gradually changed. Based on this, the inventor proposes a preferable scheme, that is, when obtaining the TimeRate, the TimeRate is interpolated, and an interpolation time ratio interpolated TimeRate can be obtained by calling an interpolation function interpolar. The latter processing is performed on the basis of the interpolation time ratio.
Secondly, when the drawing time ratio is obtained through calculation, the drawing matrix is updated by calling a matrix class setting function, wherein the matrix class setting function Rect.set (int left, int top, int right, int bottom) updates the drawing matrix, and the current drawing matrix RectCurrent.set (0, TimeRate, width, height) is obtained through updating. If the interpolation time ratio is obtained through calculation, updating to obtain a current rendering matrix RectCurrent.set (0, interpolated TimeRate, width, height), wherein height and width are the height and width of the picture control obtained by calling the picture control function.
In addition, the brush transparency value needs to be updated once when the rendering matrix is updated once, and the brush transparency value can be updated circularly in the following modes:
the updating of the brush transparency value is realized by calling a brush transparency value updating function, and the updating principle comprises the following steps:
according to the refresh frame rate, updating the transparency value of the painting brush in a preset transparency value range in a mode that the transparency value is gradually reduced from the maximum value to a preset step length; or,
and updating the transparency value of the brush according to the refresh frame rate and a mode of gradually increasing the preset step length from the minimum value of the transparency value in the preset transparency value range.
The brush pen transparency value function is paint. Presetting a value range (alphaMin, alphaMax) and a step length of a transparency value aplha, wherein the alphaMin is a minimum value of the transparency value, the alphaMax is a maximum value of the transparency value, the aplha decreases one step length each time from the maximum value, or increases one step length each time from the minimum value, so that the transparency value of the painting brush is changed and updated between the alphaMax and the alphaMin by a fixed step length, and the gradual change of the transparency value enables the drawn UI control to show a water curtain atomization effect.
Finally, the mobile drawing of the UI control is realized through S103.
And S103, realizing mobile drawing of the UI control by circularly calling the drawing matrix and the brush pen transparency value through a drawing function.
The drawing function OnDraw (canvas) here uses
The method is realized by a Bitmap (Rect src, Rect dst, Paint point) picture drawing function, and the specific calling drawing function of the invention is as follows:
draw bitmap (bitmap, null, recitcurrent, paint), where bitmap represents a UI control, null represents null, recitcurrent represents an updated current drawing matrix, and paint represents an updated brush, in this embodiment, only a transparency value of the brush is updated, and moving drawing of the UI control is realized by calling the drawing function, which may be understood with reference to fig. 2 as moving drawing of a black mask in a view visible area of coordinates top and bottom.
And circularly calling a drawing function according to the refresh frame rate, wherein the drawing function is realized by specifically calling a picture drawing function of the canvas, and the drawing matrix and the brush transparency value in the picture drawing function are updated along with the refresh frame rate, so that the drawing function gradually draws the UI control according to the refresh frame rate, and the UI control presents a water curtain effect when entering. The specific display effect can be seen in the schematic diagram shown in fig. 3.
According to the embodiment, the terminal adopts the drawing mechanism, the required parameters are provided for the drawing function according to the mode of updating the drawing matrix and the brush pen transparency value by the refresh frame rate, the UI control is displayed from top to bottom and along with the view transparency gradient mode, the water curtain animation effect of the UI control entering the field is skillfully realized on the terminal, the requirement that a user enjoys the water curtain animation on the terminal is met, and the user experience is improved.
Corresponding to the method, the invention provides a water curtain display device of a UI control. The following explains the apparatus provided by the present invention.
Referring to fig. 4, fig. 4 is a structural diagram of a UI control water curtain display device of the present invention, as shown in fig. 4, the device includes:
a failure control unit 401, configured to control a UI control view to fail;
a rendering matrix updating unit 402 configured to update the rendering matrix according to the refresh frame rate;
a transparency value updating unit 403, configured to update a brush transparency value according to the refresh frame rate;
and the drawing unit 404 is configured to implement mobile drawing of the UI control by circularly calling the drawing matrix and the brush transparency value through a drawing function.
Preferably, the rendering matrix updating unit is specifically configured to update the rendering matrix by calling a rendering matrix updating function.
Preferably, the rendering matrix updating unit includes:
the obtaining subunit is used for obtaining the height and the width of the UI control by calling a UI control function according to the refreshing frame rate;
the updating subunit is used for updating a drawing matrix in a mode of calling a matrix class setting function, wherein the drawing matrix comprises a left end value, a top end value, a right end value and a bottom end value; and when the drawing time ratio is less than 1, setting the top value to be equal to the product of the drawing time ratio and the height, wherein the drawing time ratio is equal to the ratio of the drawing executed time to the total drawing time.
Preferably, the updating subunit is further configured to:
and carrying out interpolation operation on the drawing time ratio to obtain an interpolation time ratio, and setting a top value equal to the product of the interpolation time ratio and the height.
Preferably, the transparency value updating unit is specifically configured to update the brush transparency value in a manner that the transparency value is gradually decreased from a maximum value to a preset step length within a preset transparency value range according to the refresh frame rate; or,
the transparency value updating unit is specifically configured to update the brush transparency value in a preset transparency value range according to the refresh frame rate and in a manner that the transparency value is gradually increased by a preset step length from a minimum value.
Preferably, the failure control unit is specifically configured to obtain a canvas of the UI control by calling a rendering function, and render a black mask on the canvas area, so that the UI control is in an invisible state.
The device can be applied to the intelligent terminal, so that when the intelligent terminal displays the UI control, the water curtain display of the UI control is realized in a mode of updating the drawing matrix and the brush pen transparency value according to the refresh frame rate in a mode of function calling, the requirement that a user enjoys water curtain animation on the terminal is met, and the user experience is improved.
Furthermore, the method according to the present invention may also be implemented as a computer program executed by a processor (such as a CPU) in the smart terminal and stored in a memory of the smart terminal. When the computer program is executed by a processor, the processor performs the above-mentioned functions defined in the method of the present invention. For example, a mobile terminal according to the invention may be implemented as one or more processors, and a memory connected to the one or more processors, the memory having stored therein a computer program with instructions that may cause the processors to perform the various steps defined in the method of the invention.
Further, it should be appreciated that the computer-readable storage devices (e.g., memories) described herein can be either volatile memory or nonvolatile memory, or can include both volatile and nonvolatile memory. By way of example, and not limitation, nonvolatile memory can include Read Only Memory (ROM), Programmable ROM (PROM), Electrically Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM), which can act as external cache memory. By way of example and not limitation, RAM is available in a variety of forms such as synchronous RAM (DRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDRSDRAM), Enhanced SDRAM (ESDRAM), Synchronous Link DRAM (SLDRAM), and Direct Rambus RAM (DRRAM). The storage devices of the disclosed aspects are intended to comprise, without being limited to, these and other suitable types of memory.
Furthermore, the method according to the invention may also be implemented as a computer program product comprising a computer readable medium having stored thereon a computer program for performing the above-mentioned functions defined in the method of the invention.
Further, the above method steps and units may also be implemented with a controller and a computer readable storage device for storing a computer program for causing the controller to implement the functions of the above steps or units.
Those of skill would further appreciate that the various illustrative logical blocks, modules, circuits, and algorithm steps described in connection with the disclosure herein may be implemented as electronic hardware, computer software, or combinations of both. To clearly illustrate this interchangeability of hardware and software, various illustrative components, blocks, modules, circuits, and steps have been described above generally in terms of their functionality. Whether such functionality is implemented as software or hardware depends upon the particular application and design constraints imposed on the overall system. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present invention.
While the foregoing disclosure shows illustrative embodiments of the invention, it should be noted that various changes and modifications could be made herein without departing from the scope of the invention as defined by the appended claims. The functions, steps and/or actions of the method claims in accordance with the inventive embodiments described herein need not be performed in any particular order. Furthermore, although elements of the invention may be described or claimed in the singular, the plural is contemplated unless limitation to the singular is explicitly stated.
Although the embodiments according to the present invention have been described above with reference to the drawings, it will be understood by those skilled in the art that various modifications may be made to the embodiments of the present invention as set forth above without departing from the spirit of the present invention. Therefore, the scope of the present invention should be determined by the contents of the appended claims.