WO2017215564A1 - 显示视图控件动态效果的方法及装置 - Google Patents

显示视图控件动态效果的方法及装置 Download PDF

Info

Publication number
WO2017215564A1
WO2017215564A1 PCT/CN2017/087926 CN2017087926W WO2017215564A1 WO 2017215564 A1 WO2017215564 A1 WO 2017215564A1 CN 2017087926 W CN2017087926 W CN 2017087926W WO 2017215564 A1 WO2017215564 A1 WO 2017215564A1
Authority
WO
WIPO (PCT)
Prior art keywords
rotation angle
displacement
view control
displacement length
image window
Prior art date
Application number
PCT/CN2017/087926
Other languages
English (en)
French (fr)
Inventor
黄金东
王兴光
Original Assignee
广州神马移动信息科技有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 广州神马移动信息科技有限公司 filed Critical 广州神马移动信息科技有限公司
Publication of WO2017215564A1 publication Critical patent/WO2017215564A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser

Definitions

  • the present invention relates to the field of Internet technologies, and in particular, to a method and apparatus for displaying a dynamic effect of a view control.
  • Image windows are often embedded in browser pages to display static or dynamic view controls (Image View).
  • image View static or dynamic view controls
  • some of the system's native or third-party developed applications will also embed such image windows, more commonly including the desktop background of the operating system, or the window showing the cloudy and rainy icons in the weather application.
  • the dynamic effect of the view control is often preset by the program, such as the raindrop falling from the top to the bottom, or the information label is cyclically displaced according to a predetermined trajectory.
  • This dynamic effect style is dull and cannot respond to user actions without interactive performance.
  • An object of the present invention is to provide a method and apparatus for displaying a dynamic effect of a view control, which can solve the problem that the image window lacks an interactive function.
  • the present invention provides a method for displaying a dynamic effect of a view control, comprising:
  • the present invention also provides an apparatus for displaying a dynamic effect of a view control, comprising:
  • a detecting unit configured to detect a rotation angle of the terminal relative to the preset coordinate axis on the terminal body
  • a determining unit configured to determine a displacement direction and a displacement length of the view control in the image window according to the rotation angle, where the image window is a visualization component provided by the terminal;
  • a display unit configured to display a dynamic effect of the view control moving in the image window according to the displacement direction and the displacement length.
  • the present invention also provides an apparatus for displaying a dynamic effect of a view control, comprising:
  • a direction sensor configured to detect a rotation angle of the terminal relative to a preset coordinate axis on the terminal body
  • a processor configured to determine a displacement direction and a displacement length of the view control in the image window according to the rotation angle, the image window being a visualization component provided by the terminal;
  • a display configured to display a dynamic effect of the view control moving in the image window according to the displacement direction and the displacement length;
  • a memory configured to store executable instructions of the processor
  • a bus configured to couple the direction sensor, the processor, the display, and the memory.
  • the method and device for displaying the dynamic effect of the view control can capture the posture change of the terminal in the three-dimensional space by detecting the rotation angle of the terminal relative to the preset coordinate axis, and determine the displacement of the view control in the image window according to the posture change.
  • the direction and displacement length shows the dynamic effect of the view control moving in the image window.
  • the present invention can adjust the dynamic effect of the animation element in the image window based on the change of the terminal holding mode, thereby realizing the image display mode with the human-computer interaction function.
  • FIG. 1 is a flowchart of a method for displaying a dynamic effect of a view control according to an embodiment of the present invention
  • FIG. 2 is a schematic view showing a terminal X-axis, a Y-axis, and a Z-axis in an embodiment of the present invention
  • 3a-1 and 3a-2 are schematic views showing the rotation of the terminal about the X axis in the embodiment of the present invention.
  • 3b-1 and 3b-2 are schematic views showing the rotation of the terminal about the Y axis in the embodiment of the present invention.
  • 3c-1 and 3c-2 are schematic views showing the rotation of the terminal about the Z axis in the embodiment of the present invention.
  • 4a, 4b, 4c, 4d respectively show a schematic view of the angle between the extension line and the Y axis in which the displacement direction is located in the embodiment of the present invention
  • 5a and 5b are schematic views respectively showing the relationship between the rotation angle and the displacement direction in the embodiment of the present invention.
  • 6a and 6b respectively show schematic views of an image window including a view control in an embodiment of the present invention
  • FIG. 7 is a flowchart of another method for displaying a dynamic effect of a view control according to an embodiment of the present invention.
  • FIG. 8 is a schematic diagram of a mapping table provided by an embodiment of the present invention.
  • 9a-1 and 9a-2 are schematic views respectively showing the relationship between the displacement length and the rotation angle value in the embodiment of the present invention.
  • 9b-1 and 9b-2 are respectively schematic diagrams showing the relationship between the displacement length and the rotation angle value in the embodiment of the present invention.
  • 10a and 10b are schematic diagrams showing another relationship between the displacement length and the rotation angle value in the embodiment of the present invention.
  • 11a and 11b are schematic views respectively showing dynamic effects of rotation of a terminal around a Y-axis in an embodiment of the present invention
  • 12a and 12b are respectively schematic views showing the dynamic effect of the rotation of the terminal around the X axis in the embodiment of the present invention
  • 13a and 13b are schematic views respectively showing the dynamic effect of the rotation of the terminal around the Z axis in the embodiment of the present invention
  • 15a and 15b are schematic diagrams showing dynamic effects of rotation of a terminal around an X-axis and a Z-axis in an embodiment of the present invention
  • FIG. 16 is a block diagram showing the structure of an apparatus for displaying a dynamic effect of a view control according to an embodiment of the present invention.
  • FIG. 17 is a block diagram showing another composition of an apparatus for displaying a dynamic effect of a view control according to an embodiment of the present invention.
  • FIG. 18 is a block diagram showing the composition of an apparatus for displaying a dynamic effect of a view control according to an embodiment of the present invention.
  • the embodiment of the invention provides a method for displaying the dynamic effect of the view control.
  • the method is applied to the terminal side, and the terminal includes but is not limited to: a mobile phone, a tablet computer, and a wearable device.
  • the terminal includes but is not limited to: a mobile phone, a tablet computer, and a wearable device.
  • all the portable devices having the terminal rotation angle detecting function and the image output function can implement the method provided by the embodiments of the present invention.
  • the method includes at least steps 101 to 103.
  • the terminal obtains the rotation angle parameter through its own detection component, which can be built in the terminal or integrated on the terminal housing.
  • the detecting component may specifically be a direction sensor.
  • the preset coordinate axis is set by using the terminal body as a reference system, as shown in FIG. 2, the X axis parallel to the wide side of the mobile phone, the Y axis parallel to the long side of the mobile phone, and the plane perpendicular to the screen of the mobile phone are Z axis.
  • the mobile phone is turned to the right by 90°, and the rotation angle of the mobile phone about the Y axis is -90°; on the contrary, referring to FIG. 3b-2, when the right side of the mobile phone is gradually raised until the mobile phone is perpendicular to the horizontal desktop, The phone is flipped 180° to the left, and the angle of rotation of the phone around the Y axis is +90°.
  • the phone screen is placed face up on the horizontal table, so that the phone rotates clockwise or counterclockwise on the horizontal plane, the phone will rotate around the Z axis, and the direction sensor can The angle of rotation of the phone relative to the Z axis is detected.
  • the angle of rotation of the mobile phone around the Z axis ranges from [0°, 360°).
  • the rotation angles around the Z axis when the top of the mobile phone is oriented in the four directions of the east, the south, the west, and the north are: 90°, 180°. , 270° and 0°.
  • the direction sensor can detect the rotation angle of the three-axis rotation of the mobile phone around Z, X, and Y in real time, and record them as parameters values[0], values[1], and values[2], respectively.
  • the terminal can adjust the dynamic effect of the view control in the image window by using the rotation angle of any one of the coordinate axes, or combine the rotation angle of any two or three coordinate axes to synthesize the dynamic effect of the view control in the image window. This will be described in the following examples.
  • the mapping relationship between the rotation angle of the terminal relative to the preset coordinate axis and the displacement direction of the view control in the image window may be pre-configured in the terminal, and the relationship may be set based on specific design requirements. Set.
  • the mapping relationship between the rotation angle of the terminal relative to the preset coordinate axis and the displacement direction of the view control in the image window may be configured as: the extension line of the displacement direction and the coordinate axis are preset The angle between the angle values. Taking the terminal around the Y-axis as an example, Figures 4a, 4b, 4c, and 4d show several different angle values. When the terminal rotates around the Y-axis, the view control in the image window can follow the Figure 4a.
  • the view control in the image window can be moved in the direction indicated by the dotted line shown in FIG. 4a with an angle of 90° with respect to the Y axis, or, see FIG. 4b, the image
  • the view control in the window can be moved in the direction indicated by the dotted line with the angle of 45° with the Y axis shown in FIG. 4b, or, as shown in FIG. 4c, the view control in the image window can be clamped with the Y axis according to FIG. 4c.
  • the angle is moved in the direction indicated by the dashed line of 30°, or, referring to Fig. 4d, the view control in the image window can be moved in the direction indicated by the broken line parallel to the Y-axis shown in Fig. 4d.
  • the specific displacement direction of the view control on the extension line can also be set based on specific design requirements. Still taking the Y-axis as an example, when the view control is an element such as a cloud or a balloon, in order to pursue the floating effect of the lightweight object, the displacement direction of the view control can be configured to be inconsistent with the rotation direction of the terminal, for example, in FIG.
  • the view control when When the left side of the terminal is lifted up to rotate right around the Y axis, the view control can be configured to move to the left side of the image window; in contrast, when the view control is an element such as a small ball or a brick, in pursuit of a heavy object
  • the scrolling design effect can be configured to configure the view control's displacement direction to coincide with the direction of rotation of the terminal.
  • Figure 5b when the left side of the terminal is lifted up to rotate right around the Y axis, the view control can be configured to the right of the image window. Side movement.
  • the mapping relationship or calculation relationship between the rotation angle of the terminal relative to the preset coordinate axis and the displacement length of the view control in the image window may also be pre-configured in the terminal.
  • the terminal can also configure different displacement forms for the view control in the image window, such as parabolic curve motion, or wave-breaking roundabout motion, or jumping motion based on preset offline points on the motion track.
  • different displacement forms for the view control in the image window such as parabolic curve motion, or wave-breaking roundabout motion, or jumping motion based on preset offline points on the motion track.
  • This embodiment mainly implements a dynamic moving effect for a view control in an image window, where the image window is a visual component provided by the terminal, and the calling interface of the visual component can be provided by the operating system of the terminal, a native application of the operating system or a third party.
  • the application can present the image window in the form of an interface call.
  • the view control refers to an image element rendered in an image window.
  • the view control may be an image view control, such as trees, clouds, fingers, etc. in FIG. 6a, or the view control may also be a text view control, such as the characters displayed in the dialog box in FIG. 6b.
  • These image elements are one of the components of the image window.
  • the image elements usually exist in the form of controls, which can be individually designed and controlled during program development and operation.
  • the view control that can be moved in the image window can be preset. This embodiment does not limit the attributes and the number of the view control.
  • the terminal When moving the view control according to the displacement direction and the displacement length, the terminal needs to continuously draw and present image frames of many static image windows. These image frames are connected in series to realize the dynamic effect of the view control.
  • the view control when the view control generates a displacement of a length step value, the terminal draws and presents a corresponding image frame.
  • the length step value refers to a minimum unit length of movement of the view control, and the length step value can be set in advance. In practical applications, the length step value can be measured by the number of pixels. For example, the length step value can be set to 10 pixels, 5 pixels, and the like. In the case where the dynamic effect fluency is strict, the minimum granularity of the length step value may be 1 pixel. In this case, if the displacement length is 1000 pixels, then theoretically, the terminal needs to draw 1000 image frames. Shows the complete dynamic effects of the view control.
  • the flow shown in FIG. 1 is repeatedly performed, because the detection of the change of the rotation angle of the terminal relative to the preset coordinate axis by the direction sensor is performed in real time, and the terminal rotates.
  • the direction sensor continuously returns a new rotation angle value of the terminal relative to the preset coordinate axis.
  • the terminal executes the flow shown in FIG. 1 to obtain the rotation angle, determine the corresponding displacement direction and displacement length, and display the corresponding dynamic effect accordingly.
  • the overall dynamic effect corresponding to the rotation process is the accumulation of dynamic effects caused by each rotation angle change during the rotation.
  • the direction sensor Similar to the length step value, the direction sensor also returns the rotation angle according to a predetermined angle granularity, which is the angle step value. In practical applications, the angle can be The degree step value is set to 1°. Thus, each time the direction sensor detects an angle change of 1°, the terminal executes a flow of Figure 1 to display the dynamic effect of the view control corresponding to the 1°.
  • the terminal continuously receives the rotation angle of the terminal returned by the direction sensor relative to the Y axis during the rotation: 1°, 2°, 3°...29°, 30°; At a new rotation angle, the terminal executes the flow of Figure 1.
  • the terminal rotates by 1° around the Y axis, and the view control moves to the left by 10 pixels.
  • the view control in the image window moves 300 pixels to the left.
  • the method of adjusting the display of the view control based on the real-time feedback of the rotation angle has the advantage that the dynamic effect of the view control and the terminal rotation process can be highly synchronized, thereby ensuring the immediacy of the interactive feedback.
  • the method for displaying the dynamic effect of the view control provided by the embodiment can capture the posture change of the terminal in the three-dimensional space by detecting the rotation angle of the terminal relative to the preset coordinate axis, and determine the displacement direction of the view control in the image window according to the posture change. And the length of the displacement, and according to this display the dynamic effect of the view control moving in the image window.
  • the embodiment can adjust the dynamic effect of the animation element in the image window based on the change of the terminal holding mode, thereby realizing the image display mode with the human-computer interaction function.
  • the embodiment of the present invention further provides a method for displaying a dynamic effect of a view control. As shown in FIG. 7, the method includes at least steps 701 to 704.
  • the rotation of the terminal around the Y axis is taken as an example.
  • the direction sensor detects the rotation angle change of the terminal relative to the preset coordinate axis in real time, and obtains the rotation angle values[0], values[1], and values[2], The terminal performs the subsequent steps of FIG. 7 using values[2] therein.
  • the displacement direction of the preset configuration view control is perpendicular to the Y axis of the preset coordinate axis, that is, the angle between the two is 90°, in other words, the view control will move along a horizontal line perpendicular to the Y axis.
  • the terminal can determine the displacement direction of the view control according to the positive or negative rotation angle.
  • the Y-axis has an angular rotation range of [-90°, +90°]. When the left side of the terminal is lifted to the right, the rotation angle changes from 0° to -90°. When the right side of the terminal is lifted to the left, the rotation angle is from 0°. +90° change.
  • the terminal may search for a displacement length corresponding to the rotation angle in a preset mapping table.
  • FIG. 8 shows a schematic diagram of a mapping table in which each rotation angle value corresponds to a displacement length value in units of pixel points.
  • the rotation angle in the table is set according to the preset angle step value. For example, when the angle step value is 1°, the mapping table should include 180 (excluding 0°) rotation angle from -90° to +90°. The mapping relationship with the length of the displacement.
  • the view control is once displaced by the angle of rotation of the terminal relative to the preset coordinate axis, so that the displacement length corresponding to each rotation angle in the mapping table should be generated.
  • the amount of change in displacement length corresponding to the last angle step value For example, when the rotation length corresponding to the rotation angle -30° is 200 pixels, the meaning is that when the rotation angle is increased from -29° to -30°, the view control is moved to the left by 200 pixels, not referring to the terminal from The total number of pixels moved during 0° rotation to -30°.
  • the total displacement length of the view control to the left should be 30° from 1° to 30° in the mapping table. The sum of the displacement lengths corresponding to the rotation angles.
  • the movement speed of the view control can be adjusted by modifying the mapping table, specifically:
  • the displacement length corresponding to each unit angle change amount in the mapping table may be set to the same value, which may be obtained from the table shown in FIG. 10a.
  • the slope of the curve shown in Figure 10b is thus constant. In this case, the view control will move at a constant speed.
  • the magnitude of the displacement length may be determined based on the following rules:
  • A is a range of rotation angles of the rotation of the terminal relative to any coordinate axis of the preset coordinate axis, which is 90° in this embodiment, and l is an increment corresponding to each unit angle.
  • the length of the displacement, L is the maximum distance that the view control can move in a single direction.
  • the terminal may further determine the displacement length of the view control corresponding to each unit angle change amount based on the preset calculation relationship. Specifically, the moving speed of the view control is gradually slowed down as an example, including Step1 and Step2 as follows.
  • Step 1 After each terminal obtains a new rotation angle, the terminal determines the displacement length attenuation amount corresponding to the rotation angle.
  • the displacement length attenuation amount is the portion where the displacement length is reduced from the displacement length corresponding to the previous angle change amount. Since the moving speed of the view control needs to be gradually slowed down, it is necessary to ensure that as the rotation angle increases, the displacement length corresponding to each unit angular change amount is continuously reduced, thereby calculating the displacement length attenuation amount corresponding to each rotation angle. .
  • the displacement length attenuation amount can be calculated according to the following formula:
  • the initial displacement length refers to the length of movement of the view control when the terminal first generates an angular change amount of the angle step value, for example, the rotation angle of the terminal rotating around any of the preset coordinate axes changes from 0° to 1°.
  • the displacement length of the time view control Since the displacement length of the last rotation angle can be referred to when the terminal first generates the angle change amount, it is necessary to manually set an initial displacement length for the end point situation. This embodiment does not limit the specific value of the initial displacement length.
  • the maximum displacement length is the maximum distance that the view control can move in a single direction.
  • the view control can move up to M pixels from the initial position to the left, or can move up to N pixels to the right.
  • the maximum displacement length is equivalent to the foregoing.
  • the unit of the rotation angle is “degree”
  • the unit of length is “the number of pixels”.
  • Step 2 The displacement length corresponding to the previous rotation angle is subtracted from the displacement length attenuation amount, and the displacement length corresponding to the current rotation angle is obtained.
  • the terminal Since the new rotation angle is continuously generated during the rotation of the terminal, and the terminal calculates the corresponding displacement length based on each new rotation angle, the terminal can directly obtain the previous one when calculating the displacement length corresponding to the current rotation angle in Step 2. The length of the displacement corresponding to the angle of rotation.
  • the displacement length corresponding to the previous rotation angle can be referred to, so in Step 2, for this end condition
  • the initial displacement length A is pre-set, and the terminal determines the initial displacement length A as the corresponding displacement length when the rotation angle is 1°.
  • This embodiment does not limit the specific value of the initial displacement length A. In practical applications, it can be set according to the empirical value. Ideally, the initial displacement length A can be set to 0.4X.
  • the above method gives a displacement length calculation method for gradually slowing the movement speed of the view control.
  • the displacement length increase amount can be calculated by referring to the above formula, and in Step 2 The displacement length corresponding to the previous rotation angle is added to the displacement length increase, and the displacement length corresponding to the current rotation angle is obtained.
  • the range of the rotation angle that generates the dynamic effect may also be set. Specifically, one can be set according to design requirements or user preferences.
  • the range of rotation angles varies, for example [-30°, +30°], which is defined by the two rotation angle thresholds of -30° and +30°. If the angle of rotation of the terminal exceeds the threshold of the rotation angle threshold, the view control no longer moves further, staying at the position when the last displacement (corresponding to the displacement length of -30° or +30°) is completed. Specifically, after detecting the rotation angle, the terminal determines whether the rotation angle exceeds a preset rotation angle threshold range. If the determination result is yes, the terminal directly determines the displacement length as 0, and cancels the step of determining the displacement length.
  • the terminal may also determine the displacement length as 0 when it is determined that the rotation angle does not exceed the rotation angle threshold range, and calculate the displacement length by using a mapping table or a formula when the rotation angle exceeds the rotation angle threshold range, thereby making the terminal only
  • the view control is moved when the rotation angle exceeds a certain degree, thereby avoiding erroneous operations caused by the fine action and saving the processing resources of the terminal.
  • the terminal may also perform step 703 and then perform step 702, or perform step 702 and step 703 at the same time.
  • the terminal needs to continuously draw image frames to show the dynamic effects of the view control movement.
  • the terminal draws an image frame directly on the image window.
  • the drawing process needs to occupy the main thread of the UI (User Interface), it will temporarily block the main thread and cannot respond to user operations. Therefore, this embodiment can adopt a single buffer drawing mechanism, that is, create a canvas. (Canvas), the image frame is drawn on the canvas by another thread independent of the main thread. After the drawing is completed, the content on the canvas is migrated to the drawing surface of the image window for display, thereby avoiding the long-term occupation of the main window of the image window UI, so that the main thread can respond to the user's operation event in time.
  • UI User Interface
  • the multi-buffering mechanism may be used for drawing, that is, creating multiple canvases by different
  • the threads are responsible for image frame drawing and image frame display on different canvases.
  • the remaining canvas performs other image frame drawing, and each canvas polls the image frame that is drawn to the drawing surface of the image window for display.
  • the more the number of canvases the better the display performance of the terminal.
  • a double buffer drawing mechanism can be adopted.
  • the terminal creates a first canvas and a second canvas independent of the drawing surface of the image window, and then first draws an image frame on the first canvas, and after the drawing is completed, the first canvas image frame is migrated to the drawing surface of the image window for display. And the next image frame is drawn on the second canvas while the first canvas image frame is displayed. After the second canvas is drawn, the second canvas image frame is migrated to the image window drawing surface for display, and the next canvas image frame is drawn on the first canvas while the second canvas image frame is displayed, and thus repeated, two The canvas alternately displays and draws image frames.
  • step 704 can be performed using the SurfaceView component in JAVA.
  • the SurfaceView component is a dynamic drawing component that supports multiple buffering mechanisms. On the one hand, it can achieve complex and efficient UI dynamic effects, and on the other hand, it does not cause user input to be unable to respond in time.
  • the terminal After obtaining the displacement direction and the displacement length, the terminal converts the displacement length into the number of pixels of the view control relative to the left edge of the image window according to the displacement direction, and then assigns the number of pixels to the paddingLeft parameter in the SurfaceView component, and the SurfaceView component according to the paddingLeft parameter. Draw a new image frame.
  • the SurfaceView component of the previous version 4.1 supports the double-buffered drawing mechanism by default.
  • the SurfaceView component of the later version 4.2 supports the three-buffer drawing mechanism by default. In practice, you can extend the module code up to 32 canvases by modifying the component code.
  • the above SurfaceView component is merely illustrative and is not intended to be a specific limitation of the operating system and component types applicable to the present embodiment. In practical applications, other components, interfaces, configuration files, and the like having a multi-buffered drawing mechanism can be applied to the solution provided in this embodiment.
  • the displacement direction of the configuration view control is perpendicular to the Y axis.
  • the rotation angle is less than 0°
  • the displacement direction of the view control is toward the left side of the image window.
  • the rotation angle is greater than 0°
  • the displacement direction of the view control is toward the right side of the image window. This creates a dynamic effect of floating light objects upwards.
  • FIG. 11a when the left side of the mobile phone is gradually raised, a rotation angle smaller than 0° is generated, and the cloud moves linearly to the left side; as shown in FIG. 11b, when the right side of the mobile phone is gradually raised, more than 0° is generated. The angle of rotation of the cloud moves linearly to the right.
  • the displacement direction of the configuration view control is perpendicular to the X axis.
  • the rotation angle is less than 0°
  • the displacement direction of the view control is toward the bottom of the image window.
  • the rotation angle is greater than 0°, the displacement direction of the view control is toward the top of the image window. This creates a dynamic effect of the heavy object scrolling down.
  • a rotation angle of less than 0° is generated, and the small ball moves linearly toward the bottom of the image window; as shown in Fig. 12b, when the bottom of the mobile phone is gradually raised, more than 0° is generated. The angle of rotation of the ball moves linearly toward the top of the image window.
  • the displacement direction and rotation direction of the configuration view control are as follows.
  • the rotation direction of the mobile phone around the Z axis is clockwise and the rotation angle is increasing
  • the displacement direction of the view control is toward the left side of the image window
  • the rotation direction of the mobile phone around the Z axis
  • the displacement direction of the view control is toward the right side of the image window, thereby forming a dynamic effect of the reverse movement of the view control relative to the rotation direction.
  • the mobile phone rotates around the X and Y axes at the same time.
  • the displacement direction of the configuration view control is perpendicular to the X axis, and when the rotation angle is less than 0°, the displacement direction of the view control is toward the top of the image window, and when the rotation angle is greater than 0°, the view control is The displacement direction is toward the bottom of the image window, thereby forming a dynamic effect of the lightweight object floating upward.
  • the displacement direction of the configuration view control is perpendicular to the Y axis.
  • the displacement direction of the view control faces the left side of the image window, and when the rotation angle is greater than 0°, the displacement direction of the view control faces the image. On the right side of the window, the dynamic effect of the floating of the lightweight object is thus formed.
  • the mobile phone rotates around the X and Z axes at the same time.
  • the displacement direction of the configuration view control is perpendicular to the X axis, and when the rotation angle is less than 0°, the displacement direction of the view control is toward the top of the image window, and when the rotation angle is greater than 0°, the view control is The displacement direction is toward the bottom of the image window, thereby forming a dynamic effect of the lightweight object floating upward.
  • the displacement direction of the configuration view control is opposite to the rotation direction.
  • the displacement direction is toward the right side of the image window, and when it is rotated clockwise, the displacement direction is toward the left side of the image window.
  • the mobile phone rotates around the Y axis and the Z axis at the same time.
  • the mobile phone rotates around the X axis, the Y axis, and the Z axis at the same time.
  • an embodiment of the present invention further provides an apparatus for displaying a dynamic effect of a view control.
  • the device may be located inside the terminal or integrated outside the terminal and establish a data interaction relationship with the terminal. As shown in FIG. 16, the device includes at least: a detecting unit 161, a determining unit 162, and a display unit 163, where
  • the detecting unit 161 is configured to detect a rotation angle of the terminal relative to the preset coordinate axis on the terminal body;
  • a determining unit 162 configured to determine a displacement direction and a displacement length of the view control in the image window according to the rotation angle, where the image window is a visualization component provided by the terminal;
  • the display unit 163 is configured to display a dynamic effect of the view control moving in the image window according to the displacement direction and the displacement length.
  • the displacement direction is perpendicular to the preset coordinate axis
  • the determining unit 162 includes:
  • the first determining module 1621 is configured to determine a displacement direction of the view control according to the positive and negative of the rotation angle.
  • the determining unit 162 includes a second determining module 1622, configured to:
  • the displacement length corresponding to the previous rotation angle is subtracted from the displacement length attenuation amount, and the displacement length corresponding to the current rotation angle is obtained.
  • the second determining module 1622 is configured to determine the preset initial displacement length as the displacement length when the angle change is first generated.
  • the second determining module 1622 is configured to calculate the displacement length attenuation according to the following formula:
  • Y is the displacement length attenuation amount
  • T is the rotation angle
  • A is the initial displacement length
  • X is the maximum displacement length, where A is less than X and Y is less than A.
  • the determining unit 162 is configured to search for a displacement length corresponding to the rotation angle in the preset mapping table.
  • the value of the rotation angle detected by the detecting unit 161 is linearly related to the displacement length determined by the determining unit 162.
  • the determining unit 162 is configured to determine the displacement length as 0 if the rotation angle exceeds a preset angle threshold.
  • the display unit 163 is configured to display an image frame of the image window by using a multi-buffering mechanism.
  • the display unit 163 adopts a double buffering mechanism
  • the display unit 163 is used to:
  • the second canvas image frame is displayed and the next image frame is drawn on the first canvas at the same time, and the two canvases alternately display and draw the image frame.
  • an embodiment of the present invention further provides an apparatus for displaying a dynamic effect of a view control.
  • the device may be located inside the terminal or integrated outside the terminal and establish a data interaction relationship with the terminal.
  • the apparatus includes a direction sensor 181, a processor 182, a display 183, a memory 184, and a bus 185, wherein:
  • the direction sensor 181 is configured to detect a rotation angle of the terminal relative to a preset coordinate axis on the terminal body;
  • the processor 182 is configured to determine a displacement direction and a displacement length of the view control in the image window according to the rotation angle, where the image window is a visualization component provided by the terminal;
  • the display 183 is configured to display a dynamic effect of the view control moving in the image window according to the displacement direction and the displacement length;
  • the memory 184 is configured to store executable instructions of the processor 182;
  • Bus 185 is configured to couple direction sensor 181, processor 182, display 183, and memory 184.
  • the processor 182 is configured to determine the direction of displacement of the view control based on the positive and negative angles of rotation.
  • processor 182 is configured to:
  • the displacement length corresponding to the previous rotation angle is subtracted from the displacement length attenuation amount, and the displacement length corresponding to the current rotation angle is obtained.
  • processor 182 is configured to:
  • the preset initial displacement length is determined as the displacement length.
  • processor 182 is configured to:
  • Y is the displacement length attenuation amount
  • T is the rotation angle
  • A is the initial displacement length
  • X is the maximum displacement length, where A is less than X and Y is less than A.
  • processor 182 is configured to:
  • processor 182 is configured to linearly map the value of the rotation angle to the displacement length.
  • processor 182 is configured to:
  • the displacement length is determined to be zero.
  • display 183 is configured to:
  • the image frame of the image window is displayed using a multi-buffering mechanism.
  • the display 183 is configured to employ a double buffering mechanism
  • Display 183 is configured to:
  • the second canvas image frame is displayed and the next image frame is drawn on the first canvas at the same time, and the two canvases alternately display and draw the image frame.
  • the device for displaying the dynamic effect of the view control provided by the embodiment of the present invention can capture the posture change of the terminal in the three-dimensional space by detecting the rotation angle of the terminal relative to the preset coordinate axis, and determine the displacement of the view control in the image window according to the posture change. The direction and displacement length, and based on this, shows the dynamic effect of the view control moving in the image window.
  • the embodiment of the present invention can adjust the dynamic effect of the animation element in the image window based on the change of the terminal holding mode, thereby realizing the image display mode with the human-computer interaction function.
  • modules in the devices of the embodiments can be adaptively changed and placed in one or more devices different from the embodiment.
  • the modules or units or components of the embodiments may be combined into one module or unit or component, and further they may be divided into a plurality of sub-modules or sub-units or sub-components.
  • any combination of the features disclosed in the specification, including the accompanying claims, the abstract and the drawings, and any methods so disclosed, or All processes or units of the device are combined.
  • Each feature disclosed in this specification (including the accompanying claims, the abstract and the drawings) may be replaced by alternative features that provide the same, equivalent or similar purpose.
  • the various component embodiments of the present invention may be implemented in hardware, or in a software module running on one or more processors, or in a combination thereof.
  • a microprocessor or digital signal processor may be used in practice to implement some or all of the components of the inventive name (e.g., means for determining the level of link within a website) in accordance with embodiments of the present invention.
  • the invention can also be implemented as a device or device program (e.g., a computer program and a computer program product) for performing some or all of the methods described herein.
  • Such a program implementing the present invention can be stored in a computer readable medium Up, or may have the form of one or more signals. Such signals may be downloaded from an Internet website, provided on a carrier signal, or provided in any other form.

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

