WO2024027820A1 - 基于图像的动画生成方法、装置、设备及存储介质 - Google Patents

基于图像的动画生成方法、装置、设备及存储介质 Download PDF

Info

Publication number
WO2024027820A1
WO2024027820A1 PCT/CN2023/111187 CN2023111187W WO2024027820A1 WO 2024027820 A1 WO2024027820 A1 WO 2024027820A1 CN 2023111187 W CN2023111187 W CN 2023111187W WO 2024027820 A1 WO2024027820 A1 WO 2024027820A1
Authority
WO
WIPO (PCT)
Prior art keywords
curve
motion
motion vector
angle
information
Prior art date
Application number
PCT/CN2023/111187
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 WO2024027820A1 publication Critical patent/WO2024027820A1/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation

Definitions

  • the embodiments of the present disclosure relate to the field of image processing technology, for example, to an image-based animation generation method, device, equipment and storage medium.
  • Embodiments of the present disclosure provide an image-based animation generation method, device, equipment and storage medium, which can generate a motion animation of an image, so that the generated motion animation transitions smoothly and improves the display effect of the animation.
  • embodiments of the present disclosure provide an image-based animation generation method, including:
  • embodiments of the present disclosure also provide an image-based animation generation device, including:
  • the starting and ending point determination module is configured to determine the starting point and ending point of the target image in the set coordinate system
  • a motion vector determination module configured to determine a motion vector of the target image according to the starting point and the ending point; wherein the motion vector is a direction vector from the starting point to the ending point;
  • a motion curve determination module configured to determine the motion curve of the target image according to the motion vector; wherein the motion curve includes a transverse motion curve and a longitudinal motion curve;
  • An animation generation module is configured to control the target image to move from the starting point to the end point according to the motion curve, and generate a motion animation of the target image.
  • embodiments of the present disclosure also provide an electronic device, where the electronic device includes:
  • a storage device arranged to store at least one program
  • the at least one processor When the at least one program is executed by the at least one processor, the at least one processor is caused to implement the image-based animation generation method as described in the embodiment of the present disclosure.
  • embodiments of the present disclosure further provide a storage medium containing computer-executable instructions that, when executed by a computer processor, are used to perform image-based animation as described in embodiments of the present disclosure. Generate method.
  • Figure 1 is a schematic flowchart of an image-based animation generation method provided by an embodiment of the present disclosure
  • Figure 2 is an example diagram of a motion vector provided by an embodiment of the present disclosure
  • Figure 3 is a schematic diagram of a bounding box of a motion vector provided by an embodiment of the present disclosure
  • Figure 4 is a schematic diagram of direction information of a motion vector provided by an embodiment of the present disclosure.
  • Figure 5 is the relative position information between a motion curve and a motion vector provided by an embodiment of the present disclosure.
  • Figure 6 is a schematic diagram of determining relative position information between a motion curve and the motion vector provided by an embodiment of the present disclosure
  • Figure 7 is an example diagram of motion vector angle information provided by an embodiment of the present disclosure.
  • Figure 8 is a schematic structural diagram of an image-based animation generation device provided by an embodiment of the present disclosure.
  • FIG. 9 is a schematic structural diagram of an electronic device provided by an embodiment of the present disclosure.
  • the term “include” and its variations are open-ended, ie, “including but not limited to.”
  • the term “based on” means “based at least in part on.”
  • the term “one embodiment” means “at least one embodiment”; the term “another embodiment” means “at least one additional embodiment”; and the term “some embodiments” means “at least some embodiments”. Relevant definitions of other terms will be given in the description below.
  • a prompt message is sent to the user to clearly remind the user that the operation requested will require the acquisition and use of the user's personal information. Therefore, users can autonomously choose whether to provide personal information to software or hardware such as electronic devices, applications, servers or storage media that perform the operations of the technical solution of the present disclosure based on the prompt information.
  • the method of sending prompt information to the user may be, for example, a pop-up window, and the prompt information may be presented in the form of text in the pop-up window.
  • the pop-up window can also contain a selection control for the user to choose "agree” or "disagree” to provide personal information to the electronic device.
  • Figure 1 is a schematic flowchart of an image-based animation generation method provided by an embodiment of the disclosure.
  • the embodiment of the disclosure is suitable for generating motion animation of images on the screen.
  • This method can be executed by an image-based animation generation device.
  • the device can be implemented in the form of software and/or hardware, optionally, through electronic equipment, and the electronic equipment can be a mobile terminal, a personal computer (Personal Computer, PC) or a server, etc.
  • PC Personal Computer
  • the method includes:
  • S110 Determine the starting point and ending point of the target image in the set coordinate system.
  • the set coordinate system may be a normalized device space coordinate system (normalized device coordinates, NDC).
  • the starting point may be the coordinates of the center point of the target image in the starting position
  • the end point may be the coordinates of the center point of the target image in the ending position.
  • the matrix of the camera coordinate system is represented by V
  • the matrix of the cropping coordinate system is represented by P.
  • the process of determining the starting point and ending point of the target image in the set coordinate system can be: first obtain the target image Like the starting point coordinates and the ending point coordinates in the world coordinate system, then multiply the starting point coordinates and the ending point coordinates by the transformation matrix VP respectively to obtain the starting point coordinates and ending point coordinates in the clipping coordinate system, and then calculate the clipping coordinate system
  • the starting point coordinates and the ending point coordinates under the NDC coordinate system are homogeneously transformed to obtain the starting point coordinates and the ending point coordinates under the NDC coordinate system.
  • the coordinates in the clipping coordinate system are four-dimensional coordinates, which can be expressed as (x, y, z, w).
  • the method of homogeneously transforming the starting point coordinates and the ending point coordinates in the clipping coordinate system can be: divide x, y and z by w respectively to obtain the coordinates in the NDC coordinate system.
  • the range of the three-dimensional coordinates in the NDC coordinate system is [-1,1], that is, the NDC coordinate system can be understood as a cube with a side length of 2.
  • the x coordinate and the y coordinate are used for calculation.
  • determining the motion curve in the NDC coordinate system can naturally integrate the curved motion in the NDC space with the rendering and mirroring effects of the three-dimensional space.
  • S120 Determine the motion vector of the target image based on the starting point and the ending point.
  • the motion vector is a direction vector from the starting point to the ending point, and the motion vector can be a two-dimensional vector that subtracts the coordinates of the ending point from the coordinates of the starting point.
  • Figure 2 is an example diagram of motion vectors in this embodiment. As shown in Figure 2, point A is the starting point and point B is the ending point. Then the vector from point A to point B is the motion of the target image. vector.
  • the motion curve includes a transverse motion curve and a longitudinal motion curve.
  • the horizontal motion curve can characterize the movement trajectory of the target image along the horizontal direction
  • the longitudinal motion curve can characterize the movement trajectory of the target image along the longitudinal direction.
  • the method of determining the motion curve of the target image based on the motion vector may be: obtaining the direction information of the motion vector, the angle information with the coordinate axis, and the bounding box information; determining based on the direction information, the angle information, and the bounding box information.
  • the motion curve of the target image may be: obtaining the direction information of the motion vector, the angle information with the coordinate axis, and the bounding box information; determining based on the direction information, the angle information, and the bounding box information.
  • the bounding box is a rectangular bounding box parallel to the coordinate axis.
  • Figure 3 is a bounding box of the motion vector in this embodiment.
  • the upper and lower sides of the bounding box are parallel to the horizontal axis, and the left and right sides of the bounding box are parallel to the vertical axis.
  • the axes are parallel.
  • the direction information includes the motion vector pointing to the first quadrant area, The motion vector points to the second quadrant area, the motion vector points to the third quadrant area, and the motion vector points to any one of the fourth quadrant areas;
  • the angle information includes the angle between the motion vector and the horizontal axis greater than the set threshold and the angle between the motion vector and the vertical axis.
  • the angle is greater than the set threshold, the angle between the motion vector and the horizontal axis is less than the set threshold, or the angle between the motion vector and the vertical axis is less than the set threshold;
  • the bounding box information includes the size information of the bounding box, and the bounding box The distance between the sides of the box and the border of the screen; the size information includes height and width, and the sides of the bounding box include the upper side, lower side, left side, and right side.
  • the height and width of the bounding box can be values after screen ratio conversion. For example, assuming that the height calculated from the starting point coordinates and the ending point coordinates in the NDC coordinate system is h, the width is w, and assuming the screen aspect ratio is a/b, the converted height is h*a/b , the width is still w; or the converted height is still h and the width is w*b/a.
  • the set threshold can be set to any value between 20-25 degrees, for example, set to 22.5 degrees.
  • the way to obtain the direction information of the motion vector may be to determine the direction information of the motion vector based on the sign of the transverse component and the longitudinal component of the motion vector. If the transverse component is positive and the longitudinal component is positive, the motion vector points to the first quadrant area; if the transverse component is negative and the longitudinal component is positive, the motion vector points to the second quadrant area; if the transverse component is negative, the longitudinal component is negative , the motion vector points to the third quadrant area; if the transverse component is positive and the longitudinal component is negative, the motion vector points to the fourth quadrant area.
  • FIG. 4 is a schematic diagram showing the direction information of the motion vector in this embodiment.
  • the angle information between the motion vector and the coordinate axis can be that the motion vector is respectively related to the positive vector of the horizontal axis (1, 0), the negative vector of the horizontal axis (-1, 0), and the positive vector of the vertical axis (0, 1). and the angle between the negative vertical axis vector (0, -1).
  • the method of obtaining the angle information between the motion vector and the coordinate axis may be: calculating the dot product of the motion vector and the positive horizontal axis vector, the negative horizontal axis vector, the positive vertical axis vector and the negative vertical axis vector respectively.
  • the angle information between the motion vector and the coordinate axis is determined based on the dot product result.
  • the direction information of the motion vector, the angle information with the coordinate axis and the bounding box information are obtained, which is beneficial to the accuracy of subsequent motion curve determination.
  • the method may be: determining the relative position information between the motion curve and the motion vector based on the bounding box information; determining the motion curve of the target image based on the direction information, angle information and relative position information.
  • the relative position information includes that the motion curve is located on the first side or the second side of the motion vector.
  • the relative position information can be understood as being based on the motion vector and located on both sides of the motion vector.
  • the first side may be located on the left side of the motion vector, and the second side may be located on the right side of the motion vector.
  • Figure 5 is a schematic diagram of the relative position information between the motion curve and the motion vector in this embodiment.
  • the curve AD is located on the first side (left side) of the motion vector AB.
  • curve AC is the curve located on the second side (right side) of motion vector AB.
  • the motion curve of the target image is determined based on the direction information, angle information and relative position information, so that the determined motion curve is located within the screen, which can prevent the target image from being cropped by the screen during movement and affecting the display effect.
  • the method of determining the relative position information between the motion curve and the motion vector based on the bounding box information may be: if the height of the bounding box is greater than or equal to the width, obtain the first distance between the left side of the bounding box and the left edge of the screen.
  • the second comparison result between the first distance and the second distance, and determine the relative position information between the motion curve and the motion vector based on the first comparison result; If the height of the bounding box is less than the width, obtain the third distance between the upper side of the bounding box and the upper edge of the screen, and the fourth distance between the lower side of the bounding box and the lower edge of the screen; obtain the distance between the third distance and the fourth distance.
  • the second comparison result is obtained, and the relative position information between the motion curve and the motion vector is determined according to the second comparison result.
  • the first comparison result may include that the first distance is greater than or equal to the second distance, or the first distance is less than the second distance.
  • the second comparison result may include that the third distance is greater than or equal to the fourth distance, or the third distance is less than the fourth distance.
  • the height of the bounding box is greater than or equal to the width, it indicates that the vertical distance of the target image movement is greater than the horizontal distance. At this time, it is determined by the distance between the bounding box and the vertical border of the screen (including the left border of the screen and the right border of the screen). Relative position information between the motion curve and the motion vector. If the height of the bounding box is smaller than the width, it means that the vertical distance of the target image movement is smaller than the horizontal distance. At this time, the motion curve is determined by the distance between the bounding box and the horizontal boundary of the screen (including the upper boundary of the screen and the lower boundary of the screen). Relative position information between the line and the motion vector.
  • the method of determining the relative position information between the motion curve and the motion vector according to the first comparison result may be: if the first distance is greater than or equal to the second distance, the motion curve is located on the side where the left side is located; if the first distance is greater than or equal to the second distance, the motion curve is located on the side where the left side is; If the first distance is less than the second distance, the motion curve is located on the side where the right side is located.
  • the method of determining the relative position information between the motion curve and the motion vector according to the second comparison result may be: if the third distance is greater than or equal to the fourth distance, the motion curve is located on the side where the upper side is located; if the third distance is less than the third distance, the motion curve is located on the side where the upper side is located; Four distances, the motion curve is located on the side where the lower side is.
  • the first distance is greater than the second distance, it means that there is a larger space on the side where the left side of the bounding box is located, and the motion curve is set on the side where the left side is located, that is, the target image is on the left side.
  • the side on which the edge is located moves.
  • the first distance is smaller than the second distance, it means that there is a larger space on the side where the right side of the bounding box is located, and the motion curve is set on the side where the right side is located, that is, the target image is located on the right side of the bounding box. side movement.
  • the third distance is greater than the fourth distance, it means that there is a larger space on the side where the upper side of the bounding box is located.
  • Figure 6 is a schematic diagram for determining the relative position information between the motion curve and the motion vector in this embodiment.
  • the bounding box is calculated The third distance L3 between the upper side of the bounding box and the upper boundary of the screen, and the fourth distance L4 between the lower side of the bounding box and the lower boundary of the screen.
  • L3 is greater than L4
  • the motion curve is set on the upper side.
  • the side where the motion vector AB is located is the first side (left side) of the motion vector AB.
  • setting the motion curve in a side area with a larger space can prevent the target image from being cropped by the screen during motion.
  • the angle information includes that the angle between the motion vector and the horizontal axis is greater than the set threshold and the angle between the motion vector and the vertical axis is greater than the set threshold, the angle between the motion vector and the horizontal axis is less than the set threshold, and the angle between the motion vector and the vertical axis is less than the set threshold.
  • the angle between the axes is less than any of the set thresholds.
  • Figure 7 is an example diagram of motion vector angle information in this embodiment. Figure 7 shows that the angle between the motion vector and the horizontal axis is greater than the set threshold and the angle between the motion vector and the vertical axis.
  • the information whose angle is greater than the set threshold is regarded as the first type of angle information
  • the angle information whose angle between the motion vector and the horizontal axis is less than the set threshold is regarded as the second angle information
  • the angle between the motion vector and the vertical axis is less than Set the threshold as the third type of angle information.
  • the method of determining the motion curve of the target image based on the direction information, angle information and relative position information can be: if the angle information is that the angle between the motion vector and the horizontal axis is greater than the set threshold and the angle between the motion vector and the vertical axis is greater than the set threshold, the direction information is that the motion vector points to the first quadrant area or the motion vector points to the third quadrant area, and the motion curve is located on the first side of the motion vector, then the longitudinal motion curve is determined to be the first easing curve, and the lateral motion curve is Set linear curve.
  • the direction information is that the motion vector points to the first quadrant area or the motion vector points to the third quadrant area, the motion curve Located on the second side of the motion vector, the longitudinal motion curve is determined to be the second easing curve, and the lateral motion curve is the set linear curve.
  • the angle information is that the angle between the motion vector and the horizontal axis is greater than the set threshold and the angle between the motion vector and the vertical axis is greater than the set threshold.
  • the direction information is that the motion vector points to the second quadrant area or the motion vector points to the fourth quadrant area.
  • the motion curve is at On the first side of the motion vector, the longitudinal motion curve is determined to be the second easing curve, and the lateral motion curve is the set linear curve.
  • the angle information is that the angle between the motion vector and the horizontal axis is greater than the set threshold and the angle between the motion vector and the vertical axis is greater than the set threshold.
  • the direction information is that the motion vector points to the second quadrant area or the motion vector points to the fourth quadrant area.
  • the motion curve is at On the second side of the motion vector, the longitudinal motion curve is determined to be the first easing curve, and the lateral motion curve is the set linear curve.
  • the first easing curve may be an easing out transformation curve
  • the second easing curve may be an easing in transformation curve.
  • the angle information is that the angle between the motion vector and the horizontal axis is greater than the set threshold and the angle between the motion vector and the vertical axis is greater than the set threshold, that is, when it is the first type of angle information
  • the longitudinal motion curve adopts the easing out transformation curve
  • the longitudinal motion curve adopts the easing in transformation curve
  • the longitudinal motion curve adopts the easing in transformation curve
  • the longitudinal motion curve adopts the easing in transformation curve
  • the longitudinal motion curve Use the easing in transformation curve; if the motion vector points to the second quadrant
  • the lateral movement curves are all set linear curves.
  • the first easing curve or the second easing curve is determined to be the longitudinal The motion curve makes the target image move first fast and then slow or first slow and then fast.
  • the process of determining the motion curve of the target image based on the direction information, angle information and relative position information can be: if the angle information is that the angle between the motion vector and the horizontal axis is less than the set threshold, the direction information is that the motion vector points The first quadrant area or the motion vector points to the third quadrant area, and the motion curve is located on the first side of the motion vector, then the longitudinal motion curve is determined to be the third easing curve, and the lateral motion curve is the set linear curve; if the angle information is motion The angle between the vector and the horizontal axis is less than the set threshold, the direction information is that the motion vector points to the first quadrant area or the motion vector points to the third quadrant area, and the motion curve is located on the second side of the motion vector, then the longitudinal motion curve is determined to be the fourth slowdown.
  • the lateral motion curve is a set linear curve; if the angle information is that the angle between the motion vector and the horizontal axis is less than the set threshold, the direction information is that the motion vector points to the second quadrant area or the motion vector points to the fourth quadrant area, the motion The curve is located on the first side of the motion vector, then the longitudinal motion curve is determined to be the fourth easing curve, and the lateral motion curve is the set linear curve; if the angle information is that the angle between the motion vector and the horizontal axis is less than the set threshold, the direction information If the motion vector points to the second quadrant area or the motion vector points to the fourth quadrant area, and the motion curve is located on the second side of the motion vector, then the longitudinal motion curve is determined to be the third easing curve, and the lateral motion curve is the set linear curve.
  • the third easing curve may be an easing back out transformation curve
  • the fourth easing curve may be an easing back in transformation curve.
  • the angle information is that the angle between the motion vector and the horizontal axis is less than a set threshold, it is the second type of angle information.
  • the longitudinal motion curve adopts the easing back out transformation curve; if the motion vector points to the first quadrant area or the third quadrant area, and the motion curve is located on the second side (right side) of the motion vector side), then the longitudinal movement The motion curve adopts the easing back in transformation curve; if the motion vector points to the second quadrant area or the fourth quadrant area, and the motion curve is located on the first side (left side) of the motion vector, the longitudinal motion curve adopts the easing back in transformation curve; if If the motion vector points to the second quadrant area or the fourth quadrant area, and the motion curve is located on the second side (right side) of the motion vector, the longitudinal motion curve adopts the easing back out transformation curve.
  • the lateral movement curves are all set linear curves.
  • the third easing curve or the fourth easing curve is determined as the longitudinal motion curve, so that the target image bends upward or Movement in a downward bending manner.
  • the process of determining the longitudinal motion curve as the third easing curve or determining the longitudinal motion curve as the third easing curve may be: determining the target edge of the bounding box based on the direction information and relative position information; determining the target edge of the bounding box based on the target edge and the corresponding screen The distance of the boundary and the size information of the bounding box determine the first coefficient or the second coefficient; the third easing curve is generated according to the first coefficient, or the fourth easing curve is generated according to the second coefficient.
  • the process of determining the target edge of the bounding box based on the direction information, relative position information and size information of the bounding box may be: if the width of the bounding box is greater than the height, the direction information points to the first quadrant area or the fourth quadrant area, and the relative The position information is that the motion curve is located on the first side of the motion vector, and the target edge is the upper side. If the width of the bounding box is greater than the height, the direction information points to the second quadrant area or the third quadrant area, and the relative position information indicates that the motion curve is located on the first side of the motion vector, then the target edge is the lower side.
  • the direction information points to the first quadrant area or the second quadrant area, and the relative position information indicates that the motion curve is located on the second side of the motion vector, then the target edge is the left edge. If the width of the bounding box is greater than the height, the direction information points to the third quadrant area or the fourth quadrant area, and the relative position information indicates that the motion curve is located on the second side of the motion vector, then the target edge is the right edge.
  • the target edge is the lower side. If the width of the bounding box is less than the height, the direction information points to the second quadrant area or the third quadrant area, and the relative position information is that the motion curve is located on the first side of the motion vector, then the target edge is the upper side. side. If the width of the bounding box is smaller than the height, the direction information points to the first quadrant area or the second quadrant area, and the relative position information indicates that the motion curve is located on the second side of the motion vector, then the target edge is the right edge. If the width of the bounding box is smaller than the height, the direction information points to the third quadrant area or the fourth quadrant area, and the relative position information indicates that the motion curve is located on the second side of the motion vector, then the target edge is the left edge.
  • the target edge corresponding to the screen border can be understood as: the upper side corresponds to the upper border of the screen, the lower side corresponds to the lower border of the screen, the left side corresponds to the left border of the screen, and the right side corresponds to the right border of the screen.
  • the way to determine the first coefficient or the second coefficient according to the distance between the target side and the corresponding screen boundary and the size information of the bounding box may be: when the target side is the upper side or the lower side, if the upper side is If the set multiple of the distance between the upper edge of the screen or the distance between the lower side and the lower edge of the screen is less than the height of the bounding box, then the set multiple of the distance between the upper edge and the upper edge of the screen or the distance between the lower side and the lower edge of the screen is determined.
  • the ratio of the set multiple to the height of the bounding box, the first coefficient or the second coefficient is determined based on this ratio; if the set multiple of the distance between the upper side and the upper border of the screen or the set multiple of the distance between the lower side and the lower border of the screen is greater than or equal to the height of the bounding box, the first coefficient or the second coefficient is determined according to the first setting value.
  • the left edge is determined
  • the set multiple of the distance from the left edge of the screen or the ratio of the set multiple of the distance between the right edge and the right edge of the screen and the width of the bounding box determine the first coefficient or the second coefficient based on this ratio; if the left edge is between the left edge and the left edge of the screen If the set multiple of the distance or the set multiple of the distance between the right side and the right edge of the screen is greater than or equal to the width of the bounding box, then the first coefficient or the second coefficient is determined according to the first set value.
  • the first setting value is 1.
  • the method of determining the first coefficient or the second coefficient based on the ratio may be: input the ratio into a set fitting relationship to obtain the first coefficient or the second coefficient.
  • the method of determining the first coefficient or the second coefficient based on the first setting value may be: inputting the first setting value into a set fitting relationship to obtain the first coefficient or the second coefficient. For example: divide the ratio or the first set value by 0.12 to obtain the first coefficient or the second coefficient.
  • the third easing curve is generated according to the first coefficient, or the fourth easing curve is generated according to the second coefficient to ensure that the motion curve is within the screen, thereby preventing the target image from being The image is cropped by the screen during movement.
  • the way to determine the motion curve of the target image based on the direction information, angle information and relative position information can be: if the angle information is that the angle between the motion vector and the vertical axis is less than the set threshold, the direction information is that the motion vector points The first quadrant area or the motion vector points to the third quadrant area, and the motion curve is located on the first side of the motion vector. Then the lateral motion curve is determined to be the fifth easing curve, and the longitudinal motion curve is the set linear curve.
  • the direction information is that the motion vector points to the first quadrant area or the motion vector points to the third quadrant area, and the motion curve is located on the second side of the motion vector, then the horizontal direction is determined
  • the motion curve is the sixth easing curve
  • the longitudinal motion curve is the set linear curve. If the angle information is that the angle between the motion vector and the vertical axis is less than the set threshold, the direction information is that the motion vector points to the second quadrant area or the motion vector points to the fourth quadrant area, and the motion curve is located on the first side of the motion vector, then the horizontal direction is determined
  • the motion curve is the sixth easing curve
  • the longitudinal motion curve is the set linear curve.
  • the direction information is that the motion vector points to the second quadrant area or the motion vector points to the fourth quadrant area, and the motion curve is located on the second side of the motion vector, then the horizontal direction is determined
  • the motion curve is the fifth easing curve, and the longitudinal motion curve is the set linear curve.
  • the fifth easing curve may be an easing back in transformation curve
  • the sixth easing curve may be an easing back out transformation curve.
  • the angle information is that the angle between the motion vector and the vertical axis is less than a set threshold, it is the third type of angle information.
  • the lateral motion curve uses the easing back in transformation curve; if the motion vector points to the first quadrant area or the third quadrant area, and the motion curve is located on the second side (right side) of the motion vector side), the lateral motion curve adopts the easing back out transformation curve; if the motion vector points to the second quadrant area or the fourth quadrant area, and the motion curve is located on the first side (left side) of the motion vector, the lateral motion curve adopts the easing back out transformation curve.
  • the lateral motion curve uses the easing back in transformation curve.
  • the longitudinal motion curves are all set linear curves.
  • the fifth easing curve or the sixth easing curve is determined as a transverse motion curve, so that the target image moves in a manner of bending to the right or left.
  • the method of determining the lateral motion curve as the fifth easing curve or determining the lateral motion curve as the sixth easing curve may be: determining the target edge of the bounding box based on the direction information, relative position information, and size information of the bounding box; The third coefficient or the fourth coefficient is determined according to the distance between the target edge and the corresponding screen boundary and the size information of the bounding box; a fifth easing curve is generated according to the third coefficient, or a sixth easing curve is generated according to the fourth coefficient.
  • the fifth easing curve is generated based on the third coefficient, or the sixth easing curve is generated based on the fourth coefficient to ensure that the motion curve is within the screen, thereby preventing the target image from being cropped by the screen during movement.
  • the process of controlling the target image to move from the starting point to the end point according to the motion curve can be understood as: first determining the position information of the target image at each time according to the motion curve, and then rendering the target image to the position corresponding to the position information.
  • the target images rendered at each moment form a motion animation.
  • the target image is controlled to move from the starting point to the end point according to the motion curve.
  • the method of generating the motion animation of the target image can be: obtaining the animation progress corresponding to the current moment; determining the target image at the current moment according to the animation progress and the motion curve. Position information; render the target image to the current screen based on the position information to generate a motion animation of the target image.
  • the animation progress is the ratio of the duration between the current moment and the starting moment and the total duration of the animation. Assume that the duration between the current moment and the starting moment is t, and the total animation duration is T, then the animation progress is t/T.
  • the process of determining the position information of the target image at the current moment based on the animation progress and the motion curve can be: input the animation progress into the longitudinal motion curve to obtain the longitudinal coordinates at the current moment, input the animation progress into the transverse motion curve to obtain the transverse coordinates at the current moment, The longitudinal coordinates and transverse coordinates constitute the position information of the target image at the current moment.
  • the target image is determined according to the animation progress and motion curve.
  • the position information at the current moment can accurately render the target image to the corresponding position at each moment, thereby ensuring that the target image moves according to the motion curve.
  • the following steps are also included: easing the animation progress.
  • the method of determining the position information of the target image at the current moment based on the animation progress and the motion curve may be: determining the position information of the target image at the current moment based on the animation progress and the motion curve after the easing process.
  • the method of easing the animation progress may be: input the animation progress into the set easing curve to obtain the animation progress after easing processing.
  • the animation progress is slowed down, which can improve the smoothness of the movement of the target image.
  • the method also includes: controlling the target image to rotate, scale, or change transparency during movement.
  • the rotation direction and target angle of the target image are determined based on the direction information, angle information and relative position information; the target image is controlled to rotate along the rotation direction from the initial angle to the target angle.
  • the direction of rotation may include counterclockwise rotation or clockwise rotation.
  • the target angle can be understood as the maximum angle of rotation of the target image.
  • the way to determine the rotation direction of the target image based on the direction information, angle information and relative position information can be: in the following cases, the rotation direction is counterclockwise rotation: the motion vector points to the first quadrant and the motion curve is located on the first side of the motion vector ;The motion vector points to the second quadrant and the motion curve is located on the first side of the motion vector; the motion vector points to the third quadrant and the motion curve is located on the first side of the motion vector; the motion vector points to the fourth quadrant area and the motion curve is located on the first side of the motion vector Two sides.
  • the direction of rotation is clockwise rotation under the following conditions: the motion vector points to the first quadrant area and the motion curve is located on the second side of the motion vector; the motion vector points to the second quadrant area and the motion curve is located on the second side of the motion vector; the motion vector Points to the third quadrant area and the motion curve is on the second side of the motion vector; the motion vector points to the fourth quadrant and the motion curve is on the first side of the motion vector.
  • the way to determine the target angle of the target image based on the direction information, angle information and relative position information may be: if the motion vector points to the first quadrant area and the motion curve is located on the first side of the motion vector, or the motion vector points to the second quadrant area And the motion curve is located on the second side of the motion vector, then the target angle Degree is the angle between the motion vector and the positive direction of the vertical axis; if the motion vector points to the first quadrant area and the motion curve is on the second side of the motion vector, or if the motion vector points to the fourth quadrant area and the motion curve is on the first side of the motion vector , then the target angle is the angle between the motion vector and the positive direction of the horizontal axis; if the motion vector points to the third quadrant area and the motion curve is on the first side of the motion vector, or the motion vector points to the fourth quadrant area and the motion curve is on the first side of the motion vector On the second side, the target angle is the angle between the motion vector and the opposite direction of the vertical
  • the process of controlling the rotation of the target image from the initial angle to the target angle along the rotation direction can be: obtaining the rotation easing curve; determining the rotation ratio at the current moment based on the animation progress and the rotation easing curve; determining based on the rotation ratio and rotation amplitude. Current angle; render the target image to the current screen based on the current angle.
  • the rotation amplitude is the difference between the target angle and the initial angle.
  • the rotation easing curve can be any easing curve rendered by the user, and is not limited here.
  • the animation progress can be the animation progress after easing processing, or the animation progress without easing processing.
  • the animation progress is input into the rotation easing curve to obtain the rotation ratio at the current moment, and the rotation ratio is multiplied by the rotation amplitude to obtain the current angle, so that the target image is rendered to the current screen based on the current angle.
  • the current angle is determined based on the rotation easing curve, which can improve the smoothness of the rotation of the target image.
  • the method also includes the following steps: obtaining the scaling transformation curve and/or the transparency transformation curve; determining the scaling degree at the current moment based on the animation progress and the scaling transformation curve, and/or determining the scaling degree at the current moment based on the animation progress and the transparency transformation curve. Transparency; renders a target image into the current frame based on scale and/or transparency.
  • the scaling transformation curve and the transparency transformation curve can be linear curves or easing curves, which are not limited here.
  • the animation progress can be the animation progress after easing processing, or the animation progress without easing processing.
  • the target image is rendered to the current screen based on zoom and/or transparency, This allows the target image to exhibit scaling and/or transparency transformation effects during movement, thereby improving the diversity of animations.
  • the technical solution of the embodiment of the present disclosure determines the starting point and the ending point of the target image under the set coordinate system; determines the motion vector of the target image based on the starting point and the ending point; wherein the motion vector is the direction vector from the starting point to the ending point. ; Determine the motion curve of the target image according to the motion vector; wherein the motion curve includes a horizontal motion curve and a longitudinal motion curve; control the target image to move from the starting point to the end point according to the motion curve to generate a motion animation of the target image.
  • the image-based animation generation method controls the target image to move from the starting point to the end point according to the motion curve determined by the motion vector, and can generate the motion animation of the image, so that the generated motion animation transitions smoothly and improves the animation quality. Fluency and display effect.
  • Figure 8 is a schematic structural diagram of an image-based animation generation device provided by an embodiment of the present disclosure. As shown in Figure 8, the device includes:
  • the starting and ending point determination module 810 is configured to determine the starting point and ending point of the target image in the set coordinate system
  • the motion vector determination module 820 is configured to determine the motion vector of the target image according to the starting point and the ending point; wherein the motion vector is a direction vector from the starting point to the ending point;
  • the motion curve determination module 830 is configured to determine the motion curve of the target image according to the motion vector; wherein the motion curve includes a lateral motion curve and a longitudinal motion curve;
  • the animation generation module 840 is configured to control the target image to move from the starting point to the end point according to the motion curve, and generate a motion animation of the target image.
  • the motion curve determination module 830 is also set to:
  • the bounding box is a rectangular bounding box parallel to the coordinate axis
  • the motion curve of the target image is determined based on the direction information, the included angle information and the bounding box information.
  • the direction information includes the motion vector pointing to the first quadrant area, the motion vector pointing to the second quadrant area, the motion vector pointing to the third quadrant area, and the motion vector pointing to the fourth quadrant area.
  • the angle information includes that the angle between the motion vector and the horizontal axis is greater than the set threshold and the angle with the vertical axis is greater than the set threshold, and the angle between the motion vector and the horizontal axis is less than the set threshold.
  • the bounding box information includes size information of the bounding box, and the distance between the edge of the bounding box and the screen boundary; wherein, The size information includes height and width, and the sides of the bounding box include upper side, lower side, left side and right side.
  • the motion curve determination module 830 is also set to:
  • the motion curve of the target image is determined based on the direction information, the included angle information and the relative position information.
  • the motion curve determination module 830 is also set to:
  • the height of the bounding box is greater than or equal to the width, obtain the first distance between the left side of the bounding box and the left edge of the screen, and the second distance between the right side of the bounding box and the right edge of the screen;
  • the height of the bounding box is less than the width, obtain the third distance between the upper side of the bounding box and the upper border of the screen, and the fourth distance between the lower side of the bounding box and the lower border of the screen;
  • a second comparison result between the third distance and the fourth distance is obtained, and relative position information between the motion curve and the motion vector is determined based on the second comparison result.
  • the motion curve determination module 830 is also set to:
  • the motion curve is located on the side where the left side is located; if the first distance is less than the second distance, the motion curve is located on described The side on which the right side is located;
  • Determining relative position information between the motion curve and the motion vector according to the second comparison result includes:
  • the motion curve is located on the side where the upper side is located; if the third distance is less than the fourth distance, the motion curve is located on The side on which the lower side is located.
  • the motion curve determination module 830 is also set to:
  • the direction information is that the motion vector points to the first quadrant area or the If the motion vector points to the third quadrant area and the motion curve is located on the first side of the motion vector, it is determined that the longitudinal motion curve is the first easing curve and the lateral motion curve is a set linear curve;
  • the direction information is that the motion vector points to the first quadrant area or the If the motion vector points to the third quadrant area and the motion curve is located on the second side of the motion vector, it is determined that the longitudinal motion curve is the second easing curve and the lateral motion curve is a set linear curve;
  • the angle information is that the angle between the motion vector and the horizontal axis is greater than a set threshold and the angle between the motion vector and the vertical axis is greater than a set threshold, and the direction information is that the motion vector points to the second quadrant area or the motion If the vector points to the fourth quadrant area and the motion curve is located on the first side of the motion vector, it is determined that the longitudinal motion curve is the second easing curve and the lateral motion curve is a set linear curve;
  • the angle information is that the angle between the motion vector and the horizontal axis is greater than a set threshold and the angle between the motion vector and the vertical axis is greater than a set threshold
  • the direction information is that the motion vector points to the second quadrant area or the motion If the vector points to the fourth quadrant area and the motion curve is located on the second side of the motion vector, it is determined that the longitudinal motion curve is the first easing curve and the lateral motion curve is a set linear curve.
  • the motion curve determination module 830 is also set to:
  • the direction information is that the motion vector points to the first quadrant area or the motion vector points to the third quadrant area, If the motion curve is located on the first side of the motion vector, then the longitudinal motion curve is determined to be the third easing curve, and the lateral motion curve is a set linear curve;
  • the direction information is that the motion vector points to the first quadrant area or the motion vector points to the third quadrant area, so If the motion curve is located on the second side of the motion vector, it is determined that the longitudinal motion curve is the fourth easing curve, and the lateral motion curve is a set linear curve;
  • the direction information is that the motion vector points to the second quadrant area or the motion vector points to the fourth quadrant area, so If the motion curve is located on the first side of the motion vector, it is determined that the longitudinal motion curve is the fourth easing curve, and the lateral motion curve is a set linear curve;
  • the direction information is that the motion vector points to the second quadrant area or the motion vector points to the fourth quadrant area, so If the motion curve is located on the second side of the motion vector, it is determined that the longitudinal motion curve is the third easing curve, and the lateral motion curve is a set linear curve.
  • the motion curve determination module 830 is also set to:
  • a third easing curve is generated according to the first coefficient, or a fourth easing curve is generated according to the second coefficient.
  • the motion curve determination module 830 is also set to:
  • the direction information is that the motion vector points to the first quadrant area or the motion vector points to the third quadrant area, so If the motion curve is located on the first side of the motion vector, then the lateral motion curve is determined to be the fifth easing curve, and the longitudinal motion curve is a set linear curve;
  • the direction information is that the motion vector points to the first quadrant area or the motion vector points to the third quadrant area, so If the motion curve is located on the second side of the motion vector, then the lateral motion curve is determined to be the sixth easing curve, and the longitudinal motion curve is a set linear curve;
  • the direction information is that the motion vector points to the second quadrant area or the motion vector points to the fourth quadrant area, so If the motion curve is located on the first side of the motion vector, then the lateral motion curve is determined to be the sixth easing curve, and the longitudinal motion curve is a set linear curve;
  • the direction information is that the motion vector points to the second quadrant area or the motion vector points to the fourth quadrant area, so If the motion curve is located on the second side of the motion vector, the transverse motion curve is determined to be the fifth easing curve, and the longitudinal motion curve is a set linear curve.
  • the motion curve determination module 830 is also set to:
  • a fifth easing curve is generated according to the third coefficient, or a sixth easing curve is generated according to the fourth coefficient.
  • the animation generation module 840 is also set to:
  • the animation progress is the ratio of the duration between the current moment and the starting time and the total duration of the animation
  • the target image is rendered to the current picture according to the position information to generate a motion animation of the target image.
  • animation generation module 840 which is also set to:
  • the position information of the target image at the current moment is determined according to the animation progress after the easing process and the motion curve.
  • Optional also includes: rotation module, set to:
  • the target image is controlled to rotate from an initial angle to the target angle along the rotation direction.
  • the rotation module is also set to:
  • the current angle is determined according to the rotation ratio and rotation amplitude; wherein the rotation amplitude is the difference between the target angle and the initial angle;
  • scaling or transparency transformation module set to:
  • the target image is rendered to the current screen based on the zoom degree and/or the transparency.
  • the image-based animation generation device provided by the embodiments of the present disclosure can execute the image-based animation generation method provided by any embodiment of the present disclosure, and has functional modules corresponding to the execution method.
  • FIG. 9 is a schematic structural diagram of an electronic device provided by an embodiment of the present disclosure.
  • Terminal devices in embodiments of the present disclosure may include, but are not limited to, mobile phones, notebook computers, digital broadcast receivers, personal digital assistants (Personal Digital Assistants, PDAs), PADs (tablet computers), portable multimedia players (Portable Media Players), etc. , PMP), mobile terminals such as vehicle-mounted terminals (such as vehicle-mounted navigation terminals), and fixed terminals such as digital televisions (Television, TV), desktop computers, etc.
  • PDAs Personal Digital Assistants
  • PADs tablet computers
  • PMP portable multimedia players
  • mobile terminals such as vehicle-mounted terminals (such as vehicle-mounted navigation terminals)
  • fixed terminals such as digital televisions (Television, TV), desktop computers, etc.
  • the electronic device shown in FIG. 9 is only an example and should not impose any limitations on the functions and scope of use of the embodiments of the present disclosure.
  • the electronic device 500 may include a processing device (such as a central processing unit, a graphics processor, etc.) 501, which may process data according to a program stored in a read-only memory (Read-Only Memory, ROM) 502 or from a storage device. 508 loads the program in the random access memory (Random Access Memory, RAM) 503 to perform various appropriate actions and processing. In the RAM 503, various programs and data required for the operation of the electronic device 500 are also stored.
  • the processing device 501, ROM 502 and RAM 503 are connected to each other via a bus 504.
  • An input/output (I/O) interface 505 is also connected to bus 504.
  • input devices 506 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; including, for example, a Liquid Crystal Display (LCD) , an output device 507 such as a speaker, a vibrator, etc.; a storage device 508 including a magnetic tape, a hard disk, etc.; and a communication device 509.
  • Communication device 509 may allow electronic device 500 to communicate wirelessly or wiredly with other devices to exchange data.
  • FIG. 9 illustrates electronic device 500 with various means, it should be understood that implementation or availability of all illustrated means is not required. More or fewer means may alternatively be implemented or provided.
  • embodiments of the present disclosure include a computer program product including a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the method illustrated in the flowchart.
  • the computer program may be downloaded and installed from the network via communication device 509, or from storage device 508, or from ROM 502 is installed.
  • the processing device 501 When the computer program is executed by the processing device 501, the above-mentioned functions defined in the method of the embodiment of the present disclosure are performed.
  • the electronic device provided by the embodiments of the present disclosure and the image-based animation generation method provided by the above-mentioned embodiments belong to the same inventive concept.
  • Technical details that are not described in detail in this embodiment can be referred to the above-mentioned embodiments.
  • Embodiments of the present disclosure provide a computer storage medium on which a computer program is stored.
  • the program is executed by a processor, the image-based animation generation method provided in the above embodiments is implemented.
  • the computer-readable medium mentioned above in the present disclosure may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the above two.
  • the computer-readable storage medium may be, for example, but is not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or any combination thereof.
  • Computer readable storage media may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard drive, random access memory (RAM), read only memory (ROM), removable Programmable read-only memory (EPROM (Erasable Programmable Read-Only Memory) or flash memory), optical fiber, portable compact disk read-only memory (Compact Disc Read-Only Memory, CD-ROM), optical storage device, magnetic storage device, or the above Any suitable combination.
  • a computer-readable storage medium may be any tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device.
  • a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code therein. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above.
  • a computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device .
  • Program code contained on a computer-readable medium can be transmitted using any appropriate medium, including but not limited to: wires, optical cables, radio frequency (Radio Frequency, RF), etc., or any suitable combination of the above.
  • the client and server can communicate using any currently known or future developed network protocol such as HTTP (HyperText Transfer Protocol), and can communicate with digital data in any form or medium.
  • Communications e.g., communications network
  • Examples of communication networks include Local Area Networks (LANs), Wide Area Networks (WANs), the Internet (e.g., the Internet), and end-to-end networks (e.g., ad hoc end-to-end networks), as well as any current network for knowledge or future research and development.
  • LANs Local Area Networks
  • WANs Wide Area Networks
  • the Internet e.g., the Internet
  • end-to-end networks e.g., ad hoc end-to-end networks
  • the above-mentioned computer-readable medium may be included in the above-mentioned electronic device; it may also exist independently without being assembled into the electronic device.
  • the above-mentioned computer-readable medium carries at least one program.
  • the electronic device executes the above-mentioned at least one program.
  • the above-mentioned computer-readable medium carries at least one program.
  • the electronic device determines the starting point and ending point of the target image in the set coordinate system; according to the starting point and The end point determines the motion vector of the target image; wherein the motion vector is a direction vector from the starting point to the end point; the motion curve of the target image is determined according to the motion vector; wherein, the The motion curve includes a transverse motion curve and a longitudinal motion curve; the target image is controlled to move from the starting point to the end point according to the motion curve to generate a motion animation of the target image.
  • Computer program code for performing the operations of the present disclosure may be written in one or more programming languages, including but not limited to object-oriented programming languages—such as Java, Smalltalk, C++, and Includes conventional procedural programming languages—such as "C” or similar programming languages.
  • the program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server.
  • the remote computer can be connected to the user's computer through any kind of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computer (such as an Internet service provider through Internet connection).
  • LAN local area network
  • WAN wide area network
  • Internet service provider such as an Internet service provider through Internet connection
  • each block in the flowchart or block diagram may represent a module, segment, or portion of code that contains one or more logic functions that implement the specified executable instructions.
  • the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown one after another may actually execute substantially in parallel, or they may sometimes execute in the reverse order, depending on the functionality involved.
  • each block of the block diagram and/or flowchart illustration, and combinations of blocks in the block diagram and/or flowchart illustration can be implemented by special purpose hardware-based systems that perform the specified functions or operations. , or can be implemented using a combination of specialized hardware and computer instructions.
  • the units involved in the embodiments of the present disclosure can be implemented in software or hardware.
  • the name of the unit does not constitute a limitation on the unit itself under certain circumstances.
  • the first acquisition unit can also be described as "the unit that acquires at least two Internet Protocol addresses.”
  • exemplary types of hardware logic components include: field programmable gate array (Field Programmable Gate Array, FPGA), application specific integrated circuit (Application Specific Integrated Circuit, ASIC), application specific standard product (Application Specific Standard Parts (ASSP), System on Chip (SOC), Complex Programmable Logic Device (CPLD), etc.
  • a machine-readable medium may be a tangible medium that may contain or store a program for use by or in connection with an instruction execution system, apparatus, or device.
  • the machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium.
  • Machine-readable media may include, but are not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or devices, or any suitable combination of the foregoing.
  • machine-readable storage media would include electrical connections based on one or more wires, laptop disks, hard drives, Random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), fiber optics, portable compact disk read-only memory (CD-ROM), optical storage devices, Magnetic storage device, or any suitable combination of the foregoing.
  • RAM Random access memory
  • ROM read-only memory
  • EPROM or flash memory erasable programmable read-only memory
  • CD-ROM compact disk read-only memory
  • magnetic storage device or any suitable combination of the foregoing.

