Frame animation processing method applied to the theme

By synthesising and segmenting picture frame animations, the number of loading and dyeing is reduced, the frame drop and lag caused by frame animation in the user interface is solved, the user experience and animation processing efficiency is improved, and the theme color matching is adapted.

CN112231029BActive Publication Date: 2025-01-17TENCENT MUSIC ENTERTAINMENT TECH (SHENZHEN) CO LTD
View PDF 3 Cites 0 Cited by

Patent Information

Application Number
CN202011091904.1
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2020-10-13
Publication Date
2025-01-17
Estimated Expiration
2040-10-13

AI Technical Summary

Technical Problem

In the prior art, the large number of frame animations loaded in the user interface of a computer operating system or application may cause frame drops or 'stuttering' in the user interface, affecting the user experience, especially when the theme or skin changes, the animation color matching is more serious. .

Method used

By detecting the trigger operation of topic transformation, multiple continuous picture frames are loaded to synthesize a large image, divided into multiple continuous picture frames, and played frame by frame according to timing, reducing the number of repeated loading and dyeing of picture frames, and using one hard disk reading and Layer dyeing significantly improves reading and dyeing speed and reduces lag and frame drops.

Benefits of technology

It significantly improves the initialization and dyeing speed of frame animation, reduces the volume of application installation packages, improves user experience, avoids frame drops and lags, and provides more coordinated multiple transformable themes or skins.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN112231029B_ABST
    Figure CN112231029B_ABST
Patent Text Reader

Abstract

The present application discloses a frame animation processing method applied to a theme, comprising: detecting a trigger operation of theme change; in response to the detected trigger operation, loading a composite image including a plurality of continuous picture frames; dividing the composite image into a plurality of continuous picture frames; playing the plurality of continuous picture frames frame by frame in a time sequence to display a frame animation composed of the plurality of continuous picture frames. The present application also discloses an electronic device.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of computer technology, in particular to image processing technology, and specifically to a frame animation processing method applied to a theme and related electronic equipment. Background Art

[0002] With the development of computer technology, especially mobile terminals, the user interface (UI) of the computer operating system (OS) or the software or application installed in the operating system is also intended to present richer content and more realistic effects. The user interface of the computer operating system, software or application not only contains a large number of backgrounds, buttons or controls, but also may contain various animations, such as frame animations. For various purposes, the current technology also proposes that the computer operating system, software or application user interface has a replaceable theme or "skin". The frame animation loaded in large quantities in the theme may adversely cause frame drops or "stuttering" phenomena in the user interface, affecting the user experience.

[0003] In addition, according to the selected theme or skin, the user interface of the computer system, software or application can display a coordinated background, button or control color or tone. At the same time, it is also possible to make the animation in the user interface, such as frame animation, adapt to the color of the theme or skin. However, the animation introduced for this purpose, especially the color processing of frame animation, may cause the frame drop or "stuttering" phenomenon in the user interface to be more serious.

[0004] To this end, for changeable user interface themes or skins, it is hoped to effectively improve the processing efficiency of animations, especially frame animations, and improve the user experience of animations, especially frame animation displays, and minimize or avoid frame drops or "stuttering" phenomena.

[0005] The content of this background technology description is only for facilitating understanding of the relevant technology in this field and is not regarded as an admission of the prior art. Summary of the invention

[0006] Therefore, the embodiments of the present invention intend to provide a frame animation processing method and device applied to a theme, as well as an electronic device and a storage medium that can implement frame animation processing, which effectively improve the processing efficiency and display effect of frame animation in a changeable theme or skin.

[0007] In an embodiment of the present invention, a frame animation processing method applied to a theme is provided, comprising:

[0008] Detect triggering actions for theme changes;

[0009] In response to the detected trigger operation, loading a composite image including a plurality of consecutive image frames;

[0010] dividing the composite image into a plurality of consecutive image frames;

[0011] The plurality of continuous picture frames are played frame by frame in a time sequence to display a frame animation composed of the plurality of continuous picture frames.

[0012] Optionally, the method may further include coloring the composite image to match a theme color scheme in response to the detected trigger operation.

[0013] In an embodiment of the present invention, a frame animation processing device is provided, comprising:

[0014] A detection unit configured to detect a triggering operation of a theme change;

[0015] a loading unit configured to load a composite image including a plurality of consecutive image frames in response to the detected trigger operation;

[0016] a segmentation unit configured to segment the composite image into a plurality of continuous image frames;

[0017] The playback unit is configured to play the plurality of continuous picture frames frame by frame in a time sequence to display a frame animation composed of the plurality of continuous picture frames.

[0018] Optionally, the frame animation processing device may further include a coloring unit configured to perform coloring processing on the synthetic image in response to the detected trigger operation.

[0019] In an embodiment of the present invention, an electronic device is provided, comprising: a processor and a memory storing a computer program, wherein the processor is configured to execute the frame animation processing method described in any embodiment when running the computer program.

[0020] In an embodiment of the present invention, a storage medium is provided, wherein the storage medium stores a computer program, and the computer program is configured to execute the frame animation processing method described in any embodiment when executed.

[0021] The embodiment of the present invention proposes a frame animation processing solution applied to the theme, which can greatly reduce the repeated loading of picture frames of the frame animation, improve the user experience of frame animation display, and minimize or avoid frame drops or "stuttering" phenomena.

[0022] In a further embodiment of the present invention, a frame animation processing scheme adapted to the theme color can be obtained. On the one hand, this can provide users with multiple switchable themes or skins with a more coordinated viewing experience. On the other hand, it can effectively improve the frame animation processing efficiency in the themes or skins, improve the user experience of frame animation display, and minimize or avoid frame drops or "stuttering" phenomena.