一种显示视图控件动态效果的方法及装置，涉及互联网技术领域，解决了图像窗口欠缺交互功能的问题。所述方法包括：检测终端相对终端本体上预设坐标轴的旋转角度（101）；根据旋转角度确定图像窗口中视图控件的位移方向和位移长度（102），所述图像窗口为终端提供的可视化部件；按照位移方向及位移长度，显示视图控件在图像窗口中移动的动态效果（103）。所述方法及装置主要应用于便携式电子设备中。

Description

显示视图控件动态效果的方法及装置 技术领域
本发明涉及互联网技术领域，具体而言，涉及一种显示视图控件动态效果的方法及装置。
背景技术
浏览器页面中常常嵌有图像窗口，用于显示静态或动态的视图控件(Image View)。此外，一些系统原生或第三方开发的应用程序中也会内嵌这种图像窗口，较为常见的包括操作系统的桌面背景，或者天气类应用中显示阴晴雨雪图标的窗口等。
当图像窗口用以显示动态视图控件时，视图控件的动态效果往往是程序预先设置好的，例如雨点从上飘落至下，或者信息标签按照预定轨迹进行循环位移等。这种动态效果样式呆板，无法对用户操作进行响应，不具有交互性能。
发明内容
本发明的目的在于提供一种显示视图控件动态效果的方法及装置，能够解决图像窗口欠缺交互功能的问题。
为解决上述问题，第一方面，本发明提供了一种显示视图控件动态效果的方法，包括：
检测终端相对终端本体上预设坐标轴的旋转角度；
根据所述旋转角度确定图像窗口中视图控件的位移方向和位移长度，所述图像窗口为终端提供的可视化部件；
按照所述位移方向及所述位移长度，显示所述视图控件在所述图像窗口中移动的动态效果。
第二方面，本发明还提供了一种显示视图控件动态效果的装置，包括：
检测单元，用于检测终端相对终端本体上预设坐标轴的旋转角度；
确定单元，用于根据所述旋转角度确定图像窗口中视图控件的位移方向和位移长度，所述图像窗口为终端提供的可视化部件；
显示单元，用于按照所述位移方向及所述位移长度，显示所述视图控件在所述图像窗口中移动的动态效果。
第三方面，本发明还提供了一种显示视图控件动态效果的装置，包括：
方向传感器，被配置为检测终端相对终端本体上预设坐标轴的旋转角度；
处理器，被配置为根据所述旋转角度确定图像窗口中视图控件的位移方向和位移长度，所述图像窗口为终端提供的可视化部件；
显示器，被配置为按照所述位移方向及所述位移长度，显示所述视图控件在所述图像窗口中移动的动态效果；
存储器，被配置为存储所述处理器的可执行指令；
总线，被配置为耦接所述方向传感器、所述处理器、所述显示器及所述存储器。
本发明提供的显示视图控件动态效果的方法及装置，能够通过检测终端相对预设坐标轴的旋转角度捕捉到终端在三维空间中的姿态变化，根据该姿态变化确定出图像窗口中视图控件的位移方向和位移长度，并据此显示视图控件在图像窗口中移动的动态效果。与现有技术中按照预定程序展示动态效果相比，本发明能够基于终端握持方式的变化调整图像窗口中动画元素的动态效果，从而实现具有人机交互功能的图像展示方式。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符 号表示相同的部件。在附图中：
图1示出了本发明实施例提供的一种显示视图控件动态效果的方法流程图；
图2示出了本发明实施例中终端X轴、Y轴、Z轴的示意图；
图3a-1和图3a-2示出了本发明实施例中终端围绕X轴旋转的示意图；
图3b-1和图3b-2示出了本发明实施例中终端围绕Y轴旋转的示意图；
图3c-1和图3c-2示出了本发明实施例中终端围绕Z轴旋转的示意图；
图4a、4b、4c、4d分别示出了本发明实施例中位移方向所在延长线与Y轴之间存在夹角的示意图；
图5a和图5b分别示出了本发明实施例中旋转角度与位移方向关系的示意图；
图6a和图6b分别示出了本发明实施例中包含视图控件的图像窗口的示意图；
图7示出了本发明实施例提供的另一种显示视图控件动态效果的方法流程图；
图8示出了本发明实施例提供的映射表的示意图；
图9a-1和图9a-2分别示出了本发明实施例中位移长度与旋转角度数值之间关系的示意图；
图9b-1和图9b-2分别示出了本发明实施例中另一种位移长度与旋转角度数值之间关系的示意图；
图10a和图10b示出了本发明实施例中另一种位移长度与旋转角度数值之间关系的示意图；
图11a和图11b分别示出了本发明实施例中终端围绕Y轴旋转的动态效果的示意图；
图12a和图12b分别示出了本发明实施例中终端围绕X轴旋转的动态效果的示意图；
图13a和图13b分别示出了本发明实施例中终端围绕Z轴旋转的动态效果的示意图；
图14a和图14b示出了本发明实施例中终端围绕X轴及Y轴旋转的 动态效果的示意图；
图15a和图15b示出了本发明实施例中终端围绕X轴及Z轴旋转的动态效果的示意图；
图16示出了本发明实施例提供的一种显示视图控件动态效果的装置的组成框图；
图17示出了本发明实施例提供的另一种显示视图控件动态效果的装置的组成框图；
图18示出了本发明实施例提供的又一种显示视图控件动态效果的装置的组成框图。
具体实施方式
为解决现有技术中图像窗口的显示方式欠缺交互功能的问题，本发明实施例提供一种显示视图控件动态效果的方法。该方法应用于终端侧，所述终端包括但不限于：手机、平板电脑、可穿戴式设备。实际应用中，一切具有终端旋转角度检测功能以及图像输出功能的便携式设备均可实现本发明实施例提供的方法。
如图1所示，该方法至少包括步骤101至步骤103。
101、检测终端相对终端本体上预设坐标轴的旋转角度。
终端通过其自带的检测部件获取旋转角度参数，该部件可以内置于终端中，也可以集成在终端外壳上。实际应用中，该检测部件具体可以是方向传感器。
所述预设坐标轴是以终端本体为参照系设置的，如图2所示，与手机宽边平行的为X轴、与手机长边平行的为Y轴、垂直于手机屏幕所在平面的为Z轴。
如图3a-1和图3a-2所示，如果将手机屏幕朝上放置在水平桌面上，将手机顶部逐渐抬起，或者将手机底部逐渐抬起，那么手机将围绕X轴转动，方向传感器可检测到手机相对X轴的旋转角度。实际应用中，手机围绕X轴旋转的角度变化范围为[-180°,+180°]。具体的，参见图3a-1，当手机屏幕朝上放置在水平桌面上时，此时手机绕X轴旋转的旋转角度为 0°，当将手机顶部逐渐抬起直至手机屏幕朝下放置在水平桌面上时，手机向后翻转了180°，此时手机绕X轴旋转的旋转角度为-180°；与此相反，参见图3a-2，当将手机底部逐渐抬起直至手机屏幕朝下放置在水平桌面上时，手机向前翻转了180°，此时手机绕X轴旋转的旋转角度为+180°。
如图3b-1和图3b-2所示，如果将手机屏幕朝上放置在水平桌面上，将手机左侧逐渐抬起，或者将手机右侧逐渐抬起，那么手机将围绕Y轴转动，方向传感器可检测到手机相对Y轴的旋转角度。实际应用中，手机围绕Y轴旋转的角度变化范围为[-90°,+90°]。具体的，参见图3b-1，当手机屏幕朝上放置在水平桌面上时，此时手机绕Y轴旋转的旋转角度为0°，当将手机左侧逐渐抬起直至手机垂直于水平桌面时，手机向右翻转了90°，此时手机绕Y轴旋转的旋转角度为-90°；与此相反，参见图3b-2，当将手机右侧逐渐抬起直至手机垂直于水平桌面时，手机向左翻转了180°，此时手机绕Y轴的旋转角度为+90°。
如图3c-1和图3c-2所示，如果将手机屏幕朝上放置在水平桌面上，使手机在水平平面上做顺时针或逆时针旋转时，手机将围绕Z轴转动，方向传感器可检测到手机相对Z轴的旋转角度。实际应用中，手机围绕Z轴旋转的角度变化范围为[0°,360°)。具体的，当手机屏幕朝上放置在水平桌面上时，手机顶部分别朝向正东、正南、正西、正北四个方向时的绕Z轴旋转的旋转角度依次为：90°、180°、270°及0°。
本实施例中，方向传感器可对手机绕Z、X、Y三轴旋转的旋转角度进行实时检测，并分别记做参数values[0]、values[1]和values[2]。终端可以利用其中任意一个坐标轴的旋转角度调整图像窗口中视图控件的动态效果，也可以结合其中任意两个或三个坐标轴的旋转角度对图像窗口中视图控件的动态效果进行合成，本发明后续实施例将对此进行介绍。
需要说明的是，上述坐标轴是为方便构建三维坐标系而虚构的，并不具有可见形态，也不会对终端的外观造成破坏。
102、根据旋转角度确定图像窗口中视图控件的位移方向和位移长度。
终端中可以预先配置终端相对预设坐标轴的旋转角度与图像窗口中视图控件的位移方向之间的映射关系，该关系可以基于具体的设计需求设 置。在本实施例的一种实现方式中，终端相对预设坐标轴的旋转角度与图像窗口中视图控件的位移方向之间的映射关系可以被配置为：位移方向所在延长线与坐标轴成预设角度值的夹角。以终端围绕Y轴旋转为例，图4a、图4b、图4c和图4d给出了几种不同夹角值的情况，当终端围绕Y轴旋转时，图像窗口中的视图控件可以按照图4a、图4b、图4c和图4d中任一示出的虚线所示方向移动。具体地，参见图4a，当终端围绕Y轴旋转时，图像窗口中视图控件可按照图4a示出的、与Y轴夹角为90°的虚线所示方向移动，或者，参见图4b，图像窗口中视图控件可按照图4b示出的、与Y轴夹角为45°的虚线所示方向移动，或者，参见图4c，图像窗口中视图控件可按照图4c示出的、与Y轴夹角为30°的虚线所示方向移动，或者，参见图4d，图像窗口中视图控件可按照图4d示出的、与Y轴平行的虚线所示的方向移动。进一步的，在位移方向所在延长线上，还具有两个方向相反的位移方向，本实施例中同样可以基于具体的设计需求设置视图控件在该延长线上的具体位移方向。仍以Y轴为例，当视图控件为云彩、气球等元素时，为追求轻质物体向上漂浮的设计效果，可以配置视图控件的位移方向与终端的旋转方向不一致，例如在图5a中，当终端左侧向上抬起以围绕Y轴向右旋转时，可以配置视图控件向图像窗口左侧移动；与此相反的，当视图控件为小球、砖块等元素时，为追求重质物体向下滚动的设计效果，可以配置视图控件的位移方向与终端的旋转方向一致，例如在图5b中，当终端左侧向上抬起以围绕Y轴向右旋转时，可以配置视图控件向图像窗口右侧移动。
对于图像窗口中视图控件的位移长度，终端中也可以预先配置好终端相对预设坐标轴的旋转角度与图像窗口中视图控件的位移长度之间的映射关系或计算关系。此外，终端中还可以为图像窗口中视图控件配置不同的位移形式，例如做抛物线式的曲线运动，或者做破浪线式的迂回运动，或者基于运动轨迹上的预设离线点做跳跃运动等。为便于说明和理解，本实施例将以直线运动为例进行说明。
103、按照位移方向及位移长度，显示视图控件在图像窗口中移动的动态效果。
本实施例主要针对图像窗口中的视图控件实现动态移动效果，所述图像窗口为终端提供的可视化部件，可以由终端的操作系统提供该可视化部件的调用接口，操作系统的原生应用程序或者第三方应用程序可以通过接口调用的形式展示图像窗口。所述视图控件是指图像窗口中呈现的图像元素。本实施例中，视图控件可以是图像视图控件，例如图6a中的树木、云彩、手指等，或者，视图控件也可以是文字视图控件，例如图6b中对话框里显示的字符等。这些图像元素是图像窗口的组成部分之一，与一般意义上以文件形式存储的照片不同，图像元素通常以控件的形式存在，在程序开发、运行阶段可以单独进行设计和控制。本实施例中，可以对图像窗口中可以移动的视图控件进行预先设定，本实施例不对视图控件的属性和数量进行限制。
在按照位移方向和位移长度移动视图控件时，终端需要不断绘制并呈现许多静态形式的图像窗口的图像帧，这些图像帧串联起来便实现了视图控件的动态效果。本实施例中，视图控件每产生一个长度步进值的位移变化时，终端绘制并呈现一个对应的图像帧。所述长度步进值是指视图控件移动的最小单位长度，该长度步进值可以预先进行设置。实际应用中可以使用像素点数量度量长度步进值，例如可以将长度步进值设置为10个像素点、5个像素点等。在对动态效果流畅度要求较为严格的情况下，长度步进值的最小粒度可以为1个像素点，此时，假设位移长度为1000个像素点，那么理论上终端需要绘制1000个图像帧以展示视图控件完整的动态效果。
需要说明的是，在终端旋转的过程中，图1所示流程是不断重复执行的，这是由于：方向传感器对终端相对预设坐标轴的旋转角度变化的检测是实时进行的，在终端旋转的过程中，方向传感器不断返回终端相对预设坐标轴的新的旋转角度值。在方向传感器每获得一个新的旋转角度值后，终端就会执行一次图1所示流程，获取该旋转角度，确定相应的位移方向和位移长度，并据此显示相应的动态效果。在终端旋转完毕后，对应该旋转过程的整体动态效果是由该旋转过程中每次旋转角度变化所产生的动态效果的累加。与长度步进值类似的，方向传感器也会按照某一预先设定的角度粒度返回旋转角度，该粒度即为角度步进值。实际应用中，可以将角 度步进值设置为1°，如此，方向传感器每检测到1°的角度变化，终端就会执行一次图1流程，显示对应这1°的视图控件的动态效果。
假设终端围绕Y轴旋转了30°，那么在该旋转过程中，终端不断接收方向传感器返回的终端相对Y轴的旋转角度：1°、2°、3°…29°、30°；在每获得一个新的旋转角度时，终端执行一次图1流程。终端每绕Y轴旋转1°，视图控件向左移动10个像素点的长度，最终当终端完成30°的旋转后，图像窗口中的视图控件向左移动了300个像素点。
本步骤中，采用基于旋转角度的实时反馈对视图控件的显示进行调整的方式，其优势在于能够使得视图控件的动态效果与终端旋转过程保持高度同步，从而保证交互反馈的即时性。
本实施例提供的显示视图控件动态效果的方法，能够通过检测终端相对预设坐标轴的旋转角度捕捉到终端在三维空间中的姿态变化，根据该姿态变化确定出图像窗口中视图控件的位移方向和位移长度，并据此显示视图控件在图像窗口中移动的动态效果。与现有技术中按照预定程序展示动态效果相比，本实施例能够基于终端握持方式的变化调整图像窗口中动画元素的动态效果，从而实现具有人机交互功能的图像展示方式。
进一步的，作为对上述方法的补充，本发明实施例还提供了一种显示视图控件动态效果的方法，如图7所示，该方法至少包括步骤701至步骤704。
701、检测终端相对终端本体上预设坐标轴的旋转角度。
本实施例以终端围绕Y轴旋转为例进行说明，方向传感器对终端相对预设坐标轴旋转的旋转角度变化进行实时检测，获得旋转角度values[0]、values[1]和values[2]，终端使用其中的values[2]执行图7后续步骤。
702、根据旋转角度的正负，确定视图控件的位移方向。
本实施例中，预设配置视图控件的位移方向与预设坐标轴Y轴垂直，即两者夹角值为90°，换言之视图控件将沿着与Y轴垂直的水平线进行移动。终端可以根据旋转角度的正负，确定视图控件的位移方向。如前所述，Y轴的角度旋转范围为[-90°,+90°]。当终端左侧抬起向右旋转时，旋转角度由0°向-90°变化，当终端右侧抬起向左旋转时，旋转角度由0°向 +90°变化。如果预先设置当旋转角度为负数时视图控件向图像窗口左侧移动、旋转角度为正数时视图控件向图像窗口右侧移动，则可以实现轻质物体向上漂浮的设计效果；反之，如果预先设置当旋转角度为负数时视图控件向图像窗口右侧移动、旋转角度为正数时视图控件向图像窗口左侧移动，则可以实现重质物体向下滚动的设计效果。本实施例将以前者配置关系为例进行说明。
703、根据旋转角度确定图像窗口中视图控件的位移长度。
本步骤中，终端可以在预设的映射表中查找与旋转角度对应的位移长度。示例性的，图8给出了一种映射表的示意图，在该表中，每一个旋转角度值对应一个位移长度值，该位移长度的单位为像素点数量。表中的旋转角度按照预设的角度步进值设置，例如当角度步进值为1°时，映射表中应当包括从-90°到+90°共180个(不包括0°)旋转角度与位移长度的映射关系。
需要说明的是，本实施例中终端相对预设坐标轴的旋转角度每发生一个角度步进值就对视图控件进行一次位移，因此上述映射表中对应每个旋转角度的位移长度应当是产生的最后一个角度步进值对应的位移长度变化量。例如当旋转角度-30°对应的位移长度为200像素点时，其含义为当旋转角度从-29°增加到-30°时，将视图控件向左移动200个像素点，并非是指终端从0°旋转到-30°的过程中总共移动的像素点数量，当终端旋转到-30°并停止后，视图控件向左移动的总位移长度应当是映射表中1°到30°共30个旋转角度分别对应的位移长度之和。
实际应用中，可以通过对映射表的修改调整视图控件的移动速度，具体的：
如图9a-1所示的表格和图9a-2所示的曲线，随着旋转角度数值(或称为绝对值)的不断增大，映射表中每一单位角度变化量(对应一个角度步进值)对应的位移长度不断增加，图9a示出的曲线的斜率不断增加。此种情况下，随着终端旋转角度数值的不断变大，视图控件的移动速度越来越快。
与此相反的，如图9b-1所示的表格和图9b-2所示的曲线，随着旋转 角度数值的不断增大，映射表中每一单位角度变化量(对应一个角度步进值)对应的位移长度不断减小，图9b-2示出的曲线的斜率不断减小。此种情况下，随着终端旋转角度数值的不断变大，视图控件的移动速度越来越慢。
在本实施例的一种实现方式中，可以将映射表中每一单位角度变化量对应的位移长度设置为同一个值，这一点可以从图10a所示的表格中得到。由此图10b示出的曲线斜率恒定。此种情况下，视图控件将进行匀速移动。
进一步的，作为对图10a和图10b所示旋转角度与位移长度的映射方式的改进，在本实施例的另一种实现方式中，可以基于如下规则确定位移长度的大小：
Figure PCTCN2017087926-appb-000001
其中，a为角度步进值，例如1°，A为终端相对预设坐标轴的任一坐标轴旋转的旋转角度范围，本实施例中为90°，l为对应每一单位角度增量的位移长度，L为视图控件在单一方向上能够移动的最大距离。通过上述规则，可以将最大距离L平均分配给各个位移长度l，使得视图控件的移动距离与旋转角度之间等比例变动。
进一步的，除了通过预置映射表的方式之外，终端还可以基于预设的计算关系确定每一单位角度变化量对应的视图控件的位移长度。具体的，以视图控件移动速度逐渐放缓为例，包括如下Step1和Step2。
Step1、终端在每获得一个新的旋转角度后，确定与该旋转角度对应的位移长度衰减量。
位移长度衰减量是指本次位移长度相对上一次角度变化量对应的位移长度所减少的部分。由于需要使视图控件的移动速度逐渐放缓，因此需要保证随着旋转角度的不断增加，每一单位角度变化量对应的位移长度不断减少，由此需要计算每一旋转角度对应的位移长度衰减量。
在本实施例中，可以按照下述公式计算位移长度衰减量：
Figure PCTCN2017087926-appb-000002
Y为位移长度衰减量、T为旋转角度、A为初始位移长度、X为最大 位移长度。其中，初始位移长度是指当终端首次产生一个角度步进值的角度变化量时视图控件移动的长度，例如终端绕预设坐标轴中任一坐标轴旋转的旋转角度从0°变化到1°时视图控件的位移长度。由于终端首次产生角度变化量时没有上一次旋转角度的位移长度可以参考，因此对此端点情况需要人工设置一个初始位移长度，本实施例不对初始位移长度的具体数值进行限制。最大位移长度为视图控件在单一方向上能够移动的最大距离，例如视图控件从初始位置向左最多能够移动M个像素点，或者向右最多能够移动N个像素点，该最大位移长度等同于前述视图控件在单一方向上能够移动的最大距离L。实际应用中，应当保证Y小于A，A小于X，X不大于视图控件初始位置到相应图像窗口边缘的距离。
在上述公式中旋转角度单位为“度”，长度单位为“像素点数量”，在进行计算时直接将旋转角度或长度的数值带入即可，无需带入单位。
Step2、将前一旋转角度对应的位移长度与位移长度衰减量相减，获得当前旋转角度对应的位移长度。
由于在终端旋转过程中不断产生新的旋转角度，并且终端基于每个新的旋转角度都要计算对应的位移长度，因此Step2中在计算当前旋转角度对应的位移长度时，终端可以直接获取前一旋转角度对应的位移长度。
较为特殊的，当终端首次产生角度变化量时，即当旋转角度从0°变化到1°时，并无前一旋转角度对应的位移长度可以参考使用，因此在Step2中，针对这一端点情况预设有初始位移长度A，终端将该初始位移长度A确定为旋转角度为1°时对应的位移长度。本实施例不对初始位移长度A的具体数值进行限制，实际应用中，可以根据经验值对其进行设定，较为理想的，可以将初始位移长度A设置为0.4X。
上述方式给出了一种使视图控件移动速度逐渐放缓的位移长度计算方式，与此相反的，当需要使视图控件的移动速度逐渐提高，可以参考上述公式计算位移长度增长量，并在Step2中将前一旋转角度对应的位移长度与位移长度增长量相加，获得当前旋转角度对应的位移长度。
进一步的，在本实施例的另一种实现方式中，还可以对产生动态效果的旋转角度范围进行设置。具体的，可以根据设计需求或用户喜好设定一 个旋转角度变化范围，例如[-30°,+30°]，该范围由-30°和+30°两个旋转角度阈值界定。如果终端旋转的角度超过该旋转角度阈值范围，则视图控件不再进一步移动，停留在完成最后一次位移(对应-30°或+30°的位移长度)时的位置。具体的，终端在检测到旋转角度之后判断该旋转角度是否超过预设的旋转角度阈值范围，如果判断结果为是，则终端直接将位移长度确定为0，并取消执行上述确定位移长度的步骤。
与上述方式类似的，终端也可以在判断旋转角度未超过旋转角度阈值范围时将位移长度确定为0，而当旋转角度超过旋转角度阈值范围时通过映射表或公式计算位移长度，从而使终端只有在旋转角度超过一定程度时才对视图控件进行移动，由此避免细微动作导致的误操作，节省终端的处理资源。
需要说明的是，前述将确定位移方向和确定位移长度的过程区分为步骤702和步骤703仅为便于表述，本实施例不对步骤702和步骤703的执行顺序进行限制。实际应用中，终端在执行完步骤701后，也可以先执行步骤703再执行步骤702，或者同时执行步骤702和步骤703。
704、按照位移方向及位移长度，采用多缓冲机制对图像窗口的图像帧进行显示。
如前所述，终端需要不断绘制图像帧以展示视图控件移动的动态效果。实际应用中，当采用传统的无缓冲绘图机制时，终端直接在图像窗口上绘制图像帧。由于绘制过程需要占用图像窗口UI(User Interface，简称用户界面)的主线程，会对主线程造成临时阻塞，无法对用户操作进行响应，因此本实施例可以采用单缓冲绘图机制，即创建一个画布(Canvas)，通过独立于主线程的另一线程在该画布上进行图像帧的绘制。在绘制完成后，再将该画布上的内容迁移到图像窗口的绘图表面上进行显示，由此避免了对图像窗口UI主线程的长期占用，使得主线程能够及时响应用户的操作事件。
进一步的，考虑到当图像内容较为复杂时，单缓冲机制的处理能力可能无法保证动态效果的流畅性。为避免图像出现卡顿，在本实施例的另一种实现方式中，可以采用多缓冲机制进行绘图，即创建多个画布，由不同 的线程分别负责不同画布上的图像帧绘制和图像帧显示。当一个画布上的图像帧在图像窗口中绘制并显示时，其余画布进行其他图像帧的绘制，各个画布轮询将绘制的图像帧迁移到图像窗口的绘图表面上进行显示。理论上画布数量越多，终端的显示性能越优越。
进一步的，当兼顾处理器的线程资源消耗时，可以采用双缓冲绘图机制。终端创建独立于图像窗口绘图表面的第一画布和第二画布，然后首先在第一画布上绘制一个图像帧，绘制完成后将第一画布图像帧迁移到图像窗口绘图表面上进行显示。并且在显示第一画布图像帧的同时在第二画布上绘制下一图像帧。在第二画布绘制完毕后，将第二画布图像帧迁移到图像窗口绘图表面上进行显示，并在显示第二画布图像帧的同时在第一画布上绘制再下一个图像帧，如此反复，两画布交替进行图像帧的显示和绘制。
实际应用中，可以使用JAVA中的SurfaceView组件执行步骤704。SurfaceView组件是一种支持多缓冲机制的动态绘图组件，一方面可以实现复杂而高效的UI动态效果，另一方面又不会导致用户输入得不到及时响应。终端在获得位移方向和位移长度后，按照位移方向将位移长度转换为视图控件相对图像窗口左边缘的像素点数量，然后将该像素点数量赋值给SurfaceView组件中的paddingLeft参数，SurfaceView组件根据paddingLeft参数进行新图像帧的绘制。目前，4.1以前版本的SurfaceView组件默认支持双缓冲绘图机制，4.2以后版本的SurfaceView组件默认支持三缓冲绘图机制。实际应用中，可以通过修改组件代码最高扩展到32个画布。
上述SurfaceView组件仅为示例性说明，不作为对本实施例适用的操作系统、组件类型的具体限制。实际应用中，其他具有多缓冲绘图机制的组件、接口、配置文件程序等均可应用于本实施例所提供的方案中。
以上对本发明实施例的方法部分进行了说明，下面给出本发明实施例的几种应用场景：
1、手机围绕Y轴旋转
本场景中，配置视图控件的位移方向垂直于Y轴，当旋转角度小于0°时视图控件的位移方向朝向图像窗口左边、当旋转角度大于0°时视图控件的位移方向朝向图像窗口右边，由此形成轻质物体向上漂浮的动态效果。
如图11a所示，当手机左侧逐渐抬起时，产生小于0°的旋转角度，云彩向左侧进行直线移动；如图11b所示，当手机右侧逐渐抬起时，产生大于0°的旋转角度，云彩向右侧进行直线移动。
2、手机围绕X轴旋转
本场景中，配置视图控件的位移方向垂直于X轴，当旋转角度小于0°时视图控件的位移方向朝向图像窗口底部、当旋转角度大于0°时视图控件的位移方向朝向图像窗口顶部，由此形成重质物体向下滚动的动态效果。
如图12a所示，当手机顶部逐渐抬起时，产生小于0°的旋转角度，小球向图像窗口底部进行直线移动；如图12b所示，当手机底部逐渐抬起时，产生大于0°的旋转角度，小球向图像窗口顶部进行直线移动。
3、手机围绕Z轴旋转
本场景中，配置视图控件的位移方向与旋转方向如下，当手机绕Z轴的旋转方向为顺时针方向且旋转角度递增时视图控件的位移方向朝向图像窗口左边、当手机绕Z轴的旋转方向为逆时针方向且旋转角度递减时视图控件的位移方向朝向图像窗口右边，由此形成视图控件相对旋转方向反向运动的动态效果。
如图13a所示，当手机放置于水平桌面上并且顺时针旋转时，旋转角度逐渐递增，云彩向图像窗口左边移动；如图13b所示，当手机在水平桌面上逆时针旋转时，旋转角度逐渐递减，云彩向图像窗口右边移动。
4、手机同时围绕X轴、Y轴旋转
本场景中，当手机围绕X轴旋转时，配置视图控件的位移方向垂直于X轴，当旋转角度小于0°时视图控件的位移方向朝向图像窗口顶部、当旋转角度大于0°时视图控件的位移方向朝向图像窗口底部，由此形成轻质物体向上漂浮的动态效果。当手机围绕Y轴旋转时，配置视图控件的位移方向垂直于Y轴，当旋转角度小于0°时视图控件的位移方向朝向图像窗口左边、当旋转角度大于0°时视图控件的位移方向朝向图像窗口右边，由此形成轻质物体向上漂浮的动态效果。
当手机左上角逐渐抬起时，X轴上产生小于0°的旋转角度，云彩向图像窗口顶部进行直线移动，同时Y轴上产生小于0°的旋转角度，云彩 向图像窗口左边进行直线移动。两个方向合成后的移动轨迹如图14a所示，云彩朝向图像窗口左上角移动。与此类似的，当手机右下角逐渐抬起时，如图14b所示云彩朝向图像窗口右下角移动。
5、手机同时围绕X轴、Z轴旋转
本场景中，当手机围绕X轴旋转时，配置视图控件的位移方向垂直于X轴，当旋转角度小于0°时视图控件的位移方向朝向图像窗口顶部、当旋转角度大于0°时视图控件的位移方向朝向图像窗口底部，由此形成轻质物体向上漂浮的动态效果。当手机围绕Z轴旋转时，配置视图控件的位移方向与旋转方向相反，当逆时针旋转时位移方向朝向图像窗口右边、当顺时针旋转时位移方向朝向图像窗口左边。
当手机顶部逐渐抬起并且围绕Z轴逆时针旋转时，云彩的合成动态效果如图15a所示；当手机底部逐渐抬起并且围绕Z轴顺时针旋转时，云彩的合成动态效果如图15b所示。
6、手机同时围绕Y轴、Z轴旋转
7、手机同时围绕X轴、Y轴、Z轴旋转
6、7两种情况可以参照场景5给出的合成方式实现，此处不再赘述。
进一步的，作为对上述方法的实现，本发明实施例还提供了一种显示视图控件动态效果的装置。该装置可以位于终端内部，也可以集成于终端外部，并与终端建立有数据交互关系。如图16所示，该装置至少包括：检测单元161、确定单元162、显示单元163，其中，
检测单元161，用于检测终端相对终端本体上预设坐标轴的旋转角度；
确定单元162，用于根据旋转角度确定图像窗口中视图控件的位移方向和位移长度，图像窗口为终端提供的可视化部件；
显示单元163，用于按照位移方向及位移长度，显示视图控件在图像窗口中移动的动态效果。
进一步的，位移方向与预设坐标轴垂直；
如图17所示，确定单元162，包括：
第一确定模块1621，用于根据旋转角度的正负，确定视图控件的位移方向。
进一步的，如图17所示，确定单元162包括第二确定模块1622，用于：
确定与旋转角度对应的位移长度衰减量；
将前一旋转角度对应的位移长度与位移长度衰减量相减，获得当前旋转角度对应的位移长度。
进一步的，第二确定模块1622用于当首次产生角度变化时，将预设的初始位移长度确定为位移长度。
进一步的，第二确定模块1622用于按照下述公式计算位移长度衰减量：
Figure PCTCN2017087926-appb-000003
Y为位移长度衰减量、T为旋转角度、A为初始位移长度、X为最大位移长度，其中，A小于X，Y小于A。
进一步的，确定单元162用于在预设的映射表中查找与旋转角度对应的位移长度。
进一步的，检测单元161检测的旋转角度的数值与确定单元162确定的位移长度之间呈线性映射关系。
进一步的，确定单元162用于若旋转角度超过预设的角度阈值，则将位移长度确定为0。
进一步的，显示单元163，用于采用多缓冲机制对图像窗口的图像帧进行显示。
进一步的，显示单元163采用双缓冲机制；
显示单元163用于：
在显示第一画布图像帧的同时在第二画布上绘制下一图像帧；
在第二画布绘制完毕后，显示第二画布图像帧并同时在第一画布上绘制再下一个图像帧，两画布交替进行图像帧的显示和绘制。
进一步的，作为对上述方法的实现，本发明实施例还提供了一种显示视图控件动态效果的装置。该装置可以位于终端内部，也可以集成于终端外部，并与终端建立有数据交互关系。如图18所示，该装置包括：方向传感器181、处理器182、显示器183、存储器184以及总线185，其中：
方向传感器181，被配置为检测终端相对终端本体上预设坐标轴的旋转角度；
处理器182，被配置为根据旋转角度确定图像窗口中视图控件的位移方向和位移长度，图像窗口为终端提供的可视化部件；
显示器183，被配置为按照位移方向及位移长度，显示视图控件在图像窗口中移动的动态效果；
存储器184，被配置为存储处理器182的可执行指令；
总线185，被配置为耦接方向传感器181、处理器182、显示器183及存储器184。
进一步的，处理器182被配置为根据旋转角度的正负，确定视图控件的位移方向。
进一步的，处理器182被配置为：
确定与旋转角度对应的位移长度衰减量；
将前一旋转角度对应的位移长度与位移长度衰减量相减，获得当前旋转角度对应的位移长度。
进一步的，处理器182被配置为：
当首次产生角度变化时，将预设的初始位移长度确定为位移长度。
进一步的，处理器182被配置为：
按照下述公式计算位移长度衰减量：
Figure PCTCN2017087926-appb-000004
Y为位移长度衰减量、T为旋转角度、A为初始位移长度、X为最大位移长度，其中，A小于X，Y小于A。
进一步的，处理器182被配置为：
在预设的映射表中查找与旋转角度对应的位移长度。
进一步的，处理器182被配置为旋转角度的数值与位移长度之间呈线性映射关系。
进一步的，处理器182被配置为：
若旋转角度超过预设的角度阈值，则将位移长度确定为0。
进一步的，显示器183被配置为：
采用多缓冲机制对图像窗口的图像帧进行显示。
进一步的，显示器183被配置为采用双缓冲机制；
显示器183被配置为：
在显示第一画布图像帧的同时在第二画布上绘制下一图像帧；
在第二画布绘制完毕后，显示第二画布图像帧并同时在第一画布上绘制再下一个图像帧，两画布交替进行图像帧的显示和绘制。
本发明实施例提供的显示视图控件动态效果的装置，能够通过检测终端相对预设坐标轴的旋转角度捕捉到终端在三维空间中的姿态变化，根据该姿态变化确定出图像窗口中视图控件的位移方向和位移长度，并据此显示视图控件在图像窗口中移动的动态效果。与现有技术中按照预定程序展示动态效果相比，本发明实施例能够基于终端握持方式的变化调整图像窗口中动画元素的动态效果，从而实现具有人机交互功能的图像展示方式。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
可以理解的是，上述方法及装置中的相关特征可以相互参考。另外，上述实施例中的“第一”、“第二”等是用于区分各实施例，而并不代表各实施例的优劣。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。
本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的发明名称(如确定网站内链接等级的装置)中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质 上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (15)

  1. 一种显示视图控件动态效果的方法，其中，所述方法包括：
    检测终端相对终端本体上预设坐标轴的旋转角度；
    根据所述旋转角度确定图像窗口中视图控件的位移方向和位移长度，所述图像窗口为终端提供的可视化部件；
    按照所述位移方向及所述位移长度，显示所述视图控件在所述图像窗口中移动的动态效果。
  2. 根据权利要求1所述的方法，其中，所述位移方向与所述预设坐标轴垂直；
    所述根据所述旋转角度确定图像窗口中视图控件的位移方向，包括：
    根据所述旋转角度的正负，确定所述视图控件的位移方向。
  3. 根据权利要求1或2所述的方法，其中，所述根据所述旋转角度确定图像窗口中视图控件的位移长度，包括：
    确定与所述旋转角度对应的位移长度衰减量；
    将前一旋转角度对应的位移长度与所述位移长度衰减量相减，获得当前旋转角度对应的位移长度。
  4. 根据权利要求3所述的方法，其中，所述根据所述旋转角度确定图像窗口中视图控件的位移长度，包括：
    当首次产生角度变化时，将预设的初始位移长度确定为所述位移长度。
  5. 根据权利要求3所述的方法，其中，所述确定与所述旋转角度对应的位移长度衰减量，包括：
    按照下述公式计算所述位移长度衰减量：
    Figure PCTCN2017087926-appb-100001
    Y为位移长度衰减量、T为旋转角度、A为初始位移长度、X为最大位移长度，其中，A小于X，Y小于A。
  6. 根据权利要求1或2所述的方法，其中，所述根据所述旋转角度确定图像窗口中视图控件的位移长度，包括：
    在预设的映射表中查找与所述旋转角度对应的位移长度。
  7. 根据权利要求6所述的方法，其中，所述旋转角度的数值与所述位移长度之间呈线性映射关系。
  8. 根据权利要求1或2所述的方法，其中，所述根据所述旋转角度确定图像窗口中视图控件的位移长度，包括：
    若所述旋转角度超过预设的角度阈值，则将所述位移长度确定为0。
  9. 根据权利要求1至8中任一项所述的方法，其中，所述显示所述视图控件在所述图像窗口中移动的动态效果，包括：
    采用多缓冲机制对所述图像窗口的图像帧进行显示。
  10. 根据权利要求9所述的方法，其中，所述多缓冲机制为双缓冲机制；
    所述采用多缓冲机制对所述图像窗口的图像帧进行显示，包括：
    在显示第一画布图像帧的同时在第二画布上绘制下一图像帧；
    在第二画布绘制完毕后，显示第二画布图像帧并同时在第一画布上绘制再下一个图像帧，两画布交替进行图像帧的显示和绘制。
  11. 一种显示视图控件动态效果的装置，其中，所述装置包括：
    检测单元，用于检测终端相对终端本体上预设坐标轴的旋转角度；
    确定单元，用于根据所述旋转角度确定图像窗口中视图控件的位移方向和位移长度，所述图像窗口为终端提供的可视化部件；
    显示单元，用于按照所述位移方向及所述位移长度，显示所述视图控件在所述图像窗口中移动的动态效果。
  12. 根据权利要求11所述的装置，其中，所述位移方向与所述预设坐标轴垂直；
    所述确定单元，包括：
    第一确定模块，用于根据所述旋转角度的正负，确定所述视图控件的位移方向。
  13. 根据权利要求11或12所述的装置，其中，所述确定单元，包括第二确定模块，用于：
    确定与所述旋转角度对应的位移长度衰减量；
    将前一旋转角度对应的位移长度与所述位移长度衰减量相减，获得当前旋转角度对应的位移长度。
  14. 根据权利要求13所述的装置，其中，所述第二确定模块用于当首次产生角度变化时，将预设的初始位移长度确定为所述位移长度。
  15. 一种显示视图控件动态效果的装置，其中，所述装置包括：
    方向传感器，被配置为检测终端相对终端本体上预设坐标轴的旋转角度；
    处理器，被配置为根据所述旋转角度确定图像窗口中视图控件的位移方向和位移长度，所述图像窗口为终端提供的可视化部件；
    显示器，被配置为按照所述位移方向及所述位移长度，显示所述视图控件在所述图像窗口中移动的动态效果；
    存储器，被配置为存储所述处理器的可执行指令；
    总线，被配置为耦接所述方向传感器、所述处理器、所述显示器及所述存储器。