Landscapes

  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本公开实施例提供了一种基于图像的动画生成方法、装置、设备及存储介质。该方法包括：确定目标图像在设定坐标系下的起始点和终止点；根据所述起始点和所述终止点确定所述目标图像的运动向量；其中，所述运动向量为所述起始点指向所述终止点的方向向量；根据所述运动向量确定所述目标图像的运动曲线；其中，所述运动曲线包括横向运动曲线和纵向运动曲线；控制所述目标图像按照所述运动曲线从所述起始点运动至所述终止点，生成所述目标图像的运动动画。

Description

基于图像的动画生成方法、装置、设备及存储介质
本公开要求在2022年8月5日提交中国专利局、申请号为202210939720.9的中国专利申请的优先权，该申请的全部内容通过引用结合在本公开中。
技术领域
本公开实施例涉及图像处理技术领域，例如涉及一种基于图像的动画生成方法、装置、设备及存储介质。
背景技术
目前，要生成图像在两点之间的运动动画，一般在屏幕空间中实现。但是屏幕空间下的运动难以配合如镜头缩放、焦距变化、镜头位移、镜头旋转及视差扰动等运镜效果。而且若将在屏幕空间下实现的运动动画融入复杂的三维场景，使得动画效果不流畅，显示效果较差。
发明内容
本公开实施例提供一种基于图像的动画生成方法、装置、设备及存储介质，可以生成图像的运动动画，使得生成的运动动画平滑过渡，提高动画的显示效果。
第一方面，本公开实施例提供了一种基于图像的动画生成方法，包括：
确定目标图像在设定坐标系下的起始点和终止点；
根据所述起始点和所述终止点确定所述目标图像的运动向量；其中，所述运动向量为所述起始点指向所述终止点的方向向量；
根据所述运动向量确定所述目标图像的运动曲线；其中，所述运动曲线包括横向运动曲线和纵向运动曲线；
控制所述目标图像按照所述运动曲线从所述起始点运动至所述终止点，生成所述目标图像的运动动画。
第二方面，本公开实施例还提供了一种基于图像的动画生成装置，包括：
起始终止点确定模块，设置为确定目标图像在设定坐标系下的起始点和终止点；
运动向量确定模块，设置为根据所述起始点和所述终止点确定所述目标图像的运动向量；其中，所述运动向量为所述起始点指向所述终止点的方向向量；
运动曲线确定模块，设置为根据所述运动向量确定所述目标图像的运动曲线；其中，所述运动曲线包括横向运动曲线和纵向运动曲线；
动画生成模块，设置为控制所述目标图像按照所述运动曲线从所述起始点运动至所述终止点，生成所述目标图像的运动动画。
第三方面，本公开实施例还提供了一种电子设备，所述电子设备包括：
至少一个处理器；
存储装置，设置为存储至少一个程序，
当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现如本公开实施例所述的基于图像的动画生成方法。
第四方面，本公开实施例还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如本公开实施例所述的基于图像的动画生成方法。
附图说明
贯穿附图中，相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的，原件和元素不一定按照比例绘制。
图1是本公开实施例所提供的一种基于图像的动画生成方法流程示意图；
图2是本公开实施例所提供的一种运动向量的示例图；
图3是本公开实施例所提供的一种运动向量的包围盒的示意图；
图4是本公开实施例所提供的一种运动向量的方向信息的示意图；
图5是本公开实施例所提供的一种运动曲线与运动向量间的相对位置信息 的示意图；
图6是本公开实施例所提供的确定运动曲线与所述运动向量间的相对位置信息的示意图；
图7是本公开实施例所提供的一种运动向量夹角信息的示例图；
图8是本公开实施例所提供的一种基于图像的动画生成装置结构示意图；
图9是本公开实施例所提供的一种电子设备的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的实施例。
应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。
本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。
需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“至少一个”。
本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。
可以理解的是，在使用本公开各实施例公开的技术方案之前，均应当依据相关法律法规通过恰当的方式对本公开所涉及个人信息的类型、使用范围、使 用场景等告知用户并获得用户的授权。
例如，在响应于接收到用户的主动请求时，向用户发送提示信息，以明确地提示用户，其请求执行的操作将需要获取和使用到用户的个人信息。从而，使得用户可以根据提示信息来自主地选择是否向执行本公开技术方案的操作的电子设备、应用程序、服务器或存储介质等软件或硬件提供个人信息。
作为一种可选的但非限定性的实现方式，响应于接收到用户的主动请求，向用户发送提示信息的方式例如可以是弹窗的方式，弹窗中可以以文字的方式呈现提示信息。此外，弹窗中还可以承载供用户选择“同意”或者“不同意”向电子设备提供个人信息的选择控件。
可以理解的是，上述通知和获取用户授权过程仅是示意性的，不对本公开的实现方式构成限定，其它满足相关法律法规的方式也可应用于本公开的实现方式中。
可以理解的是，本技术方案所涉及的数据(包括但不限于数据本身、数据的获取或使用)应当遵循相应法律法规及相关规定的要求。
图1为本公开实施例所提供的一种基于图像的动画生成方法流程示意图，本公开实施例适用于生成图像在屏幕中的运动动画的情形，该方法可以由基于图像的动画生成装置来执行，该装置可以通过软件和/或硬件的形式实现，可选的，通过电子设备来实现，该电子设备可以是移动终端、个人计算机(Personal Computer，PC)端或服务器等。
如图1所示，所述方法包括：
S110，确定目标图像在设定坐标系下的起始点和终止点。
其中，设定坐标系可以是归一化设备空间坐标系(normalized device coordinates，NDC)。起始点可以是目标图像的中心点在起始位置中的坐标，终止点可以是目标图像的中心点在终止位置中的坐标。
本实施例中，相机坐标系的矩阵表示为V，裁剪坐标系的矩阵表示为P。确定目标图像在设定坐标系下的起始点和终止点的过程可以是：首先获取目标图 像在世界坐标系下的起始点坐标和终止点坐标，然后将起始点坐标和终止点坐标分别左乘转换矩阵VP，获得裁剪坐标系下的起始点坐标和终止点坐标，然后对裁剪坐标系下的起始点坐标和终止点坐标进行齐次变换，获得NDC坐标系下的起始点坐标和终止点坐标。
其中，裁剪坐标系下的坐标为四维坐标，可以表示为(x，y，z，w)。对裁剪坐标系下的起始点坐标和终止点坐标进行齐次变换的方式可以是：将x，y和z分别除以w，获得NDC坐标系下的坐标。本实施例中，NDC坐标系中三维坐标的范围为[-1,1]，即NDC坐标系可以理解为边长为2的立方体。本实施例中，在进行后续运动曲线的确定过程中，使用x坐标和y坐标进行计算。
本实施例中，在NDC坐标系下确定运动曲线，可以使得在NDC空间下的曲线运动与三维空间的渲染及运镜效果等自然地融合在一起。
S120，根据起始点和终止点确定目标图像的运动向量。
其中，运动向量为起始点指向终止点的方向向量，运动向量可以是将终止点坐标减去起始点坐标的二维向量。示例性的，图2是本实施例中的运动向量的示例图，如图2所示，点A为起始点，点B为终止点，则从点A指向点B的向量为目标图像的运动向量。
S130，根据运动向量确定目标图像的运动曲线。
其中，运动曲线包括横向运动曲线和纵向运动曲线。横向运动曲线可以表征目标图像沿横向的运动轨迹，纵向运动曲线可以表征为目标图像沿纵向的运动轨迹。
本实施例中，根据运动向量确定目标图像的运动曲线的方式可以是：获取运动向量的方向信息、与坐标轴的夹角信息及包围盒信息；基于方向信息、夹角信息和包围盒信息确定目标图像的运动曲线。
其中，包围盒为与坐标轴平行的矩形包围盒。示例性的，图3是本实施例中运动向量的包围盒，如图3所示，包围盒的上侧边和下侧边与横轴平行，包围盒的左侧边和右侧边与纵轴平行。方向信息包括运动向量指向第一象限区域、 运动向量指向第二象限区域、运动向量指向第三象限区域以及运动向量指向第四象限区域中的任意一项；夹角信息包括运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值、运动向量与横轴的夹角小于设定阈值以及运动向量与纵轴的夹角小于设定阈值中的任意一项；包围盒信息包括包围盒的尺寸信息，以及包围盒的边与屏幕边界的距离；其中，尺寸信息包括高度和宽度，包围盒的边包括上侧边、下侧边、左侧边及右侧边。
其中，包围盒的高度和宽度可以是经过屏幕比例转换后的值。示例性的，假设在NDC坐标系下的起始点坐标和终止点坐标计算出的高度为h，宽度为w，假设屏幕高宽比为a/b，则转换后的高度为h*a/b，宽度仍为w；或者转换后的高度仍为h，宽度为w*b/a。设定阈值可以设置为20-25度之间的任意值，例如设置为22.5度。
示例性的，获取运动向量的方向信息的方式可以是：根据运动向量的横向分量和纵向分量的正负性来确定运动向量的方向信息。若横向分量为正，纵向分量为正，则运动向量指向第一象限区域；若横向分量为负，纵向分量为正，则运动向量指向第二象限区域；若横向分量为负，纵向分量为负，则运动向量指向第三象限区域；若横向分量为正，纵向分量为负，则运动向量指向第四象限区域。示例性的，图4是本实施例是运动向量的方向信息的示意图。
其中，运动向量与坐标轴的夹角信息可以是运动向量分别与横轴正向向量(1，0)、横轴负向向量(-1，0)、纵轴正向向量(0，1)及纵轴负向向量(0，-1)的夹角。
示例性的，获取运动向量与坐标轴的夹角信息的方式可以是：计算运动向量分别与横轴正向向量、横轴负向向量、纵轴正向向量及纵轴负向向量的点乘结果，基于点乘结果确定运动向量与坐标轴的夹角信息。本实施例中，获取运动向量的方向信息、与坐标轴的夹角信息及包围盒信息，利于后续运动曲线确定的准确性。
可选的，基于方向信息、夹角信息和包围盒信息确定目标图像的运动曲线 的方式可以是：根据包围盒信息确定运动曲线与运动向量间的相对位置信息；基于方向信息、夹角信息及相对位置信息确定目标图像的运动曲线。
其中，相对位置信息包括运动曲线位于运动向量的第一侧或者第二侧。相对位置信息可以理解为以运动向量为基准，位于运动向量的两侧，第一侧可以是位于运动向量的左侧，第二侧可以是位于运动向量的右侧。示例性的，图5是本实施例中运动曲线与运动向量间的相对位置信息的示意图，如图5所示，对于运动向量AB，曲线AD为位于运动向量AB第一侧(左侧)的曲线，曲线AC为位于运动向量AB第二侧(右侧)的曲线。本实施例中，基于方向信息、夹角信息及相对位置信息确定目标图像的运动曲线，使得确定出的运动曲线位于屏幕内，可以防止目标图像在运动过程中被屏幕裁剪，影响显示效果。
可选的，根据包围盒信息确定运动曲线与运动向量间的相对位置信息的方式可以是：若包围盒的高度大于或等于宽度，则获取包围盒的左侧边与屏幕左边界的第一距离，以及包围盒的右侧边与屏幕右边界的第二距离；获取第一距离和第二距离间的第一比较结果，并根据第一比较结果确定运动曲线与运动向量间的相对位置信息；若包围盒的高度小于宽度，则获取包围盒的上侧边与屏幕上边界的第三距离，以及包围盒的下侧边与屏幕下边界的第四距离；获取第三距离和第四距离间的第二比较结果，并根据第二比较结果确定运动曲线与运动向量间的相对位置信息。
其中，第一比较结果可以包括第一距离大于或等于第二距离，或者第一距离小于第二距离。第二比较结果可以包括第三距离大于或等于第四距离，或者第三距离小于第四距离。
本实施例中，若包围盒的高度大于或等于宽度，则表明目标图像运动的纵向距离大于横向距离，此时通过包围盒与屏幕纵向边界(包括屏幕左边界及屏幕右边界)的距离来确定运动曲线与所述运动向量间的相对位置信息。若包围盒的高度小于宽度，则表明目标图像运动的纵向距离小于横向距离，此时通过包围盒与屏幕横向边界(包括屏幕上边界和屏幕下边界)的距离来确定运动曲 线与所述运动向量间的相对位置信息。
示例性的，根据第一比较结果确定运动曲线与运动向量间的相对位置信息的方式可以是：若第一距离大于或等于第二距离，则运动曲线位于左侧边所在的一侧；若第一距离小于第二距离，则运动曲线位于右侧边所在的一侧。根据第二比较结果确定运动曲线与运动向量间的相对位置信息的方式可以是：若第三距离大于或等于第四距离，则运动曲线位于上侧边所在的一侧；若第三距离小于第四距离，则运动曲线位于下侧边所在的一侧。
其中，若第一距离大于第二距离，则表明位于包围盒左侧边所在的一侧有较大的空间，则将运动曲线设置于左侧边所在的一侧，即目标图像在位于左侧边所在的一侧运动。若第一距离小于第二距离，则表明位于包围盒右侧边所在的一侧有较大的空间，则将运动曲线设置于右侧边所在的一侧，即目标图像在位于右侧边所在的一侧运动。若第三距离大于第四距离，则表明位于包围盒上侧边所在的一侧有较大的空间，则将运动曲线设置于上侧边所在的一侧，即目标图像在位于上侧边所在的一侧运动。若第三距离小于第四距离，则表明位于包围盒下侧边所在的一侧有较大的空间，则将运动曲线设置于下侧边所在的一侧，即目标图像在位于下侧边所在的一侧运动。示例性的，图6是本实施例中确定运动曲线与所述运动向量间的相对位置信息的示意图，如图6所示，运动向量AB的包围盒的宽度w大于高度h，则计算包围盒的上侧边与屏幕上边界的第三距离L3，以及包围盒的下侧边与屏幕下边界的第四距离L4，从图中可以看出，L3大于L4，则运动曲线设置于上侧边所在的一侧，即运动向量AB的第一侧(左侧)。本实施例中，将运动曲线设置于有较大空间的一侧区域，可以防止目标图像在运动过程中被屏幕裁剪。
本实施例中，夹角信息包括运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值、运动向量与横轴的夹角小于设定阈值以及运动向量与纵轴的夹角小于设定阈值中的任意一项。示例性的，图7是本实施例中运动向量夹角信息的示例图，如图7将运动向量与横轴的夹角大于设定阈值且与纵轴的 夹角大于设定阈值的信息作为第一类夹角信息，将运动向量与横轴的夹角小于设定阈值的夹角信息作为第二夹角信息，将运动向量与纵轴的夹角小于设定阈值作为第三类夹角信息。
可选的，基于方向信息、夹角信息及相对位置信息确定目标图像的运动曲线的方式可以是：若夹角信息为运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值，方向信息为运动向量指向第一象限区域或者运动向量指向第三象限区域，运动曲线位于运动向量的第一侧，则确定纵向运动曲线为第一缓动曲线，横向运动曲线为设定线性曲线。若夹角信息为运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值，方向信息为运动向量指向第一象限区域或者运动向量指向第三象限区域，运动曲线位于运动向量的第二侧，则确定纵向运动曲线为第二缓动曲线，横向运动曲线为设定线性曲线。夹角信息为运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值，方向信息为运动向量指向第二象限区域或者运动向量指向第四象限区域，运动曲线位于运动向量的第一侧，则确定纵向运动曲线为第二缓动曲线，横向运动曲线为设定线性曲线。夹角信息为运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值，方向信息为运动向量指向第二象限区域或者运动向量指向第四象限区域，运动曲线位于运动向量的第二侧，则确定纵向运动曲线为第一缓动曲线，横向运动曲线为设定线性曲线。
其中，第一缓动曲线可以是先快后慢(easing out)变换曲线，第二缓动曲线可以是先慢后快曲线(easing in)。示例性的，在夹角信息为运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值的情况下，即为第一类夹角信息时，若运动向量指向第一象限区域或者第三象限区域，且运动曲线位于运动向量的第一侧(左侧)，则纵向运动曲线采用easing out变换曲线；若运动向量指向第一象限区域或者第三象限区域，且运动曲线位于运动向量的第二侧(右侧)，则纵向运动曲线采用easing in变换曲线；若运动向量指向第二象限区域或者第四象限区域，且运动曲线位于运动向量的第一侧(左侧)，则纵向运动曲线 采用easing in变换曲线；若运动向量指向第二象限区域或者第四象限区域，且运动曲线位于运动向量的第二侧(右侧)，则纵向运动曲线采用easing out变换曲线。其中，横向运动曲线均为设定线性曲线。本实施例中，当夹角信息为运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值时，将第一缓动曲线或者第二缓动曲线确定为纵向运动曲线，使得目标图像按照先快后慢或者先慢后快的方式运动。
可选的，基于方向信息、夹角信息及相对位置信息确定目标图像的运动曲线的过程可以是：若夹角信息为运动向量与横轴的夹角小于设定阈值，方向信息为运动向量指向第一象限区域或者运动向量指向第三象限区域，运动曲线位于运动向量的第一侧，则确定纵向运动曲线为第三缓动曲线，横向运动曲线为设定线性曲线；若夹角信息为运动向量与横轴的夹角小于设定阈值，方向信息为运动向量指向第一象限区域或者运动向量指向第三象限区域，运动曲线位于运动向量的第二侧，则确定纵向运动曲线为第四缓动曲线，横向运动曲线为设定线性曲线；若夹角信息为运动向量与横轴的夹角小于设定阈值，方向信息为运动向量指向第二象限区域或者运动向量指向第四象限区域，运动曲线位于运动向量的第一侧，则确定纵向运动曲线为第四缓动曲线，横向运动曲线为设定线性曲线；若夹角信息为运动向量与横轴的夹角小于设定阈值，方向信息为运动向量指向第二象限区域或者运动向量指向第四象限区域，运动曲线位于运动向量的第二侧，则确定纵向运动曲线为第三缓动曲线，横向运动曲线为设定线性曲线。
其中，第三缓动曲线可以是向上弯折(easing back out)变换曲线，第四缓动曲线可以是向下弯折(easing back in)变换曲线。示例性的，在夹角信息为运动向量与横轴的夹角小于设定阈值的情况下，即为第二类夹角信息，若运动向量指向第一象限区域或者第三象限区域，且运动曲线位于运动向量的第一侧(左侧)，则纵向运动曲线采用easing back out变换曲线；若运动向量指向第一象限区域或者第三象限区域，且运动曲线位于运动向量的第二侧(右侧)，则纵向运 动曲线采用easing back in变换曲线；若运动向量指向第二象限区域或者第四象限区域，且运动曲线位于运动向量的第一侧(左侧)，则纵向运动曲线采用easing back in变换曲线；若运动向量指向第二象限区域或者第四象限区域，且运动曲线位于运动向量的第二侧(右侧)，则纵向运动曲线采用easing back out变换曲线。其中，横向运动曲线均为设定线性曲线。本实施例中，当夹角信息为运动向量与横轴的夹角小于设定阈值时，将第三缓动曲线或者第四缓动曲线确定为纵向运动曲线，使得目标图像按照向上弯折或者向下弯折的方式运动。
可选的，确定纵向运动曲线为第三缓动曲线或者确定纵向运动曲线为第三缓动曲线的过程可以是：根据方向信息和相对位置信息确定包围盒的目标边；根据目标边与对应屏幕边界的距离以及包围盒的尺寸信息确定第一系数或者第二系数；根据第一系数生成第三缓动曲线，或者根据第二系数生成第四缓动曲线。
其中，根据方向信息、相对位置信息及包围盒的尺寸信息确定包围盒的目标边的过程可以是：若包围盒的宽度大于高度，方向信息为指向第一象限区域或者第四象限区域，且相对位置信息为运动曲线位于所述运动向量的第一侧，则目标边为上侧边。若包围盒的宽度大于高度，方向信息为指向第二象限区域或者第三象限区域，且相对位置信息为运动曲线位于所述运动向量的第一侧，则目标边为下侧边。若包围盒的宽度大于高度，方向信息为指向第一象限区域或者第二象限区域，且相对位置信息为运动曲线位于所述运动向量的第二侧，则目标边为左侧边。若包围盒的宽度大于高度，方向信息为指向第三象限区域或者第四象限区域，且相对位置信息为运动曲线位于所述运动向量的第二侧，则目标边为右侧边。
若包围盒的宽度小于高度，方向信息为指向第一象限区域或者第四象限区域，且相对位置信息为运动曲线位于所述运动向量的第一侧，则目标边为下侧边。若包围盒的宽度小于高度，方向信息为指向第二象限区域或者第三象限区域，且相对位置信息为运动曲线位于所述运动向量的第一侧，则目标边为上侧 边。若包围盒的宽度小于高度，方向信息为指向第一象限区域或者第二象限区域，且相对位置信息为运动曲线位于所述运动向量的第二侧，则目标边为右侧边。若包围盒的宽度小于高度，方向信息为指向第三象限区域或者第四象限区域，且相对位置信息为运动曲线位于所述运动向量的第二侧，则目标边为左侧边。
其中，目标边对应屏幕边界可以理解为：上侧边对应屏幕上边界，下侧边对应屏幕下边界，左侧边对应屏幕左边界，右侧边对应屏幕右边界。
示例性的，根据目标边与对应屏幕边界的距离以及包围盒的尺寸信息确定第一系数或者第二系数的方式可以是：当目标边为上侧边或者下侧边时，若上侧边与屏幕上边界距离的设定倍数或下侧边与屏幕下边界距离的设定倍数小于包围盒的高，则确定上侧边与屏幕上边界距离的设定倍数或下侧边与屏幕下边界距离的设定倍数与包围盒的高的比值，基于该比值确定第一系数或者第二系数；若上侧边与屏幕上边界距离的设定倍数或下侧边与屏幕下边界距离的设定倍数大于或等于包围盒的高，则根据第一设定值确定第一系数或者第二系数。当目标边为左侧边或者右侧边时，若左侧边与屏幕左边界距离的设定倍数或右侧边与屏幕右边界距离的设定倍数小于包围盒的宽，则确定左侧边与屏幕左边界距离的设定倍数或右侧边与屏幕右边界距离的设定倍数与包围盒的宽的比值，基于该比值确定第一系数或者第二系数；若左侧边与屏幕左边界距离的设定倍数或右侧边与屏幕右边界距离的设定倍数大于或等于包围盒的宽，则根据第一设定值确定第一系数或者第二系数。
其中，第一设定值为1。基于该比值确定第一系数或者第二系数的方式可以是：将该比值输入设定拟合关系，获得第一系数或者第二系数。根据第一设定值确定第一系数或者第二系数的方式可以是：将第一设定值输入设定拟合关系，获得第一系数或者第二系数。例如：将该比值或者第一设定值除以0.12，获得第一系数或者第二系数。本实施例中，根据第一系数生成第三缓动曲线，或者根据第二系数生成第四缓动曲线，保证运动曲线处在屏幕内，从而防止目标图 像在运动过程中被屏幕裁剪。
可选的，基于方向信息、夹角信息及相对位置信息确定目标图像的运动曲线的方式可以是：若夹角信息为运动向量与纵轴的夹角小于设定阈值，方向信息为运动向量指向第一象限区域或者运动向量指向第三象限区域，运动曲线位于运动向量的第一侧，则确定横向运动曲线为第五缓动曲线，纵向运动曲线为设定线性曲线。若夹角信息为运动向量与纵轴的夹角小于设定阈值，方向信息为运动向量指向第一象限区域或者运动向量指向第三象限区域，运动曲线位于运动向量的第二侧，则确定横向运动曲线为第六缓动曲线，纵向运动曲线为设定线性曲线。若夹角信息为运动向量与纵轴的夹角小于设定阈值，方向信息为运动向量指向第二象限区域或者运动向量指向第四象限区域，运动曲线位于运动向量的第一侧，则确定横向运动曲线为第六缓动曲线，纵向运动曲线为设定线性曲线。若夹角信息为运动向量与纵轴的夹角小于设定阈值，方向信息为运动向量指向第二象限区域或者运动向量指向第四象限区域，运动曲线位于运动向量的第二侧，则确定横向运动曲线为第五缓动曲线，纵向运动曲线为设定线性曲线。
其中，第五缓动曲线可以是向右弯折(easing back in)变换曲线，第六缓动曲线可以是向左弯折(easing back out)变换曲线。示例性的，在夹角信息为运动向量与纵轴的夹角小于设定阈值的情况下，即为第三类夹角信息，若运动向量指向第一象限区域或者第三象限区域，且运动曲线位于运动向量的第一侧(左侧)，则横向运动曲线采用easing back in变换曲线；若运动向量指向第一象限区域或者第三象限区域，且运动曲线位于运动向量的第二侧(右侧)，则横向运动曲线采用easing back out变换曲线；若运动向量指向第二象限区域或者第四象限区域，且运动曲线位于运动向量的第一侧(左侧)，则横向运动曲线采用easing back out变换曲线；若运动向量指向第二象限区域或者第四象限区域，且运动曲线位于运动向量的第二侧(右侧)，则横向运动曲线采用easing back in变换曲线。其中，纵向运动曲线均为设定线性曲线。本实施例中，当夹角信息为运动向量 与纵轴的夹角小于设定阈值时，将第五缓动曲线或者第六缓动曲线确定为横向运动曲线，使得目标图像按照向右弯折或者向左弯折的方式运动。
可选的，确定横向运动曲线为第五缓动曲线或者确定横向运动曲线为第六缓动曲线的方式可以是：根据方向信息、相对位置信息及包围盒的尺寸信息确定包围盒的目标边；根据目标边与对应屏幕边界的距离以及包围盒的尺寸信息确定第三系数或者第四系数；根据第三系数生成第五缓动曲线，或者根据第四系数生成第六缓动曲线。
确定第三系数和第四系数的方式参见上述实施例确定第一系数和第二系数的过程，此处不再赘述。本实施例中，根据第三系数生成第五缓动曲线，或者根据第四系数生成第六缓动曲线，保证运动曲线处在屏幕内，从而防止目标图像在运动过程中被屏幕裁剪。
S140，控制目标图像按照运动曲线从起始点运动至终止点，生成目标图像的运动动画。
本实施例中，控制目标图像按照运动曲线从起始点运动至终止点的过程可以理解为：首先根据运动曲线确定目标图像在各时刻下的位置信息，然后将目标图像渲染至位置信息对应的位置上，各时刻渲染出的目标图像组成运动动画。
可选的，控制目标图像按照运动曲线从起始点运动至终止点，生成目标图像的运动动画的方式可以是：获取当前时刻对应的动画进度；根据动画进度和运动曲线确定目标图像在当前时刻的位置信息；根据位置信息将目标图像渲染至当前画面，以生成目标图像的运动动画。
其中，动画进度为当前时刻距离起始时刻间的时长与动画总时长的比例。假设当前时刻距离起始时刻间的时长为t，动画总时长为T，则动画进度为t/T。根据动画进度和运动曲线确定目标图像在当前时刻的位置信息的过程可以是：将动画进度输入纵向运动曲线，获得当前时刻的纵向坐标，将动画进度输入横向运动曲线，获得当前时刻的横向坐标，纵向坐标和横向坐标组成目标图像在当前时刻的位置信息。本实施例中，根据动画进度和运动曲线确定目标图像在 当前时刻的位置信息，可以准确的将目标图像渲染至各时刻下对应的位置，从而保证目标图像按照运动曲线运动。
可选的，获取当前时刻对应的动画进度之后，还包括如下步骤：对动画进度进行缓动处理。相应的，根据动画进度和运动曲线确定目标图像在当前时刻的位置信息的方式可以是：根据缓动处理后的动画进度和运动曲线确定目标图像在当前时刻的位置信息。
其中，对动画进度进行缓动处理的方式可以是：将动画进度输入设定缓动曲线中，获得缓动处理后的动画进度。本实施例中，动画进度进行缓动处理，可以提高目标图像运动的平滑性。
可选的，该方法还包括：控制目标图像在运动过程中旋转、缩放或者改变透明度。
示例性的，基于方向信息、夹角信息及相对位置信息确定目标图像的旋转方向和目标角度；控制目标图像沿旋转方向从初始角度旋转至目标角度。
其中，旋转方向可以包括逆时针旋转或者顺时针旋转。目标角度可以理解为目标图像旋转的最大角度。基于方向信息、夹角信息及相对位置信息确定目标图像的旋转方向的方式可以是：在如下情况下，旋转方向为逆时针旋转：运动向量指向第一象限且运动曲线位于运动向量的第一侧；运动向量指向第二象限且运动曲线位于运动向量的第一侧；运动向量指向第三象限且运动曲线位于运动向量的第一侧；运动向量指向第四象限区域且运动曲线位于运动向量的第二侧。在如下情况下，旋转方向为顺时针旋转：运动向量指向第一象限区域且运动曲线位于运动向量的第二侧；运动向量指向第二象限区域且运动曲线位于运动向量的第二侧；运动向量指向第三象限区域且运动曲线位于运动向量的第二侧；运动向量指向第四象限且运动曲线位于运动向量的第一侧。
其中，基于方向信息、夹角信息及相对位置信息确定目标图像目标角度的方式可以是：若运动向量指向第一象限区域且运动曲线位于运动向量的第一侧，或者运动向量指向第二象限区域且运动曲线位于运动向量的第二侧，则目标角 度为运动向量与纵轴正方向的夹角；若运动向量指向第一象限区域且运动曲线位于运动向量的第二侧，或者运动向量指向第四象限区域且运动曲线位于运动向量的第一侧，则目标角度为运动向量与横轴正方向的夹角；若运动向量指向第三象限区域且运动曲线位于运动向量的第一侧，或者运动向量指向第四象限区域且运动曲线位于运动向量的第二侧，则目标角度为运动向量与纵轴反方向的夹角；若运动向量指向第二象限区域且运动曲线位于运动向量的第一侧，或者运动向量指向第三象限区域且运动曲线位于运动向量的第二侧，则目标角度为运动向量与横轴反方向的夹角。控制所述目标图像沿所述旋转方向从初始角度旋转至所述目标角度，可以防止目标图像旋转出屏幕。
可选的，控制目标图像沿旋转方向从初始角度旋转至目标角度的过程可以是：获取旋转缓动曲线；根据动画进度和旋转缓动曲线确定当前时刻的旋转比例；根据旋转比例和旋转幅度确定当前角度；基于当前角度将目标图像渲染至当前画面。
其中，旋转幅度为目标角度与初始角度的差值。旋转缓动曲线可以是用户渲染的任意的缓动曲线，此处不做限定。动画进度可以是缓动处理后的动画进度，也可以是未经缓动处理的动画进度。示例性的，将动画进度输入旋转缓动曲线获得当前时刻的旋转比例，将旋转比例与旋转幅度相乘获得当前角度，从而基于当前角度将将目标图像渲染至当前画面。本实施例中，基于旋转缓动曲线确定当前角度，可以提高目标图像旋转的平滑性。
可选的，该方法还包括如下步骤：获取缩放变换曲线和/或透明度变换曲线；根据动画进度和缩放换曲线确定当前时刻的缩放度，和/或根据动画进度和透明度变换曲线确定当前时刻的透明度；基于缩放度和/或透明度将目标图像渲染至当前画面。
其中，缩放变换曲线和透明度变换曲线可以是线性曲线或者缓动曲线，此处不做限定。动画进度可以是缓动处理后的动画进度，也可以是未经缓动处理的动画进度。本实施例中，基于缩放度和/或透明度将目标图像渲染至当前画面， 使得目标图像在运动过程中呈现缩放和/或透明度变换的效果，提高动画的多样性。
本公开实施例的技术方案，确定目标图像在设定坐标系下的起始点和终止点；根据起始点和终止点确定目标图像的运动向量；其中，运动向量为起始点指向终止点的方向向量；根据运动向量确定目标图像的运动曲线；其中，运动曲线包括横向运动曲线和纵向运动曲线；控制目标图像按照运动曲线从起始点运动至终止点，生成目标图像的运动动画。本公开实施例提供的基于图像的动画生成方法，控制目标图像按照由运动向量确定的运动曲线从起始点运动至终止点，可以生成图像的运动动画，使得生成的运动动画平滑过渡，提高动画的流畅度及显示效果。
图8为本公开实施例所提供的一种基于图像的动画生成装置结构示意图，如图8所示，所述装置包括：
起始终止点确定模块810，设置为确定目标图像在设定坐标系下的起始点和终止点；
运动向量确定模块820，设置为根据所述起始点和所述终止点确定所述目标图像的运动向量；其中，所述运动向量为所述起始点指向所述终止点的方向向量；
运动曲线确定模块830，设置为根据所述运动向量确定所述目标图像的运动曲线；其中，所述运动曲线包括横向运动曲线和纵向运动曲线；
动画生成模块840，设置为控制所述目标图像按照所述运动曲线从所述起始点运动至所述终止点，生成所述目标图像的运动动画。
可选的，运动曲线确定模块830，还设置为：
获取所述运动向量的方向信息、与坐标轴的夹角信息及包围盒信息；其中，包围盒为与坐标轴平行的矩形包围盒；
基于所述方向信息、所述夹角信息和所述包围盒信息确定所述目标图像的运动曲线。
可选的，所述方向信息包括所述运动向量指向第一象限区域、所述运动向量指向第二象限区域、所述运动向量指向第三象限区域以及所述运动向量指向第四象限区域中的任意一项；所述夹角信息包括所述运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值、所述运动向量与横轴的夹角小于所述设定阈值以及所述运动向量与纵轴的夹角小于所述设定阈值中的任意一项；所述包围盒信息包括包围盒的尺寸信息，以及包围盒的边与屏幕边界的距离；其中，尺寸信息包括高度和宽度，所述包围盒的边包括上侧边、下侧边、左侧边及右侧边。
可选的，运动曲线确定模块830，还设置为：
根据所述包围盒信息确定所述运动曲线与所述运动向量间的相对位置信息；其中，所述相对位置信息包括所述运动曲线位于所述运动向量的第一侧或者第二侧；
基于所述方向信息、所述夹角信息及所述相对位置信息确定所述目标图像的运动曲线。
可选的，运动曲线确定模块830，还设置为：
若所述包围盒的高度大于或等于宽度，则获取所述包围盒的左侧边与屏幕左边界的第一距离，以及所述包围盒的右侧边与屏幕右边界的第二距离；
获取所述第一距离和所述第二距离间的第一比较结果，并根据所述第一比较结果确定所述运动曲线与所述运动向量间的相对位置信息；
若所述包围盒的高度小于宽度，则获取所述包围盒的上侧边与屏幕上边界的第三距离，以及所述包围盒的下侧边与屏幕下边界的第四距离；
获取所述第三距离和所述第四距离间的第二比较结果，并根据所述第二比较结果确定所述运动曲线与所述运动向量间的相对位置信息。
可选的，运动曲线确定模块830，还设置为：
若所述第一距离大于或等于所述第二距离，则所述运动曲线位于所述左侧边所在的一侧；若所述第一距离小于所述第二距离，则所述运动曲线位于所述 右侧边所在的一侧；
根据所述第二比较结果确定所述运动曲线与所述运动向量间的相对位置信息，包括：
若所述第三距离大于或等于所述第四距离，则所述运动曲线位于所述上侧边所在的一侧；若所述第三距离小于所述第四距离，则所述运动曲线位于所述下侧边所在的一侧。
可选的，运动曲线确定模块830，还设置为：
若所述夹角信息为所述运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域，所述运动曲线位于所述运动向量的第一侧，则确定所述纵向运动曲线为第一缓动曲线，所述横向运动曲线为设定线性曲线；
若所述夹角信息为所述运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述纵向运动曲线为第二缓动曲线，所述横向运动曲线为设定线性曲线；
所述夹角信息为所述运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值，所述方向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第一侧，则确定所述纵向运动曲线为所述第二缓动曲线，所述横向运动曲线为设定线性曲线；
所述夹角信息为所述运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值，所述方向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述纵向运动曲线为所述第一缓动曲线，所述横向运动曲线为设定线性曲线。
可选的，运动曲线确定模块830，还设置为：
若所述夹角信息为所述运动向量与横轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域， 所述运动曲线位于所述运动向量的第一侧，则确定所述纵向运动曲线为第三缓动曲线，所述横向运动曲线为设定线性曲线；
若所述夹角信息为所述运动向量与横轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述纵向运动曲线为第四缓动曲线，所述横向运动曲线为设定线性曲线；
若所述夹角信息为所述运动向量与横轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第一侧，则确定所述纵向运动曲线为所述第四缓动曲线，所述横向运动曲线为设定线性曲线；
若所述夹角信息为所述运动向量与横轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述纵向运动曲线为所述第三缓动曲线，所述横向运动曲线为设定线性曲线。
可选的，运动曲线确定模块830，还设置为：
根据所述方向信息、所述相对位置信息、及所述包围盒的尺寸信息确定所述包围盒的目标边；
根据所述目标边与对应屏幕边界的距离以及所述包围盒的尺寸信息确定第一系数或者第二系数；
根据所述第一系数生成第三缓动曲线，或者根据所述第二系数生成第四缓动曲线。
可选的，运动曲线确定模块830，还设置为：
若所述夹角信息为所述运动向量与纵轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域，所述运动曲线位于所述运动向量的第一侧，则确定所述横向运动曲线为第五缓动曲线，所述纵向运动曲线为设定线性曲线；
若所述夹角信息为所述运动向量与纵轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述横向运动曲线为第六缓动曲线，所述纵向运动曲线为设定线性曲线；
若所述夹角信息为所述运动向量与纵轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第一侧，则确定所述横向运动曲线为第六缓动曲线，所述纵向运动曲线为设定线性曲线；
若所述夹角信息为所述运动向量与纵轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述横向运动曲线为第五缓动曲线，所述纵向运动曲线为设定线性曲线。
可选的，运动曲线确定模块830，还设置为：
根据所述方向信息、所述相对位置信息及所述包围盒的尺寸信息确定所述包围盒的目标边；
根据所述目标边与对应屏幕边界的距离以及所述包围盒的尺寸信息确定第三系数或者第四系数；
根据所述第三系数生成第五缓动曲线，或者根据所述第四系数生成第六缓动曲线。
可选的，动画生成模块840，还设置为：
获取当前时刻对应的动画进度；其中，所述动画进度为当前时刻距离起始时刻间的时长与动画总时长的比例；
根据所述动画进度和所述运动曲线确定所述目标图像在当前时刻的位置信息；
根据所述位置信息将所述目标图像渲染至当前画面，以生成所述目标图像的运动动画。
可选的，还包括：动画生成模块840，还设置为：
对所述动画进度进行缓动处理；
根据缓动处理后的动画进度和所述运动曲线确定所述目标图像在当前时刻的位置信息。
可选的，还包括：旋转模块，设置为：
基于所述方向信息、所述夹角信息及所述相对位置信息确定所述目标图像的旋转方向和目标角度；
控制所述目标图像沿所述旋转方向从初始角度旋转至所述目标角度。
可选的，旋转模块，还设置为：
获取旋转缓动曲线；
根据动画进度和所述旋转缓动曲线确定当前时刻的旋转比例；
根据所述旋转比例和旋转幅度确定当前角度；其中，所述旋转幅度为所述目标角度与所述初始角度的差值；
基于所述当前角度将所述目标图像渲染至当前画面。
可选的，还包括：缩放或透明度变换模块，设置为：
获取缩放变换曲线和/或透明度变换曲线；
根据动画进度和所述缩放换曲线确定当前时刻的缩放度，和/或根据动画进度和所述透明度变换曲线确定当前时刻的透明度；
基于所述缩放度和/或所述透明度将所述目标图像渲染至当前画面。
本公开实施例所提供的基于图像的动画生成装置可执行本公开任意实施例所提供的基于图像的动画生成方法，具备执行方法相应的功能模块。
值得注意的是，上述装置所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本公开实施例的保护范围。
图9为本公开实施例所提供的一种电子设备的结构示意图。下面参考图9， 其示出了适于用来实现本公开实施例的电子设备(例如图9中的终端设备或服务器)500的结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、个人数字助理(Personal Digital Assistant，PDA)、PAD(平板电脑)、便携式多媒体播放器(Portable Media Player，PMP)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字电视(Television，TV)、台式计算机等等的固定终端。图9示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
如图9所示，电子设备500可以包括处理装置(例如中央处理器、图形处理器等)501，其可以根据存储在只读存储器(Read-Only Memory，ROM)502中的程序或者从存储装置508加载到随机访问存储器(Random Access Memory，RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有电子设备500操作所需的各种程序和数据。处理装置501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(Input/Output，I/O)接口505也连接至总线504。
通常，以下装置可以连接至I/O接口505：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置506；包括例如液晶显示器(Liquid Crystal Display，LCD)、扬声器、振动器等的输出装置507；包括例如磁带、硬盘等的存储装置508；以及通信装置509。通信装置509可以允许电子设备500与其他设备进行无线或有线通信以交换数据。虽然图9示出了具有各种装置的电子设备500，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置509从网络上被下载和安装，或者从存储装置508被安装，或者从ROM 502 被安装。在该计算机程序被处理装置501执行时，执行本公开实施例的方法中限定的上述功能。
本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。
本公开实施例提供的电子设备与上述实施例提供的基于图像的动画生成方法属于同一发明构思，未在本实施例中详尽描述的技术细节可参见上述实施例。
本公开实施例提供了一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述实施例所提供的基于图像的动画生成方法。
需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM(Erasable Programmable Read-Only Memory)或闪存)、光纤、便携式紧凑磁盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、射频(Radio Frequency，RF)等等，或者上述的任意合适的组合。
在一些实施方式中，客户端、服务器可以利用诸如HTTP(HyperText Transfer Protocol，超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(Local Area Network，LAN)，广域网(Wide Area Network，WAN)，网际网(例如，互联网)以及端对端网络(例如，ad hoc端对端网络)，以及任何当前已知或未来研发的网络。
上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
上述计算机可读介质承载有至少一个程序，当上述至少一个程序被该电子设备执行时，使得该电子设备：
上述计算机可读介质承载有至少一个程序，当上述至少一个程序被该电子设备执行时，使得该电子设备：确定目标图像在设定坐标系下的起始点和终止点；根据所述起始点和所述终止点确定所述目标图像的运动向量；其中，所述运动向量为所述起始点指向所述终止点的方向向量；根据所述运动向量确定所述目标图像的运动曲线；其中，所述运动曲线包括横向运动曲线和纵向运动曲线；控制所述目标图像按照所述运动曲线从所述起始点运动至所述终止点，生成所述目标图像的运动动画。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括但不限于面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。
本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(Field Programmable Gate Array，FPGA)、专用集成电路(Application Specific Integrated Circuit，ASIC)、专用标准产品(Application Specific Standard Parts，ASSP)、片上系统(System on Chip，SOC)、复杂可编程逻辑设备(Complex Programmable Logic Device，CPLD)等等。
在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、 随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
以上描述仅为本公开的可选实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
此外，虽然采用特定次序描绘了各操作，但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下，多任务和并行处理可能是有利的。同样地，虽然在上面论述中包含了若干具体实现细节，但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地，在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。
尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题，但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反，上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。

Claims (19)

  1. 一种基于图像的动画生成方法，包括：
    确定目标图像在设定坐标系下的起始点和终止点；
    根据所述起始点和所述终止点确定所述目标图像的运动向量；其中，所述运动向量为所述起始点指向所述终止点的方向向量；
    根据所述运动向量确定所述目标图像的运动曲线；其中，所述运动曲线包括横向运动曲线和纵向运动曲线；
    控制所述目标图像按照所述运动曲线从所述起始点运动至所述终止点，生成所述目标图像的运动动画。
  2. 根据权利要求1所述的方法，其中，根据所述运动向量确定所述目标图像的运动曲线，包括：
    获取所述运动向量的方向信息、与坐标轴的夹角信息及包围盒信息；其中，包围盒为包围所述运动向量且与坐标轴平行的矩形包围盒；
    基于所述方向信息、所述夹角信息和所述包围盒信息确定所述目标图像的运动曲线。
  3. 根据权利要求2所述的方法，其中，所述方向信息包括所述运动向量指向第一象限区域、所述运动向量指向第二象限区域、所述运动向量指向第三象限区域以及所述运动向量指向第四象限区域中的任意一项；所述夹角信息包括所述运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值、所述运动向量与横轴的夹角小于所述设定阈值以及所述运动向量与纵轴的夹角小于所述设定阈值中的任意一项；所述包围盒信息包括包围盒的尺寸信息，以及包围盒的边与屏幕边界的距离；其中，尺寸信息包括高度和宽度，所述包围盒的边包括上侧边、下侧边、左侧边及右侧边。
  4. 根据权利要求3所述的方法，其中，基于所述方向信息、所述夹角信息和所述包围盒信息确定所述目标图像的运动曲线，包括：
    根据所述包围盒信息确定所述运动曲线与所述运动向量间的相对位置信息；其中，所述相对位置信息包括所述运动曲线位于所述运动向量的第一侧或者第 二侧；
    基于所述方向信息、所述夹角信息及所述相对位置信息确定所述目标图像的运动曲线。
  5. 根据权利要求4所述的方法，其中，根据所述包围盒信息确定所述运动曲线与所述运动向量间的相对位置信息，包括：
    若所述包围盒的高度大于或等于宽度，则获取所述包围盒的左侧边与屏幕左边界的第一距离，以及所述包围盒的右侧边与屏幕右边界的第二距离；
    获取所述第一距离和所述第二距离间的第一比较结果，并根据所述第一比较结果确定所述运动曲线与所述运动向量间的相对位置信息；
    若所述包围盒的高度小于宽度，则获取所述包围盒的上侧边与屏幕上边界的第三距离，以及所述包围盒的下侧边与屏幕下边界的第四距离；
    获取所述第三距离和所述第四距离间的第二比较结果，并根据所述第二比较结果确定所述运动曲线与所述运动向量间的相对位置信息。
  6. 根据权利要求5所述的方法，其中，根据所述第一比较结果确定所述运动曲线与所述运动向量间的相对位置信息，包括：
    若所述第一距离大于或等于所述第二距离，则所述运动曲线位于所述左侧边所在的一侧；若所述第一距离小于所述第二距离，则所述运动曲线位于所述右侧边所在的一侧；
    根据所述第二比较结果确定所述运动曲线与所述运动向量间的相对位置信息，包括：
    若所述第三距离大于或等于所述第四距离，则所述运动曲线位于所述上侧边所在的一侧；若所述第三距离小于所述第四距离，则所述运动曲线位于所述下侧边所在的一侧。
  7. 根据权利要求4所述的方法，其中，基于所述方向信息、所述夹角信息及所述相对位置信息确定所述目标图像的运动曲线，包括：
    若所述夹角信息为所述运动向量与横轴的夹角大于设定阈值且与纵轴的夹 角大于设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域，所述运动曲线位于所述运动向量的第一侧，则确定所述纵向运动曲线为第一缓动曲线，所述横向运动曲线为设定线性曲线；
    若所述夹角信息为所述运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述纵向运动曲线为第二缓动曲线，所述横向运动曲线为设定线性曲线；
    所述夹角信息为所述运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值，所述方向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第一侧，则确定所述纵向运动曲线为所述第二缓动曲线，所述横向运动曲线为设定线性曲线；
    所述夹角信息为所述运动向量与横轴的夹角大于设定阈值且与纵轴的夹角大于设定阈值，所述方向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述纵向运动曲线为所述第一缓动曲线，所述横向运动曲线为设定线性曲线。
  8. 根据权利要求4所述的方法，其中，基于所述方向信息、所述夹角信息及所述相对位置信息确定所述目标图像的运动曲线，包括：
    若所述夹角信息为所述运动向量与横轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域，所述运动曲线位于所述运动向量的第一侧，则确定所述纵向运动曲线为第三缓动曲线，所述横向运动曲线为设定线性曲线；
    若所述夹角信息为所述运动向量与横轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述纵向运动曲线为第四缓动曲线，所述横向运动曲线为设定线性曲线；
    若所述夹角信息为所述运动向量与横轴的夹角小于所述设定阈值，所述方 向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第一侧，则确定所述纵向运动曲线为所述第四缓动曲线，所述横向运动曲线为设定线性曲线；
    若所述夹角信息为所述运动向量与横轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述纵向运动曲线为所述第三缓动曲线，所述横向运动曲线为设定线性曲线。
  9. 根据权利要求8所述的方法，其中，确定所述纵向运动曲线为第三缓动曲线或者确定所述纵向运动曲线为所述第四缓动曲线，包括：
    根据所述方向信息、所述相对位置信息、及所述包围盒的尺寸信息确定所述包围盒的目标边；
    根据所述目标边与对应屏幕边界的距离以及所述包围盒的尺寸信息确定第一系数或者第二系数；
    根据所述第一系数生成第三缓动曲线，或者根据所述第二系数生成第四缓动曲线。
  10. 根据权利要求4所述的方法，其中，基于所述方向信息、所述夹角信息及所述相对位置信息确定所述目标图像的运动曲线，包括：
    若所述夹角信息为所述运动向量与纵轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域，所述运动曲线位于所述运动向量的第一侧，则确定所述横向运动曲线为第五缓动曲线，所述纵向运动曲线为设定线性曲线；
    若所述夹角信息为所述运动向量与纵轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第一象限区域或者所述运动向量指向第三象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述横向运动曲线为第六缓动曲线，所述纵向运动曲线为设定线性曲线；
    若所述夹角信息为所述运动向量与纵轴的夹角小于所述设定阈值，所述方 向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第一侧，则确定所述横向运动曲线为第六缓动曲线，所述纵向运动曲线为设定线性曲线；
    若所述夹角信息为所述运动向量与纵轴的夹角小于所述设定阈值，所述方向信息为所述运动向量指向第二象限区域或者所述运动向量指向第四象限区域，所述运动曲线位于所述运动向量的第二侧，则确定所述横向运动曲线为第五缓动曲线，所述纵向运动曲线为设定线性曲线。
  11. 根据权利要求10所述的方法，其中，确定所述横向运动曲线为第五缓动曲线或者确定所述横向运动曲线为第六缓动曲线，包括：
    根据所述方向信息、所述相对位置信息及所述包围盒的尺寸信息确定所述包围盒的目标边；
    根据所述目标边与对应屏幕边界的距离以及所述包围盒的尺寸信息确定第三系数或者第四系数；
    根据所述第三系数生成第五缓动曲线，或者根据所述第四系数生成第六缓动曲线。
  12. 根据权利要求1所述的方法，其中，控制所述目标图像按照所述运动曲线从所述起始点运动至所述终止点，生成所述目标图像的运动动画，包括：
    获取当前时刻对应的动画进度；其中，所述动画进度为当前时刻距离起始时刻间的时长与动画总时长的比例；
    根据所述动画进度和所述运动曲线确定所述目标图像在当前时刻的位置信息；
    根据所述位置信息将所述目标图像渲染至当前画面，以生成所述目标图像的运动动画。
  13. 根据权利要求12所述的方法，获取当前时刻对应的动画进度之后，还包括：
    对所述动画进度进行缓动处理；
    根据所述动画进度和所述运动曲线确定所述目标图像在当前时刻的位置信息，包括：
    根据缓动处理后的动画进度和所述运动曲线确定所述目标图像在当前时刻的位置信息。
  14. 根据权利要求4所述的方法，还包括：
    基于所述方向信息、所述夹角信息及所述相对位置信息确定所述目标图像的旋转方向和目标角度；
    控制所述目标图像沿所述旋转方向从初始角度旋转至所述目标角度。
  15. 根据权利要求14所述的方法，其中，控制所述目标图像沿所述旋转方向从初始角度旋转至所述目标角度，包括：
    获取旋转缓动曲线；
    根据动画进度和所述旋转缓动曲线确定当前时刻的旋转比例；
    根据所述当前时刻的旋转比例和旋转幅度确定当前角度；其中，所述旋转幅度为所述目标角度与所述初始角度的差值；
    基于所述当前角度将所述目标图像渲染至当前画面。
  16. 根据权利要求4所述的方法，还包括：
    获取缩放变换曲线和透明度变换曲线中的至少之一；
    执行根据动画进度和所述缩放换曲线确定当前时刻的缩放度，以及根据动画进度和所述透明度变换曲线确定当前时刻的透明度中的至少之一；
    基于所述当前时刻的缩放度和所述当前时刻的透明度中的至少之一将所述目标图像渲染至当前画面。
  17. 一种基于图像的动画生成装置，包括：
    起始终止点确定模块，设置为确定目标图像在设定坐标系下的起始点和终止点；
    运动向量确定模块，设置为根据所述起始点和所述终止点确定所述目标图像的运动向量；其中，所述运动向量为所述起始点指向所述终止点的方向向量；
    运动曲线确定模块，设置为根据所述运动向量确定所述目标图像的运动曲线；其中，所述运动曲线包括横向运动曲线和纵向运动曲线；
    动画生成模块，设置为控制所述目标图像按照所述运动曲线从所述起始点运动至所述终止点，生成所述目标图像的运动动画。
  18. 一种电子设备，包括：
    至少一个处理器；
    存储装置，设置为存储至少一个程序，
    当所述至少一个程序被所述至少一个处理器执行，使得所述至少一个处理器实现如权利要求1-16中任一所述的基于图像的动画生成方法。
  19. 一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-16中任一所述的基于图像的动画生成方法。
PCT/CN2023/111187 2022-08-05 2023-08-04 基于图像的动画生成方法、装置、设备及存储介质 WO2024027820A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210939720.9 2022-08-05
CN202210939720.9A CN115131471B (zh) 2022-08-05 2022-08-05 基于图像的动画生成方法、装置、设备及存储介质

Publications (1)

Publication Number Publication Date
WO2024027820A1 true WO2024027820A1 (zh) 2024-02-08

Family

ID=83385808

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/111187 WO2024027820A1 (zh) 2022-08-05 2023-08-04 基于图像的动画生成方法、装置、设备及存储介质

Country Status (2)

Country Link
CN (1) CN115131471B (zh)
WO (1) WO2024027820A1 (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115131471B (zh) * 2022-08-05 2024-08-02 北京字跳网络技术有限公司 基于图像的动画生成方法、装置、设备及存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107945253A (zh) * 2017-11-21 2018-04-20 腾讯数码（天津）有限公司 一种动画效果实现方法、装置及存储设备
CN111695105A (zh) * 2020-05-29 2020-09-22 北京字节跳动网络技术有限公司 验证方法、装置和电子设备
CN112686974A (zh) * 2020-12-31 2021-04-20 珠海金山网络游戏科技有限公司 动画轨迹缩放方法及装置
WO2021139372A1 (zh) * 2020-01-06 2021-07-15 北京字节跳动网络技术有限公司 图像的处理方法、装置、可读介质和电子设备
CN115131471A (zh) * 2022-08-05 2022-09-30 北京字跳网络技术有限公司 基于图像的动画生成方法、装置、设备及存储介质

Family Cites Families (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP0461577B1 (en) * 1990-06-11 1998-12-02 Hitachi, Ltd. Apparatus for generating object motion path
CN105719330B (zh) * 2014-12-05 2020-07-28 腾讯科技（北京）有限公司 动画曲线的生成方法及装置
CN105046059B (zh) * 2015-06-24 2017-09-29 深圳市腾讯计算机系统有限公司 游戏运动轨迹确定方法及装置
CN106651987B (zh) * 2016-10-10 2018-12-07 腾讯科技（深圳）有限公司 路径规划方法及装置
CN106933592A (zh) * 2017-03-17 2017-07-07 武汉斗鱼网络科技有限公司 互动动画生成方法及装置
CN108364337A (zh) * 2018-01-31 2018-08-03 北京车和家信息技术有限公司 图像的动画展示方法及装置
CN110215685B (zh) * 2019-06-21 2022-09-13 网易（杭州）网络有限公司 游戏中的虚拟对象控制方法及装置、设备、存储介质
CN111127607B (zh) * 2019-12-23 2023-11-03 上海米哈游天命科技有限公司 一种动画生成方法、装置、设备及介质
CN111080751A (zh) * 2019-12-30 2020-04-28 北京金山安全软件有限公司 碰撞渲染方法和装置
CN113534790B (zh) * 2021-05-18 2022-10-11 广西综合交通大数据研究院 路径规划方法、装置、电子设备及计算机可读存储介质
CN113590878B (zh) * 2021-07-28 2023-11-17 宜宾中星技术智能系统有限公司 在视频画面上规划路径的方法、装置、终端设备
CN113888724B (zh) * 2021-09-30 2024-07-23 北京字节跳动网络技术有限公司 一种动画显示方法、装置及设备
CN113658296B (zh) * 2021-10-20 2022-01-25 腾讯科技（深圳）有限公司 一种图像渲染方法及相关装置
CN114419230A (zh) * 2022-01-21 2022-04-29 北京字跳网络技术有限公司 一种图像渲染方法、装置、电子设备及存储介质
CN114494328B (zh) * 2022-02-11 2024-01-30 北京字跳网络技术有限公司 图像显示方法、装置、电子设备及存储介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107945253A (zh) * 2017-11-21 2018-04-20 腾讯数码（天津）有限公司 一种动画效果实现方法、装置及存储设备
WO2021139372A1 (zh) * 2020-01-06 2021-07-15 北京字节跳动网络技术有限公司 图像的处理方法、装置、可读介质和电子设备
CN111695105A (zh) * 2020-05-29 2020-09-22 北京字节跳动网络技术有限公司 验证方法、装置和电子设备
CN112686974A (zh) * 2020-12-31 2021-04-20 珠海金山网络游戏科技有限公司 动画轨迹缩放方法及装置
CN115131471A (zh) * 2022-08-05 2022-09-30 北京字跳网络技术有限公司 基于图像的动画生成方法、装置、设备及存储介质

Also Published As

Publication number Publication date
CN115131471A (zh) 2022-09-30
CN115131471B (zh) 2024-08-02

Similar Documents

Publication Publication Date Title
WO2022111239A1 (zh) 投屏控制方法、设备及电子设备
JP2024505995A (ja) 特殊効果展示方法、装置、機器および媒体
KR20120036979A (ko) 변하는 이미지들의 업데이트들을 클라이언트 디바이스들에게 선택적으로 분배하는 기술
CN116527748B (zh) 一种云渲染交互方法、装置、电子设备及存储介质
WO2024104248A1 (zh) 虚拟全景图的渲染方法、装置、设备及存储介质
WO2024016923A1 (zh) 特效图的生成方法、装置、设备及存储介质
WO2024037556A1 (zh) 图像处理方法、装置、设备及存储介质
WO2023193639A1 (zh) 图像渲染方法、装置、可读介质及电子设备
CN110837332A (zh) 面部图像变形方法、装置、电子设备和计算机可读介质
WO2024027820A1 (zh) 基于图像的动画生成方法、装置、设备及存储介质
WO2023193642A1 (zh) 视频处理方法、装置、设备及介质
WO2023246302A1 (zh) 字幕的显示方法、装置、设备及介质
WO2024011792A1 (zh) 图像处理方法、装置、电子设备及存储介质
WO2023221409A1 (zh) 虚拟现实空间的字幕渲染方法、装置、设备及介质
US11880919B2 (en) Sticker processing method and apparatus
WO2024051639A1 (zh) 图像处理方法、装置、设备及存储介质和产品
WO2024109646A1 (zh) 图像渲染方法、装置、设备及存储介质
WO2023231926A1 (zh) 图像处理方法、装置、设备及存储介质
WO2024032752A1 (zh) 转场特效图的生成方法、装置、设备及存储介质
TW202219822A (zh) 字元檢測方法、電子設備及電腦可讀儲存介質
WO2024041623A1 (zh) 特效图的生成方法、装置、设备及存储介质
WO2023025181A1 (zh) 图像识别方法、装置和电子设备
CN110223220B (zh) 一种处理图像的方法和装置
WO2023169287A1 (zh) 美妆特效的生成方法、装置、设备、存储介质和程序产品
WO2023246468A1 (zh) 视觉定位参数更新方法、装置、电子设备及存储介质

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: 23849524

Country of ref document: EP

Kind code of ref document: A1