[0023] In particular, as an explanation but not limitation, the frame animation processing scheme of the embodiment of the present invention has further technical effects compared to a possible scheme of changing themes or skins known to the inventors. In this possible scheme of changing themes or skins, in order to achieve animation effects, an application installed in an operating system such as iOS reads N picture frames in chronological order, and then displays them frame by frame in chronological order, so as to achieve the effect of frame animation. For example, when a user selects a non-default theme or skin, it is necessary to dye each frame, and the higher the number of animation frames, the more time it takes to read and dye the picture frames. Therefore, when initializing and adapting the frame animation, it is necessary to repeatedly initiate multiple reads and dyes from the hard disk. The total time consumption of reading and dyeing is relatively large, and the application is prone to frame drops, freezes, and other phenomena that affect the user experience.

[0024] In addition, the image frames in the application installation package are composed of image pixel information and additional image information. When the number of image frames in the frame animation is relatively large, the size of the application installation package will increase.

[0025] In contrast, the frame animation processing solution in the embodiment of the present invention may also have some or all of the following technical effects:

[0026] 1. By combining multiple image frames into a large image, only one hard disk read is required when initializing the frame animation. The time spent reading a large image is much faster than reading multiple small images, which significantly improves the reading speed of image frame materials, thereby reducing the initialization time of the frame animation and reducing the possibility of adverse experiences such as freezes and frame drops.

[0027] 2. By combining multiple image frames into a large image, when dyeing the frame animation, only one layer dyeing context needs to be created, and only one image needs to be dyed, which reduces the number of image dyeing times and improves the speed of image dyeing, thereby reducing the time consumption of frame animation dyeing and further avoiding adverse experiences such as freezes and frame drops.

[0028] 3. By combining multiple image frames into one large image, you can choose to compress the composite image as a whole, so that the pixel information of the composite image is smaller than the sum of the pixel information of multiple image frames. The additional information of the image can also be optimized from multiple copies to one copy, reducing the total file size of the frame animation material. As a result, the size of the application installation package is reduced.

[0029] Optional features and other effects of the embodiments of the present invention are partially described below and partially understood by reading this document. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] The embodiments of the present invention are described in detail with reference to the accompanying drawings. The elements shown are not limited by the proportions shown in the accompanying drawings. The same or similar reference numerals in the accompanying drawings represent the same or similar elements, wherein:

[0031] Figure 1 A first exemplary flow chart of a frame animation processing method according to an embodiment of the present invention is shown;

[0032] Figure 2 A second exemplary flow chart of the frame animation processing method according to an embodiment of the present invention is shown;

[0033] Figure 3 A third exemplary flow chart showing a frame animation processing method according to an embodiment of the present invention;

[0034] Figure 4 A fourth exemplary flow chart showing a frame animation processing method according to an embodiment of the present invention;

[0035] FIG. 5A to FIG. 5C A schematic diagram showing an example of implementing a frame animation processing method according to an embodiment of the present invention;

[0036] Fig. 6A and Figure 6B A schematic diagram showing an example of implementing a frame animation processing method according to an embodiment of the present invention;

[0037] Figure 7 A schematic diagram showing the structure of a frame animation processing device according to an embodiment of the present invention is shown;

[0038] Figure 8 A schematic diagram showing an exemplary hardware structure of a mobile terminal capable of implementing the frame animation processing method according to an embodiment of the present invention;

[0039] Fig. 9 A schematic diagram of an exemplary operating system structure of a mobile terminal capable of implementing the frame animation processing method according to an embodiment of the present invention is shown;

[0040] Fig.10 A schematic diagram of an exemplary operating system structure of a mobile terminal capable of implementing the frame animation processing method according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0041] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with specific implementation methods and drawings. Here, the exemplary implementation methods of the present invention and their descriptions are used to explain the present invention, but are not intended to limit the present invention.

[0042] The embodiment of the present invention provides a frame animation processing method and device applied to a theme, as well as related electronic devices and storage media. The frame animation processing method can be implemented with the aid of one or more computers, such as terminals, such as mobile terminals, such as smart phones. In some embodiments, the frame animation processing device can be implemented by software, hardware, or a combination of software and hardware.

[0043] The frame animation processing scheme (method, apparatus, device, etc.) of the embodiment of the present invention can be applied to the operating system (OS) of a computer or the user interface (UI) of the software or application (APP) installed in the operating system, and these user interfaces can have a changeable theme or skin or a changeable theme or skin color. For example, when the user switches the theme or skin of the operating system, software or application, or when the operating system, software or application changes under other triggering conditions, the frame animation processing scheme of the embodiment of the present invention can process the frame animation so that the frame animation adapts to the changed theme or skin color.

[0044] In this article, "Theme" or "Skin" has the normal meaning in the computer field, and the two can generally be used interchangeably in this specification. In some embodiments, the theme or skin may refer to the visual appearance of an operating system, software, or application, and may include but is not limited to the appearance, fonts, colors, buttons, wallpapers, etc. in the user interface. In an embodiment of the present invention, the theme or skin may be at the operating system level or the software / application level. In an embodiment of the present invention, the theme or skin may be interpreted relatively broadly, covering the equivalents or substitutions of themes or skins in the field, for example, may include "light (display) mode" / "day mode", "dark (display) mode" / "night mode", "eye protection mode", etc.

[0045] In this article, "color matching" means color or color matching, such as the color or color matching of a theme or skin. In an embodiment of the present invention, "color matching" is not limited to only one color, but may include multiple colors or tints. For example, in some embodiments, a theme or skin color matching may include a first color or "primary color", and one or more secondary colors, which may be colors that conform to the theme or skin color matching style, including but not limited to colors similar to the primary color, colors of the same color as the primary color but different hues, saturation or contrast, colors that clash with the primary color, colors that are inverse to the primary color, etc., which fall within the scope of the invention. In this article, color or dyeing covers both colored and achromatic colors, such as black, white and gray.

[0046] In this article, "frame animation" can also be called frame-by-frame animation. Its principle is to decompose animation actions in "continuous key frames", that is, to draw the content frame by frame on each frame of the timeline, so that it can be played continuously to form an animation.