PCT/CN2017/087926 2016-06-15 2017-06-12 显示视图控件动态效果的方法及装置 WO2017215564A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201610435815.1 2016-06-15
CN201610435815.1A CN106155474A (zh) 2016-06-15 2016-06-15 显示视图控件动态效果的方法及装置

Publications (1)

Publication Number Publication Date
WO2017215564A1 true WO2017215564A1 (zh) 2017-12-21

Family

ID=57353070

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/087926 WO2017215564A1 (zh) 2016-06-15 2017-06-12 显示视图控件动态效果的方法及装置

Country Status (2)

Country Link
CN (1) CN106155474A (zh)
WO (1) WO2017215564A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113474750A (zh) * 2020-03-20 2021-10-01 西安诺瓦星云科技股份有限公司 屏幕显示的控制方法、装置和系统

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106155474A (zh) * 2016-06-15 2016-11-23 广州神马移动信息科技有限公司 显示视图控件动态效果的方法及装置
CN107193442A (zh) * 2017-06-14 2017-09-22 广州爱九游信息技术有限公司 图形显示方法、图形显示装置、电子设备和存储介质
CN109284019A (zh) * 2017-07-19 2019-01-29 精元电脑股份有限公司 旋转输入设备
KR102232045B1 (ko) 2019-01-08 2021-03-25 삼성전자주식회사 전자 장치, 전자 장치의 제어 방법 및 컴퓨터 판독 가능 매체.
JP2020129263A (ja) * 2019-02-08 2020-08-27 セイコーエプソン株式会社 表示システム、情報処理装置の制御プログラム、及び情報処理装置の制御方法
CN111880711B (zh) * 2020-07-31 2022-02-01 Oppo广东移动通信有限公司 显示控制方法、装置、电子设备及存储介质
CN112130719B (zh) * 2020-08-28 2022-06-10 北京达佳互联信息技术有限公司 页面显示方法、装置、系统、电子设备及存储介质
CN112416218B (zh) * 2020-09-08 2023-12-29 上海哔哩哔哩科技有限公司 虚拟卡片的显示方法、装置、计算机设备及存储介质
CN112631501A (zh) * 2020-12-30 2021-04-09 深圳市鸿合创新信息技术有限责任公司 一种触控功能控件的显示方法、显示装置及电子设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101369210A (zh) * 2008-08-22 2009-02-18 深圳华为通信技术有限公司 一种调整用户界面元素的方法及装置
CN102141846A (zh) * 2011-03-09 2011-08-03 中兴通讯股份有限公司 一种直觉式浏览内容的方法及移动终端
CN105242826A (zh) * 2015-09-21 2016-01-13 北京元心科技有限公司 一种在移动设备上实现3d动态壁纸的方法和装置
CN105335118A (zh) * 2014-08-08 2016-02-17 北京搜狗科技发展有限公司 一种电子设备控件的显示方法和装置
CN106155474A (zh) * 2016-06-15 2016-11-23 广州神马移动信息科技有限公司 显示视图控件动态效果的方法及装置

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101404380B1 (ko) * 2012-09-24 2014-06-09 주식회사 팬택 모바일 디바이스 및 모바일 디바이스의 화면 방향 전환 방법
CN103279290B (zh) * 2013-05-29 2016-06-15 广东欧珀移动通信有限公司 移动设备显示方法和移动设备
JP6252815B2 (ja) * 2014-06-06 2017-12-27 華為技術有限公司Ｈｕａｗｅｉ Ｔｅｃｈｎｏｌｏｇｉｅｓ Ｃｏ．，Ｌｔｄ． ウィンドウ表示位置を調節するための方法、および端末

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101369210A (zh) * 2008-08-22 2009-02-18 深圳华为通信技术有限公司 一种调整用户界面元素的方法及装置
CN102141846A (zh) * 2011-03-09 2011-08-03 中兴通讯股份有限公司 一种直觉式浏览内容的方法及移动终端
CN105335118A (zh) * 2014-08-08 2016-02-17 北京搜狗科技发展有限公司 一种电子设备控件的显示方法和装置
CN105242826A (zh) * 2015-09-21 2016-01-13 北京元心科技有限公司 一种在移动设备上实现3d动态壁纸的方法和装置
CN106155474A (zh) * 2016-06-15 2016-11-23 广州神马移动信息科技有限公司 显示视图控件动态效果的方法及装置

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113474750A (zh) * 2020-03-20 2021-10-01 西安诺瓦星云科技股份有限公司 屏幕显示的控制方法、装置和系统
CN113474750B (zh) * 2020-03-20 2023-12-08 西安诺瓦星云科技股份有限公司 屏幕显示的控制方法、装置和系统