[0047] In an embodiment of the present invention, a frame animation processing method applied to a subject is provided, which can be implemented by a computer, such as a terminal, especially a mobile terminal, such as a smart phone; but it can also be implemented by a PC. In some embodiments, the frame animation processing method according to the present invention can be implemented in different operating system (OS) platforms (including directly in the operating system and in software or applications (APP) installed in the operating system), including mobile operating systems or PC operating systems. The operating system may include but is not limited to iOS, Android and Android-based derivative systems (including but not limited to MIUI, EMUI, Color OS, etc.), Mac OS series, Windows series. Multiple illustrative embodiments or examples of the present invention are described using the iOS platform as an example, but it can be imagined that many solutions based on the concept of the present invention can be applied to other operating system platforms.

[0048] In an embodiment of the present invention, a method for theme change can also be provided, which includes the above frame animation processing method or is used in substitution with the frame animation processing method. In other words, when the theme is changed, other processing can also be performed, such as the known change of the background, icon or control shape or color.

[0049] In some embodiments, the frame animation is at the software or application level, such as being set in the user interface of an application (APP) installed in the operating system. In other embodiments, the frame animation is at the operating system level, such as being set directly in the user interface of the operating system.

[0050] In some embodiments, the frame animation at the software or application level is adapted to the theme or skin transformation of the software or application. However, in other embodiments, the frame animation at the software or application level can be adapted to the theme or skin transformation of the operating system where the software or system is installed, which falls within the scope of the present invention.

[0051] like Figure 1 As shown, in an exemplary embodiment, a frame animation processing method applied to a theme may include steps S101 to S105.

[0052] S101: Detecting a triggering operation of theme change.

[0053] In some embodiments, the frame animation is at the software or application level, that is, the frame animation is applied to the software or application installed in the operating system.

[0054] In a further embodiment, detecting the triggering operation of theme change includes detecting the triggering operation of the user selecting the theme change of the application. For example, a click of the user selecting the theme or skin that the user likes can be detected. In some embodiments, the selection can be made through other operations, such as selecting a night or day skin or mode by shaking the phone.

[0055] As mentioned above, the frame animation at the software or application level can be adapted to the theme or skin change of the operating system on which the software or system is installed.

[0056] In some embodiments, the triggering of the theme change may be based on user operation, or may be automatically triggered based on time or scene changes.

[0057] In some embodiments, detecting a triggering operation of theme change includes detecting a triggering operation of theme change of the operating system. The triggering of theme change of the operating system may be based on a user operation, such as the aforementioned click or shake, or may be automatically triggered based on time or scene changes, such as the operating system automatically entering a night or day theme or mode based on time.

[0058] S102: In response to the detected trigger operation, loading a composite image including a plurality of consecutive image frames.

[0059] In some embodiments, the loading may be reading from an internal or external memory of the computer, or loading from a memory (i.e., cache) within a processor. Optionally, the method may further include step S103: in response to the detected trigger operation, coloring the composite image to match the theme color scheme.

[0060] In these embodiments, by performing the coloring process on the composite image, the frame animation can be advantageously adapted to the theme color scheme in a resource-saving manner.

[0061] In some embodiments, a determination step may be included, such as:

[0062] In response to the detected trigger operation, determining whether the composite image needs to be dyed;

[0063] If so, the composite image is dyed to match the theme color.

[0064] In these embodiments, for example, the coloring operation of the frame animation under the "default" theme may be omitted.

[0065] In some embodiments, the coloring may be implemented in an image processing framework and / or by calling various possible rendering modules or instructions.

[0066] In some embodiments, the coloring of the composite image may have the following exemplary code:

[0067] UIGraphicsBeginImageContextWithOptions(self.size,NO,self.scale);

[0068] [tintColor setFill];

[0069] CGRect bounds=CGRectMake(0,0,self.size.width,self.size.height);

[0070] UIRectFill(bounds);

[0071] [self drawInRect:bounds blendMode:kCGBlendModeDestinationIn

[0072] alpha:1.0f]; / / kCGBlendModeDestinationIn:R=D*Sa

[0073] UIImage*tintedImage=UIGraphicsGetImageFromCurrentImageContext();

[0074] UIGraphicsEndImageContext();

[0075] return tintedImage;

[0076] In some embodiments, the theme has a primary color, and the tinted color is a color different from the primary color.

[0077] S104: Divide the composite image into a plurality of continuous image frames.

[0078] In some embodiments, the plurality of consecutive picture frames may be segmented using a segmentation tool or instruction provided by an operating system.

[0079] In some embodiments, for example, the multiple image frames may be segmented by a CGImageCreateWithImageInRect instruction.

[0080] In some examples, the segmented picture frame may have the following exemplary code:

[0081]

[0082] S105: Play the multiple continuous picture frames frame by frame in time sequence to display a frame animation composed of the multiple continuous picture frames.

[0083] In some embodiments, step S105 may include:

[0084] Overlaying the layers where the multiple continuous image frames are located on the user interface;

[0085] Rendering and displaying a user interface including the image frame.

[0086] In the embodiment of the present invention, the picture frame (frame animation) and other user interface features can be processed in layers, and then the user interface window is rendered and displayed in layers. In the embodiment of the present invention, the "coloring" is independent of the rendering of the user interface for display.

[0087] In an embodiment of the present invention, rendering and scanning of the display may be performed to realize display. The rendering may be performed on the image frame formed by dyeing and segmentation. The rendered image frame (e.g., in the form of a bitmap) may be stored in a frame buffer for display in the display, e.g., by progressive scanning.

[0088] In an exemplary embodiment, the rendering may adopt iOS or other rendering routes, such as including obtaining primitives of an image (such as a picture frame formed by shading and segmentation), geometric processing primitives (such as vertex shading, shape assembly and geometry shading), converting primitives into pixel information through rasterization, and processing pixel information to obtain a bitmap.

[0089] In a further exemplary embodiment, the bitmap may be stored in a frame buffer to be displayed on a display by scanning line by line.