Also Published As

Publication number Publication date
CN106155474A (zh) 2016-11-23

Similar Documents

Publication Publication Date Title
WO2017215564A1 (zh) 显示视图控件动态效果的方法及装置
US11227446B2 (en) Systems, methods, and graphical user interfaces for modeling, measuring, and drawing using augmented reality
US11727650B2 (en) Systems, methods, and graphical user interfaces for displaying and manipulating virtual objects in augmented reality environments
US11163417B2 (en) Systems, methods, and graphical user interfaces for interacting with augmented and virtual reality environments
DK180842B1 (en) Devices, procedures, and graphical user interfaces for System-Wide behavior for 3D models
US10068383B2 (en) Dynamically displaying multiple virtual and augmented reality views on a single display
US10514753B2 (en) Selectively applying reprojection processing to multi-layer scenes for optimizing late stage reprojection power
JP2019164844A5 (zh)
WO2021062098A4 (en) Devices, methods, and graphical user interfaces for interacting with three-dimensional environments
JP4608326B2 (ja) 指示動作認識装置及び指示動作認識プログラム
US20180276824A1 (en) Selective application of reprojection processing on layer sub-regions for optimizing late stage reprojection power
JP6110011B2 (ja) スクロールするためのチルティング
US9576393B1 (en) Dynamic rendering of soft shadows for interface elements
US20220129079A1 (en) Method and system for viewing virtual elements
US9092897B2 (en) Method and apparatus for displaying interface elements
US20140015826A1 (en) Method and apparatus for synchronizing an image with a rendered overlay
CN110489027B (zh) 手持输入设备及其指示图标的显示位置控制方法和装置
US9411412B1 (en) Controlling a computing device based on user movement about various angular ranges
US11748966B2 (en) Virtual paper
US20160231826A1 (en) Three-Dimensional Tilt and Pan Navigation Using a Single Gesture
US9665249B1 (en) Approaches for controlling a computing device based on head movement
US10175780B2 (en) Behind-display user interface
JP4563723B2 (ja) 指示動作認識装置及び指示動作認識プログラム
WO2023131022A1 (zh) 显示控制方法、电子设备及可读存储介质
CN115700455A (zh) 一种camer模组处理方法

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17812675

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 17812675

Country of ref document: EP

Kind code of ref document: A1

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 190819)

122 Ep: pct application non-entry in european phase

Ref document number: 17812675

Country of ref document: EP

Kind code of ref document: A1