[0090] In an embodiment of the present invention, before obtaining a composite image including a plurality of continuous image frames, a step of preprocessing the plurality of continuous image frames used to construct a frame animation is also included, for example Figure 2 Steps S201 to S203 are shown.

[0091] S201: providing a plurality of continuous picture frames.

[0092] In some embodiments, the plurality of continuous picture frames may be provided in a variety of ways. For example, in one embodiment, the plurality of continuous picture frames may be produced using the Objective-C language and the Core Animation framework provided by Apple.

[0093] S202: Synthesize the multiple consecutive picture frames into the synthesized image, and generate synthesis sequence information of the multiple consecutive picture frames.

[0094] In some embodiments, various picture synthesis tools and programming language instructions may be used to synthesize the multiple consecutive picture frames.

[0095] In some embodiments, the synthesis order information of the plurality of continuous picture frames may include, for example, but is not limited to, arrangement direction, arrangement row and column, size of a single picture frame and / or whether to fill the edge area, etc.

[0096] In some embodiments, compositing may also be accomplished via the CGImageCreateWithImageInRect instruction.

[0097] S203: compress and store the synthesized image.

[0098] In some embodiments, the composite image may be compressed using a variety of image compression formats or algorithms, including but not limited to lossless image compression formats or algorithms, such as PNG format. In these embodiments, even if multiple consecutive picture frames have been subjected to image compression, compression of the composite image is still advantageous. As an explanation and not limitation, further compression of the composite image makes the pixel information of the composite image smaller than the sum of multiple consecutive picture frames (compressed). In particular, this makes the composite image contain only one copy of the additional picture information, compared to the multiple copies of additional picture information carried by multiple consecutive picture frames. As a result, this reduces the file size of the frame animation, and thereby reduces the size of the application installation package, and also improves the initialization reading efficiency of the frame animation.

[0099] In an embodiment of the present invention, dividing the colored composite image into a plurality of continuous image frames comprises:

[0100] S301: Reading synthesis sequence information;

[0101] S302: cutting the composite image in an equal-width cropping manner according to the synthesis order, so as to obtain picture frames in sequence according to the time sequence.

[0102] In an embodiment of the present invention, the coloring process is performed on the synthetic image in response to the detected trigger operation, including:

[0103] S401: Obtaining the attribute value of the transformed theme;

[0104] S402: Determine a coloring parameter value corresponding to the frame animation based on the attribute value of the theme;

[0105] S403: Creating a layer tinting context for the composite image based on the tinting parameter value;

[0106] S404: In a predetermined layer, the composite image is dyed based on the layer dyeing context to adapt to the theme color scheme.

[0107] In some embodiments, as described above, for frame animation processing at the application level, you can choose to adapt the application theme or the operating system theme, which falls within the scope of the invention.

[0108] In further embodiments, the dyeing process may have different specific schemes according to the adapted theme.

[0109] For example, in one embodiment, the frame animation at the application level can adapt to the change of the application theme. Here, the trigger operation of detecting the theme change includes: detecting the trigger operation of the user selecting the theme change of the application.

[0110] In this embodiment, the dyeing process may include:

[0111] a1) Get the properties of the application theme selected by the user,

[0112] a2) querying the coloring parameters corresponding to the frame animation based on the attributes of the application theme selected by the user,

[0113] a3) creating a layer tinting context for the composite image based on the tinting parameter values,

[0114] a4) In a predetermined layer, the composite image is dyed based on the layer dyeing context to adapt to the theme color scheme of the application.

[0115] For example, in one embodiment, the frame animation at the application level can adapt to the change of the operating system theme. Here, the trigger operation of detecting the theme change includes: detecting the trigger operation of the theme change of the operating system on which the application is installed.

[0116] In this embodiment, in response to the detected trigger operation, coloring the synthetic image includes:

[0117] b1) obtaining the main color of the transformed theme of the operating system,

[0118] b2) setting the color used for frame animation coloring based on the primary color,

[0119] b3) creating a layer tinting context for the composite image based on the set color,

[0120] b4) In a predetermined layer, the composite image is dyed based on the layer dyeing context to adapt to the theme color of the operating system.

[0121] In some embodiments, the step b4 may include, when the main color is obtained, calculating using preset conditions or determining the dyeing color in other ways. For example, when the main color RGB value of the operating system theme is obtained, the inverted color value or the contrasting color value is calculated or determined according to the predetermined conditions to determine the dyeing of the frame animation. Such a setting can provide great flexibility, and even if the operating system or its theme is updated (the application provider often has not updated the application in time for this), the frame animation of the application can still present a harmonious effect.

[0122] Although not shown, in some embodiments, frame animation at the operating system level may respond to a triggering operation of an operating system theme or skin change and be combined with the above-mentioned related coloring and segmentation features, which falls within the scope of the present invention.

[0123] refer to FIG. 5A to FIG. 5C An example schematic diagram of implementing a frame animation processing method according to an embodiment of the present invention is shown.

[0124] like Figure 5A As shown, an application provider / developer may generate (eg, with the aid of Core Animation) a plurality of consecutive image frames for frame animation, for example, the frame animation involves 14 image frames 510 .

[0125] like Figure 5A and Figure 5B As shown, after the picture frame 510 is generated, a composite image 520 or a "large image" can be synthesized by the picture synthesis tool described in the embodiment of the present invention. Optionally, it can be further compressed. In the embodiment shown, the picture frames are synthesized from left to right in time sequence. In some embodiments, other synthesis methods can be used, such as from right to left, from top to bottom, from bottom to top, or multiple rows and columns.

[0126] When the operating system, software or application is running, the frame animation can be initialized. In some embodiments, the initialization can be independent of the triggering operation of the theme change, such as being stored in the cache of the processor. In other embodiments, the initialization can be performed after the triggering operation. In the initialization, for example, the optimized composite image 520 can be read through the general code method provided by the operating system.

[0127] FIG. 5A to FIG. 5C Not shown, in the event of a triggering operation of a theme change, the composite image 520 is colored.

[0128] like Figure 5CAs shown, after the composite image 520 is dyed, the composite image 520 is cropped to equal width. For example, for the 14 30*30 images in the example shown, the size of the composite large image is 420*30, and it is cropped according to 14 equal parts to obtain 14 30*30 image frames again.

[0129] In some embodiments, after the dyed picture frames are obtained, the picture frames are played / displayed in sequence (such as the rendering and scanning described above).

[0130] In the example shown, the segmentation is performed sequentially in time sequence, so the segmentation and subsequent playback / display (rendering and scanning) of each picture frame 540 cropped sequentially in time sequence t can basically form a pipeline, thereby avoiding frame drops and freezes to the greatest extent.

[0131] refer to Fig. 6A and Figure 6B , shows a schematic diagram of another example of implementing the frame animation processing method according to an embodiment of the present invention.

[0132] exist Fig. 6A and Figure 6B The example shown is implemented in an electronic device based on the iOS operating system platform, such as an iPhone. Fig. 6A and Figure 6B In the example shown, the frame animation is generated by an application installed in the iOS operating system platform, such as a music player application ( Fig. 6A ). However, it is conceivable that the frame animation and its processing in this example can be directly used in the user interface of the iOS operating system, or directly used in other operating system platforms or used in software or applications installed in other operating system platforms. The features described in this example can also be combined with the embodiments or examples described based on other platforms or applications.

[0133] exist Fig. 6A In the example shown, in an electronic device 600 based on the iOS operating system platform, such as an iPhone, related applications (APPs), such as a music player application, are provided.

[0134] The user can select different themes or skins for the application or its user interface. In some embodiments, the theme or skin can be installed with the application or downloaded, or can be downloaded by the user by clicking in the user interface of the application.

[0135] Continue to refer Fig. 6AWhen the user selects a theme or skin for an application, for example, the user interface of the application will be transformed to adapt to the theme or skin selected by the user. The adaptation may include a transformation of a background image, a transformation of a background color, a transformation of a button or other space shape or color. In particular, in this example, the adaptation also includes color adaptation of the frame animation 610 presented in each user interface.

[0136] Specifically, in the example shown, the frame animation 610 is, for example, a frame animation representing "loading". In this example, the frame processing method described in the embodiment of the present invention can be used to process the frame animation 610, such as the frame animation representing "loading".

[0137] For example, in response to a trigger operation in which a user selects a new theme, the application in the foreground begins initializing frame animation, using the common code of the iOS operating system (e.g., via Fig. 9 The image 10 in the media layer 920 shown in FIG. 5 reads a synthesized and preferably optimized and compressed synthetic image (e.g., the synthetic image 520 shown in FIG. 5 ). The synthesized image or "large image" read can be dyed as a whole. In the embodiment shown, the attributes for the selected new theme can also be obtained, and based on the attributes of the theme, the dyeing parameters of the corresponding frame animation under the attributes of the theme can be obtained by querying, for example, directly looking up a table, such as a dyeing color value (e.g., RGB value).

[0138] However, it is also conceivable that in different embodiments, different dyeing schemes may be used, which falls within the scope of the invention.

[0139] For example, in some embodiments, the application may have a default theme and the composite image for the frame animation may have a default frame animation color adapted to the default theme. In some embodiments, if the selected theme is the default theme, no or no coloring may be performed. If the selected theme is a non-default theme, coloring may be performed according to the determined coloring parameters (such as the coloring color value obtained by querying).

[0140] In addition, in some embodiments, in order to obtain higher theme adaptability, such as being able to adapt to themes provided by a third party, the acquired theme attributes may include a pointer to the coloring parameters or directly include the coloring parameters. For example, for each theme, such as a theme provided by a third party, it may specify the color system parameters or other parameters of the theme, and then the coloring color of the frame animation corresponding to the color system may be queried. Alternatively, the attributes of each theme, such as a theme provided by a third party, may directly include the coloring parameters of the frame animation, thereby directly queried the coloring parameters of the corresponding frame animation.

[0141] In the embodiment of the present invention, the frame animation 610 may have a color that is the same as or different from the main color of the theme or skin, and may have a color that is the same as or different from the color of other user interface features.

[0142] exist Fig. 6A In the example shown, for example, the background area 620 may have the main color of the theme or be dyed into the main color, such as blue; the frame animation 610 may have a color that is different from the main color of the theme but still matches the theme color, such as white. Other features of the user interface may also have different colors. For example, the function area 630 may have its own color. For example, in Fig. 6A In the music playing application shown, the function area 630, such as the playlist area, can be an album image and have its own color. Other controls or button areas can also have colors that are adapted to the theme color, which can be the same as or different from the color of the frame animation. For example, the lower button area 640 can have a dark or light achromatic color depending on whether the theme is dark or light.

[0143] refer to Figure 6B In the example shown in FIG. 6 , the user interface of the application may include more than one frame animation, such as a first frame animation and a second frame animation. In addition, the user interface of the application may include multiple sub-layers.

[0144] (sublayers), such as a first sublayer / layer (sublayer1) 660, a second sublayer / layer (sublayer2) 670, and a third sublayer / layer (sublayer3) 690. Figure 6B As shown, the first frame animation can be set in the first sublayer 660, and the second frame animation can be set in the second sublayer 670. In addition, the button or button area can be set in the third sublayer 690. The user interface of the application can be constructed into a tree-like layer structure, and can optionally include a window layer, a view layer and / or the multiple sublayers. In some embodiments, the multiple sublayers can be superimposed on the viewport layer, and in some embodiments, the background or background area 680 can be directly set in the viewport layer. In some embodiments, the viewport layer can be superimposed on the window layer. Then, as described above, the user interface in the window layer can be rendered (drawn) and scanned and displayed in the display screen accordingly.

[0145] exist Figure 6B The first and second frame animations in the example shown may implement the theme adaptation method or frame animation processing method described in the embodiment of the present invention, for example.

[0146] For example, in Figure 6BIn the example shown, the theme adaptation method or the frame animation processing method includes:

[0147] c1) detecting the triggering operation of the theme change;

[0148] c2) acquiring a first composite image including a plurality of consecutive first image frames;

[0149] c3) acquiring a second composite image including a plurality of consecutive second image frames;

[0150] c4) in response to the detected trigger operation, performing a first coloring process on the first synthetic image;

[0151] c5) in response to the detected trigger operation, performing a second coloring process on the second synthetic image;

[0152] c6) dividing the dyed first composite image into a plurality of consecutive first image frames;

[0153] c7) dividing the dyed second composite image into a plurality of consecutive second picture frames;

[0154] c8) Displaying the first frame animation and the second frame animation together in the user interface.

[0155] For example, in some embodiments, the first frame of animation can be dyed with a first dyed color; the second frame of animation can be dyed with a different second dyed color. In some embodiments, the first and second dyed colors are different from the main color of the theme. However, it should be noted that the first and second frames of animation both have dyed colors that match the corresponding theme or skin color.

[0156] In this example, as described above, different dyeing processes can be set for the first and second frames of animation, for example, the first and second dyeing contexts are set respectively, and dyeing processes are performed in the first and second layers. For example, the above step c4 may include: obtaining the properties of the application theme selected by the user; querying the first dyeing parameter corresponding to the first frame of animation based on the properties of the application theme selected by the user; creating a first layer dyeing context for the first composite image based on the first dyeing parameter value; in the first layer (sublayer), dyeing the first composite image based on the first layer dyeing context (for example, with the first dyeing color). The above step c5 can perform similar processing on the composite image of the picture frame of the second frame of animation.

[0157] In some exemplary embodiments, the above-mentioned dyeing process may be before rendering (drawing) and scanning and displaying on the display, such as before the above-mentioned step c8. For example, the c8 embodiment may include obtaining primitives of a view superimposed by multiple sub-layers (including the first and second frames of animation), geometric processing primitives, rasterizing primitives into pixel information, processing pixel information to obtain a bitmap, storing it in a frame buffer, and scanning and displaying it in a display (monitor) based on the cached content of the frame buffer.

[0158] In such Figure 7 In the exemplary embodiment shown, a frame animation processing device 700 is also provided. The frame animation processing device 700 may include a detection unit 710, a loading unit 720, a segmentation unit 740 and a playback unit 750. Optionally, the frame animation processing device 700 further includes a dyeing unit 730. In an embodiment of the present invention, the detection unit 710 is configured to detect a trigger operation of a theme change. In an embodiment of the present invention, the loading unit 720 is configured to load a composite image including a plurality of continuous picture frames in response to the detected trigger operation. In an embodiment of the present invention, the segmentation unit 740 is configured to segment the composite image into a plurality of continuous picture frames. In an embodiment of the present invention, the playback unit 750 is configured to play the plurality of continuous picture frames frame by frame in a time sequence to display a frame animation composed of the plurality of continuous picture frames. Optionally, in an embodiment of the present invention, the dyeing unit 730 is configured to perform dyeing processing on the composite image in response to the detected trigger operation.

[0159] In an embodiment of the present invention, the playback unit 750 may include a rendering unit and a display, wherein the rendering unit may render the image frames formed by dyeing and segmentation, such as those described above. The rendered image frames (e.g., in the form of bitmaps) may be stored in a display (frame) buffer for display in a display, such as by progressive scanning.

[0160] In an embodiment of the present invention, an electronic device is provided, comprising: a processor and a memory storing a computer program, wherein the processor is configured to implement any frame animation processing method according to an embodiment of the present invention when running the computer program. In addition, a frame animation processing device according to an embodiment of the present invention can also be provided.

[0161] In a preferred embodiment of the present invention, the electronic device is a mobile terminal, preferably a mobile phone. As an exemplary implementation scheme only, Figure 8 FIG. 8 is a schematic diagram showing a hardware structure of an electronic device, such as a mobile terminal 800, according to a specific embodiment of the present invention; and Fig. 9 and Fig.10 A schematic diagram of the system structure of a specific embodiment of an electronic device, such as a mobile terminal, is shown.

[0162] In the illustrated embodiment, the mobile terminal 800 may include a processor 801, an external memory interface 812, an internal memory 810, a universal serial bus (USB) interface 813, a charging management module 814, a power management module 815, a battery 816, a mobile communication module 840, a wireless communication module 842, antennas 839 and 841, an audio module 834, a speaker 835, a receiver 836, a microphone 837, an earphone interface 838, a button 809, a motor 808, an indicator 807, a subscriber identification module (SIM) card interface 88, a display screen 805, a camera device 806, and a sensor module 820, etc.

[0163] It is to be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the mobile terminal 800. In other embodiments of the present application, the mobile terminal 800 may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0164] In some embodiments, the processor 801 may include one or more processing units. In some embodiments, the processor 801 may include one or a combination of at least two of the following: an application processor (AP), a modem processor, a baseband processor, a graphics processing unit (GPU)

[0165] 818, image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, neural network processor (NPU), etc. Different processing units may be independent devices or integrated in one or more processors.

[0166] The controller may be the nerve center and command center of the mobile terminal 800. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0167] A memory may also be provided in the processor for storing instructions and data. In some embodiments, the memory in the processor is a cache memory. The memory may store instructions or data that the processor has just used or circulated. If the processor needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 801, and thus improves the efficiency of the system.

[0168] NPU is a neural network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transmission mode between neurons in the human brain, it can quickly process input information and can also continuously self-learn.

[0169] The GPU is a microprocessor for image processing, which is connected to the display screen and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor may include one or more GPUs, which execute program instructions to generate or change display information. In an embodiment of the present invention, the frame animation processing and the above-mentioned rendering can be partially, mainly or completely implemented in the GPU.

[0170] A digital signal processor (ISP) is used to process digital signals. In addition to processing digital image signals, it can also process other digital signals.

[0171] In some embodiments, the processor 801 may include one or more interfaces. The interface may include an integrated circuit (I2C) interface, an integrated circuit internal sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver and transmitter (UART) interface, a mobile industry processor interface (MIPI), a general purpose input and output (GPIO) interface, a subscriber identity module (SIM) interface, a universal serial bus (USB) interface, etc.

[0172] It is understandable that the interface connection relationship between the modules illustrated in the embodiments of the present application is only a schematic illustration and does not constitute a structural limitation on the mobile terminal. In other embodiments of the present application, the mobile terminal may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.

[0173] The wireless communication function of the mobile terminal 800 can be implemented through antennas 839 and 841, a mobile communication module 840, a wireless communication module 842, a modem processor or a baseband processor, etc.

[0174] Video codecs are used to compress or decompress digital video.

[0175] The mobile terminal 800 can implement audio functions such as music playing and recording through an audio module, a speaker, a receiver, a microphone, an earphone interface, and an application processor.

[0176] The audio module is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals.

[0177] A microphone is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can put their mouth close to the microphone and speak, inputting the sound signal into the microphone.

[0178] The sensor module 820 may include one or more of the following sensors:

[0179] The pressure sensor 823 is configured to sense the pressure signal and convert the pressure signal into an electrical signal.

[0180] The air pressure sensor 824 is used to measure the air pressure.

[0181] The magnetic sensor 825 includes a Hall sensor.

[0182] The gyro sensor 827 may be used to determine the motion posture of the mobile terminal 800 .

[0183] The acceleration sensor 828 can detect the magnitude of acceleration of the mobile terminal 800 in various directions.

[0184] The distance sensor 829 may be configured to measure distance.

[0185] The proximity light sensor 821 may include, for example, a light emitting diode (LED) and a light detector such as a photodiode.

[0186] The ambient light sensor 822 is used to sense the brightness of ambient light.

[0187] The fingerprint sensor 831 may be configured to collect fingerprints.

[0188] The touch sensor 832 may be disposed on the display screen, and the touch sensor and the display screen form a touch screen, also known as a "touch screen". The touch sensor is used to detect a touch operation applied thereto or thereabout. The touch sensor may transmit the detected touch operation to the application processor to determine the type of touch event, such as single click, double click, long press, tap, directional slide, gather, etc.

[0189] The bone conduction sensor 833 can acquire vibration signals.

[0190] The software operating system of an electronic device (computer), such as a mobile terminal, may adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture.

[0191] The embodiments shown in this article take iOS and Android operating system platforms of layered architecture as examples to illustrate the software structure of the mobile terminal. However, it is conceivable that the embodiments of this article can be implemented in different software operating systems.

[0192] exist Fig. 9In the illustrated embodiment, the solution of the embodiment of the present invention can adopt the iOS operating system. The iOS operating system adopts a four-layer architecture, which includes, from top to bottom, a touchable layer (Cocoa Touch layer) 910, a media layer (Media layer) 920, a core service layer (Core Services layer) 930, and a core operating system layer (Core OS layer) 940. The touch layer 910 provides various commonly used frameworks for application development and most of the frameworks are related to the interface, which is responsible for the user's touch interaction operations on the iOS device. The media layer provides audio-visual technologies in the application, such as graphics and images, sound technology, video, and audio and video transmission-related frameworks. The core service layer provides the basic system services required by the application. The core operating system layer contains most of the low-level functions close to the hardware.

[0193] In the embodiment of the present invention, UIKit is a user interface framework of the touchable layer 910, which can be supported by many image frameworks in the media layer 920, including but not limited to Fig. 9 The core library (Core Graphics), core animation (Core Animation), open library ES (OPEN GL ES), core image (Core Image), image IO (ImageIO), and library package (GLKit) shown in.

[0194] In the embodiment of the present invention, the dyeing process and rendering may be implemented based on the image framework. For example, in an exemplary embodiment, the provision, dyeing process and display (rendering) of the picture frame may be provided in part or in whole by CoreAnimation. However, it is conceivable that the provision, dyeing process and display (rendering) of the picture frame may be provided by other image frameworks shown or image frameworks not shown.

[0195] Fig.10 10 is a schematic diagram of the structure of the Android operating system. The solution of the embodiment of the present invention can adopt the Android operating system. The layered architecture divides the software into several layers, and the layers communicate through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, namely, the application layer 1010, the application framework layer 1020, the Android runtime (Runtime) and system library 1030, and the kernel layer 1040.

[0196] The application layer 1010 may include a series of application packages.

[0197] The application framework layer 1020 provides an application programming interface (API) and a programming framework for the applications of the application layer. The application framework layer includes some predefined functions.

[0198] A window manager is used to manage window programs.

[0199] Content providers are used to store and retrieve data and make it accessible to applications.

[0200] The view system includes visual controls, such as controls for displaying text, controls for displaying images, etc. The view system can be used to build applications. A display interface can be composed of one or more views. For example, a display interface including a text notification icon can include a view for displaying text and a view for displaying images.

[0201] The phone manager is used to provide the communication function of the mobile terminal.

[0202] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0203] The notification manager enables applications to display notification information in the status bar, which can be used to convey informational messages and disappear automatically after a short stay without user interaction.

[0204] Android Runtime includes core libraries and virtual machines. Android Runtime is responsible for scheduling and management of the Android system. The core library consists of two parts: one is the function to be called by the Java language, and the other is the Android core library. The application layer and the framework layer run in the virtual machine.

[0205] The system library can include multiple functional modules. The surface manager is used to manage the display subsystem and provide fusion of 2D and 3D layers for multiple applications.

[0206] The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc. In some embodiments of the present invention, the processing and rendering (display) of the frame animation can be partially or completely implemented based on the media library programming. In some embodiments of the present invention, the processing and rendering of the frame animation can be partially or completely implemented by a two-dimensional graphics engine or an image processing library programming.

[0207] The kernel layer 1040 is a layer between hardware and software. The kernel layer may include display driver, camera driver, audio interface, sensor driver, power management and GPS interface. In some embodiments of the present invention, the display of frame animation may call display driver.

[0208] The systems, devices, modules or units described in the above embodiments may be implemented by an electronic device (computer) or its associated components, preferably by a mobile terminal. The mobile terminal may be, for example, a smart phone, a laptop computer, a vehicle-mounted human-computer interaction device, a personal digital assistant, a media player, a navigation device, a game console, a tablet computer, a wearable device or a combination thereof.

[0209] Although not shown, in some embodiments, a storage medium is further provided, storing a computer program, which is configured to execute any frame animation processing method of the embodiments of the present invention when executed.

[0210] The storage media in the embodiments of the present invention include permanent and non-permanent, removable and non-removable items that can be implemented by any method or technology to store information. Examples of storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission medium that can be used to store information that can be accessed by a computing device.

[0211] Those skilled in the art should understand that the embodiments of the present specification can be provided as methods, systems or computer program products. Therefore, those skilled in the art can imagine that the implementation of the functional modules / units or controllers and related method steps described in the above embodiments can be implemented in software, hardware or a combination of software / hardware.

[0212] Unless explicitly stated, the actions or steps of the methods, programs, and embodiments of the present invention do not have to be performed in a specific order and can still achieve the desired results. In some implementations, multitasking and parallel processing are also possible or may be advantageous.

[0213] In this article, multiple embodiments of the present invention are described, but for the sake of brevity, the description of each embodiment is not exhaustive, and the same or similar features or parts between the embodiments may be omitted. In this article, "one embodiment", "some embodiments", "examples", "specific examples", or "some examples" are meant to be applicable to at least one embodiment or example according to the present invention, but not all embodiments. The above terms do not necessarily mean to refer to the same embodiment or example. In the absence of contradiction, those skilled in the art can combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples.

[0214] The exemplary systems and methods of the present invention have been specifically shown and described with reference to the above embodiments, which are merely examples of the best modes for implementing the present systems and methods. It will be appreciated by those skilled in the art that various changes may be made to the embodiments of the systems and methods described herein when implementing the present systems and / or methods without departing from the spirit and scope of the present invention as defined in the appended claims.

Claims

1. A frame animation processing method applied to a theme, characterized in that: include: Detect triggering actions for theme changes; In response to the detected trigger operation, a single composite image including a plurality of consecutive picture frames is loaded, wherein the single composite image includes a copy of the picture additional information, and the loading of the single composite image including the plurality of consecutive picture frames comprises: reading the single composite image from the memory only once; dividing the composite image into a plurality of consecutive image frames; The plurality of continuous picture frames are played frame by frame in a time sequence to display a frame animation composed of the plurality of continuous picture frames.

2. The frame animation processing method according to claim 1, characterized in that: Before loading a composite image consisting of multiple consecutive image frames, also include: Providing multiple consecutive picture frames; Synthesize the plurality of continuous picture frames into the synthesized image, and generate synthesis sequence information of the plurality of continuous picture frames; The composite image is compressed and stored.

3. The frame animation processing method according to claim 2, characterized in that: The step of dividing the composite image into a plurality of continuous image frames comprises: Reading the synthesis sequence information; According to the synthesis order, the synthesized image is cut in an equal-width cropping manner, so as to obtain picture frames in sequence according to the time sequence.

4. The frame animation processing method according to any one of claims 1 to 3, characterized in that: Before dividing the composite image into a plurality of consecutive image frames, the method further includes: In response to the detected trigger operation, each picture frame in the composite image is dyed to adapt to the theme color scheme.

5. The frame animation processing method according to claim 4, characterized in that: The step of performing coloring processing on the synthetic image in response to the detected trigger operation includes: Get the properties of the changed theme; Based on the attributes of the theme, determining the coloring parameters corresponding to the frame animation; creating a layer tinting context for the composite image based on the tinting parameters; In a predetermined layer, the composite image is dyed based on the layer dyeing context to adapt to the theme color scheme.

6. The frame animation processing method according to claim 4, characterized in that: The frame animation is applied to an application installed in the operating system; The triggering operation of detecting the theme change includes: Detecting a triggering operation of a user selecting a theme change of the application; The step of performing coloring processing on the synthetic image in response to the detected trigger operation includes: Get the properties of the application theme selected by the user, Based on the attributes of the application theme selected by the user, query the coloring parameters corresponding to the frame animation, creating a layer tinting context for the composite image based on the tinting parameter value, In a predetermined layer, the composite image is dyed based on the layer dyeing context to adapt to the theme color scheme of the application.

7. The frame animation processing method according to claim 4, characterized in that: The frame animation is applied to an application installed in the operating system; The triggering operation of detecting the theme change includes: Detecting a triggering operation of a theme change of the operating system; The step of performing coloring processing on the synthetic image in response to the detected trigger operation includes: Obtaining the main color of the transformed operating system theme, Based on the main color, set the color used for frame animation tinting, creates a layer tint context for the composite image based on the set color, In a predetermined layer, the composite image is dyed based on the layer dyeing context to adapt to the theme color of the operating system.

8. The frame animation processing method according to claim 4, characterized in that: The theme has a main color, and the tinted color is a color different from the main color.

9. The frame animation processing method according to any one of claims 1 to 3, characterized in that: Playing the plurality of continuous picture frames frame by frame in a time sequence to display a frame animation composed of the plurality of continuous picture frames includes: Overlaying the layers where the multiple continuous image frames are located on the user interface; Rendering and displaying a user interface including the image frame.

10. An electronic device, characterized in that: include: A processor and a memory storing a computer program, wherein the processor is configured to execute the frame animation processing method according to any one of claims 1 to 9 when running the computer program.

Citation Information

Patent Citations

  • Method and device for accelerating frame animation loading

    CN106651999A

  • Icon display processing method and electronic equipment

    CN107390976A

  • Theme background display method and device and storage medium

    CN111538450A