Page display method, device, equipment, storage medium and product

Abstract

The application discloses a page display method, device, equipment, storage medium and product, and belongs to the multimedia technical field.The method comprises the following steps: displaying a first page; acquiring at least one to-be-processed image; and displaying at least one target object on the first page based on a third image and a fourth image.In the technical scheme provided by the embodiment of the application, the non-transparent color image capable of representing the color information of the original transparency image and the non-transparent grayscale image capable of representing the transparency information can be obtained by acquiring the to-be-processed image; the transparency effect of the original transparency image can be reproduced based on the non-transparent color image and the non-transparent grayscale image; therefore, the target object in the original transparency image can be displayed in the page, the animation particle required for manually making and configuring the particle animation special effect is not needed, the page special effect making cost is reduced, the resource consumption of the page display does not increase with the increase of the number of target objects, and the page display efficiency is effectively improved.

Description

Technical Field

[0001] This application relates to the field of multimedia technology, and in particular to a page display method, apparatus, device, storage medium, and product. Background Technology

[0002] With the development of multimedia technology, terminals can display a variety of special effects animations in the user interface.

[0003] In related technologies, after an animation is exported as a Lottie animation file through a plugin of graphics and video processing software, the terminal can parse and render the content of the Lottie animation file according to the built-in corresponding Lottie rendering library, thereby displaying the corresponding animation content; or the developers and designers can create the raw materials of the animation elements themselves and render them to achieve animation playback.

[0004] However, the motion effects set supported by the Lottie animation mentioned above does not currently support 3D particle motion effects. It is impossible to achieve 3D particle motion effects animation by exporting Lottie animation files. Creating animations yourself is time-consuming, labor-intensive, and has low animation display efficiency. Summary of the Invention

[0005] This application provides a page display method, apparatus, device, storage medium, and product that can reduce the cost of creating page effects and improve page display efficiency.

[0006] According to one aspect of the embodiments of this application, a page display method is provided, the method comprising:

[0007] Display the first page;

[0008] At least one image to be processed is obtained; wherein, the at least one image to be processed includes a third image and a fourth image corresponding to at least one second image, the at least one second image is a transparency image including at least one target object, the third image is a non-transparent color image used to characterize the color information of the second image, and the fourth image is a non-transparent grayscale image used to characterize the transparency information of the second image;

[0009] Based on the third image and the fourth image, the at least one target object is displayed on the first page.

[0010] According to one aspect of the embodiments of this application, a page display device is provided, the device comprising:

[0011] The page display module is used to display the first page;

[0012] An image acquisition module is used to acquire at least one image to be processed; wherein, the at least one image to be processed includes a third image and a fourth image corresponding to at least one second image, the at least one second image is a transparency image including at least one target object, the third image is a non-transparent color image used to characterize the color information of the second image, and the fourth image is a non-transparent grayscale image used to characterize the transparency information of the second image;

[0013] An object display module is used to display the at least one target object on the first page based on the third image and the fourth image.

[0014] According to one aspect of the embodiments of this application, a computer device is provided, the computer device including a processor and a memory, the memory storing at least one instruction, at least one program, code set or instruction set, the at least one instruction, the at least one program, the code set or instruction set being loaded and executed by the processor to implement the above-described page display method.

[0015] According to one aspect of the embodiments of this application, a computer-readable storage medium is provided, wherein the storage medium stores at least one instruction, at least one program, code set, or instruction set, wherein the at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by a processor to implement the above-described page display method.

[0016] According to one aspect of the present application, a computer program product is provided, the computer program product including computer instructions stored in a computer-readable storage medium, a processor of a computer device reading the computer instructions from the computer-readable storage medium, and the processor executing the computer instructions to cause the computer device to perform the above-described page display method.

[0017] The technical solution provided in this application can bring the following beneficial effects:

[0018] By acquiring the image to be processed, a non-transparent color image that can represent the color information of the original transparency image and a non-transparent grayscale image that can represent the transparency information can be obtained. Based on the above non-transparent color image and non-transparent grayscale image, the transparency effect of the original transparency image can be reproduced. Thus, at least one target object in the original transparency image can be displayed on the first page. There is no need to manually create and configure the animated particles required for particle animation effects, which reduces the cost of page effect production. Moreover, the computing resources consumed by the page display do not increase with the increase of the number of target objects, effectively improving the page display efficiency. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 This is a schematic diagram of an application runtime environment provided in one embodiment of this application;

[0021] Figure 2 This is a flowchart of a page display method provided in one embodiment of this application. Figure 1 ;

[0022] Figure 3 An exemplary diagram of an application launch page is shown;

[0023] Figure 4 This is a flowchart of a page display method provided in one embodiment of this application. Figure 2 ;

[0024] Figure 5 This is a flowchart of a first image generation method provided in one embodiment of this application. Figure 1 ;

[0025] Figure 6 This is a flowchart of a first image generation method provided in one embodiment of this application. Figure 2 ;

[0026] Figure 7 An exemplary schematic diagram is shown for converting a second image into a third image;

[0027] Figure 8 An exemplary schematic diagram of extracting color data from a second image is shown;

[0028] Figure 9 An exemplary schematic diagram is shown for converting a second image into a fourth image;

[0029] Figure 10 An exemplary diagram illustrates a method for extracting transparency data from a second image;

[0030] Figure 11 An exemplary schematic diagram of a first video is shown;

[0031] Figure 12 An exemplary schematic diagram of a first image is shown;

[0032] Figure 13 An example diagram of a transition animation is shown;

[0033] Figure 14An example diagram of a card element is shown;

[0034] Figure 15 An exemplary diagram illustrating a page interaction flow is provided.

[0035] Figure 16 This is a flowchart of a page display method provided in one embodiment of this application. Figure 3 ;

[0036] Figure 17 An exemplary diagram illustrating the splitting of the first image is shown;

[0037] Figure 18 This is a flowchart of a page display method provided in one embodiment of this application. Figure 4 ;

[0038] Figure 19 An exemplary diagram illustrates a process for displaying a ribbon-falling effect on an application launch page;

[0039] Figure 20 This is a block diagram of a page display device provided in one embodiment of this application;

[0040] Figure 21 This is a structural block diagram of a computer device provided in one embodiment of this application. Detailed Implementation

[0041] Before introducing the embodiments of this application, a brief introduction will be given on the application scenarios, related terms or nouns that may be involved in the method embodiments of this application, so as to facilitate the understanding of those skilled in the art.

[0042] Graphics and video processing software (After Effects, AE): AE is a non-linear special effects production software. For displaying AE motion effects (animation effects) on the client side, relevant technical solutions include using the Lottie workflow or frame sequence methods.

[0043] In the Lottie workflow-based motion effect display solution, the main process involves exporting an After Effects (AE) project as a Lottie file using the BodyMotion plugin (an AE plugin). The Android / iOS / Web client then uses its built-in Lottie rendering library to parse and render the Lottie file content, achieving the animation effect. However, the particle motion effects displayed on the page in this embodiment, such as the ribbon falling animation, are originally implemented in AE using the "CCParticle World" (3D particle motion) effect type. Currently, Lottie's supported motion effects do not support 3D particle motion, making it impossible to describe the animation details of particle motion effects by exporting a Lottie file.

[0044] In motion effect display solutions using frame sequences, the main workflow involves exporting the After Effects project as a collection of relevant frame / keyframe sequence images, which are then played and rendered on the corresponding terminal platform. However, there is currently no universal solution for frame sequence rendering on terminals. Developers are primarily responsible for creating and rendering the raw materials for the frame sequences. This requires significant intervention from terminal logic, is time-consuming, and incurs high manpower costs. Frame sequences also consume a lot of bandwidth, making them prone to stuttering under heavy network pressure, and placing high demands on the terminal's decoding capabilities. For tasks with tight development timelines and application scenarios experiencing peak traffic, frame sequence solutions are less effective and less feasible.

[0045] Splash ads: Splash ads are a type of advertising that loads when the application is launched, and automatically closes and redirects to the application's main page after displaying.

[0046] In-feed ads: In-feed ads are ads that appear in the feeds of social media users' friends, or in the content streams of news and audiovisual media. In-feed ads can take the form of images, text and images, videos, etc.

[0047] HTML5 (Hyper Text Markup Language 5), or H5 for short, is a language description method for building and presenting Web (World Wide Web) content. The content users see when browsing web pages is originally in HTML format, but the browser processes it using various techniques to convert it into recognizable information.

[0048] WebGL (Web Graphics Library) is a 3D (3D) graphics protocol. WebGL provides hardware-accelerated 3D rendering for HTML5 Canvas, allowing web developers to leverage the system's graphics card to more smoothly display 3D scenes and models in the browser, and to create complex navigation and data visualizations. Clearly, the WebGL standard eliminates the hassle of developing dedicated rendering plugins for web pages, and can be used to create website pages with complex 3D structures, and even design 3D web games.

[0049] WebView (Webpage View Component): Currently, many applications have built-in webpages, which can be implemented using the WebView provided by the terminal operating system. WebView is a component that displays webpages based on a browser engine. It can be embedded in mobile devices to enable hybrid front-end development. The role of WebView is to display and render webpages, directly use HTML files for layout (from online or local resources), and interact with JavaScript. Optionally, the WebView mentioned above is a system control used to display webpages.

[0050] Canvas (HTML5) <canvas>The `<canvas>` tag is used to draw images. Developers can use the `Canvas` method to draw the specific content of the WebView onto the Canvas and finally display it on the screen. The Canvas itself is just a utility class that can call the underlying drawing driver to draw the corresponding graphics, but the image is actually stored in the Bitmap object in the Canvas. The Bitmap has a byte array used to store pixel values ​​from [0 to 255].

[0051] The RGB (Red, Green, Blue) color model is an industry-standard color system that uses variations in the three color channels—red (R), green (G), and blue (B)—and their superposition to create a wide variety of colors. RGB represents the colors of the red, green, and blue channels. This standard covers almost all colors that are perceptible to human vision and is one of the most widely used color systems.

[0052] YUV is a color encoding method commonly used in various video processing components. When encoding photos or videos, YUV takes into account human perception, allowing for reduced chroma bandwidth. "Y" represents luminance (or luma), which is the grayscale value, while "U" and "V" represent chroma (or chroma), which describe the color and saturation of the image and are used to specify the color of a pixel.

[0053] An alpha channel (or alpha channel) refers to the transparency and semi-transparency of an image. For example, a bitmap using 16 bits per pixel might have 5 bits representing red, 5 bits representing green, 5 bits representing blue, and the last bit being the alpha. In this case, it either represents transparency or not, because the alpha bit only has two possible representations: 0 or 1. Another example is a bitmap using 32 bits, with 8 bits representing red, green, and blue, plus the alpha channel. In this case, it can not only represent transparency or opacity, but the alpha channel can also represent 256 levels of semi-transparency because its 8 bits can have 256 different data representation possibilities.

[0054] FFmpeg is an open-source computer program that can be used to record, convert, and stream digital audio and video. It provides a complete solution for recording, converting, and streaming audio and video. It includes highly advanced audio / video codec libraries.

[0055] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0056] Please refer to Figure 1 This diagram illustrates an application runtime environment provided in one embodiment of this application. The application runtime environment may include: terminal 10 and server 20.

[0057] Terminal 10 includes, but is not limited to, electronic devices such as mobile phones, computers, smart voice interaction devices, smart home appliances, in-vehicle terminals, game consoles, e-book readers, multimedia playback devices, and wearable devices. Application clients can be installed on terminal 10.

[0058] In this embodiment, the application described above can be any application capable of providing multimedia content services. Typically, the application is a video application. Of course, other types of applications besides video applications can also provide multimedia content services. For example, news applications, social applications, interactive entertainment applications, browser applications, shopping applications, content sharing applications, virtual reality (VR) applications, augmented reality (AR) applications, etc., are not limited in this embodiment. In addition, the multimedia content pushed by different applications will also be different, and the corresponding functions will also be different. These can be pre-configured according to actual needs, and are not limited in this embodiment. Optionally, the terminal 10 runs a client of the above-mentioned application.

[0059] Server 20 provides background services to clients of applications in terminal 10. For example, server 20 can be a background server for the aforementioned applications. Server 20 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms. Optionally, server 20 can simultaneously provide background services to applications in multiple terminals 10.

[0060] Optionally, terminal 10 and server 20 can communicate with each other via network 30. Terminal 10 and server 20 can be directly or indirectly connected via wired or wireless communication, which is not limited herein.

[0061] Please refer to Figure 2 It illustrates the flow of a page display method provided in one embodiment of this application. Figure 1 This method can be applied to computer devices, which refer to electronic devices with data computing and processing capabilities. For example, the entity executing each step can be... Figure 1 Terminal 10 in the application runtime environment shown. The method may include the following steps (210-230).

[0062] Step 210: Display the first page.

[0063] The first page mentioned above is the page displayed on the terminal screen.

[0064] In one possible implementation, the first page is a web page. Optionally, the web page is a web page within the target application. This web page is developed using a hybrid approach of HTML5 and native system technologies.

[0065] In another possible implementation, the first page described above is an application page. This application does not limit the type of the first page.

[0066] In some application scenarios, the aforementioned first page includes, but is not limited to, splash screen ad pages and feed ad pages.

[0067] Optionally, the first page includes a target area for displaying at least one target object.

[0068] In one example, such as Figure 3 As shown, it exemplifies a schematic diagram of an application launch page. Figure 3 In the application launch page 30, a preset image 31 is displayed. Optionally, the preset image 31 can be a single image or a frame from a preset video. In addition, the application launch page 30 also displays a shake-to-activate prompt icon 32, which prompts the user to shake their phone to enter the corresponding application process.

[0069] In an exemplary embodiment, the aforementioned first page is the application launch page. For example... Figure 4 As shown, step 210 above can be replaced by step 211. Figure 4 The flowchart of a page display method provided in one embodiment of this application is shown. Figure 2 .

[0070] Step 211: If an application launch command for the target application is detected, the first page is displayed.

[0071] The target application mentioned above can be any application installed on the terminal; the application type is not limited in this embodiment. The application launch command can be triggered by the user clicking the application icon of the target application or by a background task switching operation.

[0072] In the above Figure 3 In the example above, the application launch page 30 is a splash screen advertisement page that opens when the application is entered.

[0073] Step 220: Obtain at least one image to be processed.

[0074] Wherein, at least one image to be processed includes at least one third image and one fourth image corresponding to at least one second image, wherein at least one second image is a transparency image including at least one target object, the third image is a non-transparent color image used to characterize the color information of the second image, and the fourth image is a non-transparent grayscale image used to characterize the transparency information of the second image. The aforementioned transparency image refers to an image including transparency data.

[0075] The aforementioned at least one second image includes at least one target object, and correspondingly, the aforementioned third and fourth images both include the aforementioned at least one target object. Since the aforementioned images to be processed include the aforementioned third and fourth images, the aforementioned at least one image to be processed also includes at least one target object. Optionally, the aforementioned at least one image to be processed includes twice the number of at least one target object. Optionally, the aforementioned at least one target object is a particle display element in a particle animation. The aforementioned at least one image to be processed is a non-transparent image that does not include transparency data.

[0076] In an exemplary embodiment, the at least one image to be processed is a video frame from a motion-effect video. The at least one image to be processed can be a video frame from different motion-effect videos, or it can be a video frame from the same motion-effect video. The motion-effect video is video footage that renders particle motion effects.

[0077] In an exemplary embodiment, the at least one image to be processed includes at least one first image, which is a video frame in a first video. Correspondingly, as... Figure 5 As shown, the generation process corresponding to at least one first image includes the following steps (510-540). Figure 5 The flowchart of a first image generation method provided in one embodiment of this application is shown. Figure 1 .

[0078] Step 510: Obtain the second video.

[0079] The second video includes at least one target object, and the transparency of the area in the second video other than the at least one target object is less than the transparency threshold.

[0080] In an exemplary embodiment, the second video is the original video corresponding to the particle motion effect. The original video has an alpha channel, and each pixel has corresponding transparency. In the second video, at least one target object is an opaque or low-transparency display element, and the area excluding the at least one target object is a transparent display area, which does not obscure the display content of other layers, thus achieving the goal of displaying only the particle motion effect of the at least one target object on the screen.

[0081] Optionally, the second video meets the following conditions: it contains RGB+Alpha channels, and pixel transparency information is stored only in the Alpha channel. Optionally, if the second video is a motion-effect video exported from graphics and video processing software, the pre-multiplex option is not used when exporting the second video to facilitate subsequent extraction of pixel data from different channels.

[0082] In an exemplary embodiment, the second video includes at least one second image. The second video includes color data corresponding to each pixel in the at least one second image in the pixel color channel, and transparency data corresponding to each pixel in the pixel transparency channel. The aforementioned second image is a video frame in the second video, therefore, the aforementioned second image is an image with transparency information.

[0083] Step 520: Perform the first video conversion process on the second video to obtain the third video.

[0084] The third video is used to represent the color information of the second video. The aforementioned first video conversion process refers to the process of extracting the color data corresponding to the pixel color channels of the second video to generate a non-transparent color video without transparency information. Optionally, the aforementioned first video conversion process can be used to extract a video containing only the pixel data of the RGB color channels.

[0085] In one possible implementation, a video containing only the RGB color portion is extracted from the original video (i.e., the second video mentioned above). Optionally, video processing can be performed using FFmpeg to extract the third video. For example, the original transparent video is original.mov. By extracting the color data of each frame of the original transparent video in the RGB channels, a third video containing only the color portion data of the second video is generated. Optionally, the code for performing the first video conversion process using FFmpeg is as follows:

[0086] ffmpeg -i original.mov -vfformat=yuv420p rgb.mp4.

[0087] In an exemplary embodiment, such as Figure 6 As shown, the implementation process of step 520 above includes the following step 521. Figure 6 The flowchart of a first image generation method provided in one embodiment of this application is shown. Figure 2 .

[0088] Step 521: Generate a third image based on the color data.

[0089] The third video includes a third image.

[0090] For each pixel in each second image of the second video, each pixel has color data corresponding to the pixel color channel and transparency data corresponding to the pixel transparency channel.

[0091] In one possible implementation, the color data corresponding to each pixel in the second image in the pixel color channel is retained, while the transparency data corresponding to each pixel in the second image in the pixel transparency channel is deleted. This data is then used as the corresponding pixel data in the third image to generate the third image. Since the transparency data corresponding to each pixel in the pixel transparency channel of the second image is deleted, the third image corresponding to the second image is a non-transparent color image containing only color data.

[0092] In one example, such as Figure 7 As shown, it exemplarily illustrates a schematic diagram of converting a second image into a third image. Figure 7 In the image, the left side shows the second image 71 from the second video, and the right side shows the third image 72, which contains only the RGB channels. The ribbon fragment 711 in the second image 71 has low transparency, while the area outside of ribbon fragment 711 in the second image 71 is transparent. The third image 72 is generated by extracting the color data corresponding to each pixel in the pixel color channel of the second image 71. The aforementioned pixel color channel is the RGB channel. Therefore, the third image 72 is a non-transparent image; not only is the ribbon fragment 721 non-transparent, but the area outside of ribbon fragment 721 is also non-transparent.

[0093] In one example, such as Figure 8 As shown, it exemplarily illustrates a schematic diagram for extracting color data from a second image. Figure 8 In the image, the left side is a partial second image 81 of the second image, and the right side is a partial third image 82 of the third image corresponding to partial second image 81. In partial second image 81, pixel A has pixel data of RGBA (218, 0, 35, 166), and pixel B has pixel data of RGBA (215, 0, 34, 217). Pixels A1 and B1 in partial third image 82 correspond to pixels A and B in partial second image 81, respectively. The position of pixel A1 in partial third image 82 is the same as the position of pixel A in partial second image 81, and the position of pixel B1 in partial third image 82 is the same as the position of pixel B in partial second image 81. The device extracts the RGB channel data of pixel A to obtain the pixel data RGB(218, 0, 35) corresponding to pixel A1, and extracts the RGB channel data of pixel B to obtain the pixel data RGB(215, 0, 34) corresponding to pixel B1.

[0094] Step 530: Perform second video conversion processing on the second video to obtain the fourth video.

[0095] The fourth video is used to represent the transparency information of the second video. The aforementioned second video conversion process refers to the process of extracting the transparency data corresponding to the pixel transparency channel of the second video to generate a non-transparent grayscale video that carries transparency information through the pixel color channel.

[0096] In one possible implementation, the transparency data of the original video (i.e., the second video mentioned above) on the pixel transparency channel is extracted, and the transparency data is mapped to a grayscale video carrying transparency information in the pixel color channel. Optionally, video processing can be performed using FFmpeg to extract the fourth video mentioned above. For example, if the original transparent video is original.mov, the code for performing the second video conversion processing using FFmpeg is as follows:

[0097] ffmpeg-i original.mov-vfalphaextract, format=yuv420p only-alpha.mp4

[0098] In an exemplary embodiment, such as Figure 6 As shown, the implementation process of step 530 above includes the following step 531.

[0099] Step 531: Generate a fourth image based on the transparency data.

[0100] The fourth video includes the fourth image.

[0101] In one possible implementation, the color data corresponding to each pixel in the pixel color channel of the second image is deleted, while the transparency data corresponding to each pixel in the pixel alpha channel is retained. This transparency data is then used as the color data corresponding to each pixel in the pixel color channel of the corresponding fourth image, thereby generating the fourth image and preserving the transparency information of each pixel in the second image. By storing the transparency data corresponding to each pixel in the pixel alpha channel of the second image as color data in the fourth image, the fourth image can represent the transparency information of each pixel in the second image. The fourth image corresponding to the second image is a non-transparent grayscale image containing only color data.

[0102] In one example, such as Figure 9 As shown, it exemplifies a schematic diagram of converting a second image into a fourth image. Figure 9 In the image, the left side shows the second image 71 from the second video, and the right side shows the fourth image 73, which contains only RGB channels and was generated after grayscale image conversion based on the transparency data of the second image 71. The ribbon fragment 711 in the second image 71 has low transparency, while the areas outside of the ribbon fragment 711 in the second image 71 are transparent. The fourth image 73 is generated by extracting the transparency data of each pixel in the second image 71 corresponding to the pixel transparency channel. This pixel transparency channel is the Alpha Channel, which refers to the transparency and semi-transparency channels of an image. The device performs grayscale image conversion based on this transparency data and determines the color data of each pixel in the fourth image 73 in the RGB channels based on the transparency data. Therefore, the fourth image 73 is a non-transparent grayscale image; not only is the ribbon fragment 731 non-transparent, but the areas outside of the ribbon fragment 731 are also non-transparent. However, the color data of each pixel in the fourth image 73 can characterize the transparency of each pixel in the second image 71.

[0103] In one example, such as Figure 10 As shown, it exemplifies a schematic diagram of extracting transparency data from a second image. Figure 10 In the image, the left side is a partial second image 81 of the second image, and the right side is a partial fourth image 83 of the fourth image corresponding to partial second image 81. In partial second image 81, pixel A has pixel data of RGBA (218, 0, 35, 166), and pixel B has pixel data of RGBA (215, 0, 34, 217). Pixels A2 and B2 in partial fourth image 83 correspond to pixels A and B in partial second image 81, respectively. The position of pixel A2 in partial fourth image 83 is the same as the position of pixel A in partial second image 81, and the position of pixel B2 in partial fourth image 83 is the same as the position of pixel B in partial second image 81. The device extracts the data of pixel A in the A channel (alpha channel) to obtain the pixel data RGB (166, 166, 166) corresponding to pixel A2, and extracts the data of pixel B in the A channel to obtain the pixel data RGB (217, 217, 217) corresponding to pixel B2.

[0104] Step 540: Merge the third video and the fourth video to obtain the first video.

[0105] The first video includes at least one first image.

[0106] Optionally, the third and fourth videos can be horizontally stitched together to obtain the first video. This first video is the aforementioned effect video and is used as material for rendering particle motion effects.

[0107] In an exemplary embodiment, such as Figure 6 As shown, the implementation process of step 540 above includes the following step 541.

[0108] Step 541: The third image and the fourth image are stitched together to obtain at least one first image.

[0109] In one possible implementation, the third image in the third video is horizontally stitched together with the corresponding fourth image in the fourth video to obtain the corresponding first image.

[0110] In one example, such as Figure 11 The description exemplifies a schematic diagram of a first video. A color video 111 containing only the RG11 channel (i.e., the aforementioned third video) is placed on the left, and a grayscale video 112 containing only the RG11 channel (i.e., the aforementioned fourth video) is placed on the right. These are horizontally stitched together to create a motion-effect video 113 (i.e., the aforementioned first video) suitable for playback on mobile web pages. The aforementioned motion-effect video 113 is video material that implements particle motion effects.

[0111] The above describes the generation process of the first image. When the terminal needs to display at least one of the target objects mentioned above, it needs to acquire the first image or other images to be processed. The terminal can send an acquisition request to the server and receive other motion effect videos corresponding to the first video or other images to be processed. The first video includes the first image, and the other motion effect videos include other images to be processed.

[0112] In an exemplary embodiment, the implementation process of step 220 includes the following: creating a silent, non-autoplay target video element on a first page, and configuring the video source of the target video element as the aforementioned first video, or other motion effect videos. For example, a motion effect video containing only RGB channels. Based on the target video element, obtaining at least one first image from the aforementioned first video, or an image to be processed from other motion effect videos. Since the target video element is silent and non-autoplay, the aforementioned first video or other motion effect videos will not be displayed on the first page, but the terminal device can obtain the image texture information of at least one first image from the aforementioned first video, or obtain the image texture information of the image to be processed from the aforementioned other motion effect videos through the target video element.

[0113] In one example, such as Figure 12 As shown, it exemplarily illustrates a schematic diagram of a first image. Figure 12 The image shows the current video frame 121 extracted from a motion video containing only RGB channels (i.e., the first video). This current video frame 121 is a first image in the first video and is shown as an example frame only.

[0114] Step 230: Based on the third and fourth images, display at least one target object on the first page.

[0115] In an exemplary embodiment, the first page may display one particle animation effect or multiple particle animation effects. When multiple particle animation effects are displayed on the first page, the at least one target object may be displayed on separate display layers within the first page. The at least one target object may be displayed on the same display layer or on different layers. The specific process includes: determining at least one display layer corresponding to at least one image to be processed on the first page; and displaying at least one target object on the at least one display layer based on the third and fourth images.

[0116] Optionally, the display image corresponding to the motion effect video corresponding to the image to be processed is obtained, and the target object in the image to be processed is displayed on the display layer.

[0117] In an exemplary embodiment, the above method is applied to a terminal device equipped with a target sensor. Accordingly, as... Figure 4 As shown, the implementation process of step 230 above includes the following steps (23a to 23b).

[0118] Step 23a: When the first page is displayed, a trigger operation is received via the target sensor.

[0119] A trigger operation is used to trigger the display of at least one target object. The aforementioned target sensors include, but are not limited to, motion sensors, touch sensors, cameras, microphones, and fingerprint sensors. Correspondingly, different types of sensors can accept different trigger operations, and this application embodiment does not limit this. Optionally, the aforementioned motion sensor is an accelerometer.

[0120] Step 23b: In response to the triggering operation, at least one target object is displayed on the first page based on the third and fourth images.

[0121] In an exemplary embodiment, the triggering operation is a shake operation. In response to the motion sensor detecting the shake operation, at least one target object is displayed on the first page based on at least one image to be processed.

[0122] In specific application scenarios, the terminal device pre-loads the Easter egg page content, activates the phone's accelerometer to detect phone shaking, and triggers the Easter egg page H5 opening event. The aforementioned Easter egg page includes the page displaying the aforementioned particle effects.

[0123] In one possible implementation, in response to a triggering operation, a transition animation is displayed on the first page; after the transition animation has finished playing, at least one target object is displayed on the first page based on the third and fourth images.

[0124] In practical applications, a transition animation is played on the first page, and it is determined whether particle effects need to be played and whether card content needs to be displayed.

[0125] When particle animation effects are required, at least one target object is displayed on the first page based on the third and fourth images. Optionally, WebGL is used to read and depict the video texture of the aforementioned animation video (first video) (which can be achieved through the aforementioned target video elements). The non-transparent color video of the left half of the animation video (i.e., the aforementioned third video) and the non-transparent grayscale video of the right half of the animation video (i.e., the aforementioned fourth video) are overlaid in a positive format to reproduce the transparency information of the original video, and the aforementioned target object is displayed on the page to achieve particle animation effects.

[0126] In one example, such as Figure 13 As shown, it exemplifies a schematic diagram of a transition animation. In Figure 3 In the example, the application launch page 30 displays a shake-to-operate prompt icon 32. After seeing this, the user can perform a shake-to-operate action. The motion sensor in the terminal device can receive the shake-to-operate action and, based on this action, display a circular ribbon animation on the application launch page 30. The circular ribbon 33 spreads out from the bottom. Optionally, the aforementioned circular ribbon animation is a transition animation.

[0127] In an exemplary embodiment, card elements are displayed on the first page when it is necessary to display them. For example... Figure 4 As shown, the above method also includes the following steps (240-260).

[0128] Step 240: Display card elements on the first page.

[0129] Card elements are used to display multimedia content associated with the first page. These card elements are a type of page display element. Optionally, card elements and at least one of the target objects mentioned above may be displayed in a different display layer.

[0130] Step 250: Display multimedia content based on card elements.

[0131] Card elements include preset controls. Optionally, the multimedia content mentioned above includes, but is not limited to, images and videos.

[0132] In one possible implementation, the video element corresponding to the card element on the first page is obtained. This video element differs from the target video element used to play the animated video. The card element can display multimedia content, and correspondingly, the video element corresponding to the card element can be a non-mute, auto-playing video element. Optionally, the video element corresponding to the card element is used to play multimedia content within the card.

[0133] In one example, such as Figure 14 As shown, an exemplary diagram of a card element is illustrated. In the example diagram, after the circular ribbon animation is displayed on the application launch page 30, a ribbon falling effect is added to the application launch page 30, and multiple ribbon fragments 34 are displayed. Optionally, the ribbon falling effect is a particle motion effect, and the ribbon fragments 34 are target objects. Furthermore, after the circular ribbon animation is displayed on the application launch page 30, in addition to displaying the ribbon fragments 34, a card element 35 is also displayed, which can display multimedia promotional content associated with the first page and corresponding shopping guide controls 36 to prompt the user to proceed to the next step.

[0134] Step 260: In response to a selection operation on a preset control, a second page associated with the card element is displayed.

[0135] Optionally, the second page described above is a page set according to a specific scenario, and this application embodiment does not limit this.

[0136] If the user does not perform the preset operation within the aforementioned card elements, the subsequent processes will continue after the display of at least one of the target objects or the multimedia content within the aforementioned card elements has ended. For example, after the ribbon falling animation or card video playback ends, the Easter egg page H5 notifies the client that the Easter egg event is complete, allowing subsequent actions to continue, such as entering the application's main page.

[0137] In one example, such as Figure 15 As shown, this example illustrates a schematic diagram of a page interaction flow. The specific details of the page interaction flow are as follows:

[0138] When a user clicks the target application icon (not shown in the figure) to open the target application, the application launch page 30 will be displayed on the terminal device screen. Optionally, the application launch page 30 is an interactive splash screen, which refers to an interactive page used to display splash screen advertisements. Specifically, the application launch page is a shake-based interactive splash screen. The application launch page 30 displays a preset image 31. Optionally, the preset image 31 can be a single image or a frame from a preset video. In addition, the application launch page 30 also displays a shake-to-operate prompt icon 32, which prompts the user to shake their phone to enter the corresponding application process.

[0139] After seeing the shake-to-shake icon 32, users can perform a shake operation, such as shaking their phone to cheer for an athlete. The motion sensor in the terminal device can receive the shake operation; if the shaking acceleration reaches a threshold, the interaction is considered successful. After a successful user interaction, the terminal device immediately triggers vibration feedback and displays an ambient animation effect. This ambient animation effect can be achieved through a circular ribbon animation, with the circular ribbon 33 spreading out from the bottom. Optionally, the circular ribbon animation is a transition animation, and the application launch page displaying the circular ribbon animation can also be understood as a transition page.

[0140] After the circular ribbon animation is displayed, the terminal device immediately triggers the opening of the Easter egg page. Optionally, the Easter egg page can display video advertisement story content. Specifically, after the circular ribbon animation is displayed, the application launch page 30 will display a ribbon falling effect, with multiple ribbon fragments 34 in a falling state appearing on the page. Optionally, the ribbon falling effect is a particle motion effect, and the ribbon fragments 34 are target objects. In addition, the application launch page 30 will also display card elements 35, which can display multimedia promotional content associated with the first page and corresponding shopping guide controls 36. The application launch page displaying the ribbon falling effect and card elements 35 can be regarded as the Easter egg page. The card elements 35 can also display video advertisement story content according to business logic, which is not limited in this embodiment.

[0141] In some implementation scenarios, each frame of the animated video corresponding to the particle motion effects in the aforementioned Easter egg page is dynamically composited in H5 (using an H5+WebGL video texture rendering scheme, which will be introduced later). The Easter egg page can simultaneously play multiple layers of video in an H5WebView, including but not limited to videos corresponding to multiple layers of animation effects and a single layer of non-mute card video.

[0142] Users can click on the shopping guide control 36, and the terminal device, in response to the selection operation on the shopping guide control 36, will jump to the second page 37 associated with the card element. Optionally, the second page 37 is a product purchase page. Optionally, the page type of the aforementioned second page 37 includes, but is not limited to, a custom H5 page, a mini-program page, and an application direct access page.

[0143] The above description of step 230 mainly focuses on the page display aspect. The following will provide a corresponding explanation of the technical details involved in the implementation of step 230.

[0144] In an exemplary embodiment, such as Figure 16 As shown, before performing the step of displaying at least one target object on the first page based on the third and fourth images, the method further includes the following step 231. Figure 16 The flowchart of a page display method provided in one embodiment of this application is shown. Figure 3 .

[0145] Step 231: Split at least one first image to obtain a third image and a fourth image.

[0146] In an exemplary embodiment, the first video corresponding to the first image is a motion effect video obtained by splicing the third video and the fourth video. Correspondingly, the first image is an image obtained by horizontally splicing the third image in the third video and the fourth image in the fourth video.

[0147] When displaying the target object on the terminal, after obtaining the first image, the first image can be split to obtain a third image containing the color information of the second image and a fourth image containing the transparency information of the second image.

[0148] In one possible implementation, at least the left half of at least one first image is extracted from the first video to obtain the third image; at least the right half of at least one first image is extracted to obtain the fourth image.

[0149] By extracting at least one left half and one right half of the first image respectively, at least one third image and one fourth image corresponding to the first image can be obtained, thereby obtaining the color information and transparency information of each pixel of the second image, so as to facilitate the subsequent restoration of the transparency effect in the second image.

[0150] In one example, such as Figure 17 As shown, it exemplarily illustrates a schematic diagram of splitting the first image. Figure 17 In the image, the left side is a third image 171 that can represent the texture information of the left half of the first image, and the right side is a fourth image 172 that can represent the texture information of the right half of the first image.

[0151] In an exemplary embodiment, such as Figure 16 As shown, the above implementation process of displaying at least one target object on the first page based on the third and fourth images includes the following steps (232-233).

[0152] Step 232: Perform orthogonal overlay processing on the third and fourth images to generate pixel texture information corresponding to the target canvas.

[0153] In an exemplary embodiment, a target canvas is created on a first page to display at least one target object. Optionally, a Canvas canvas of the same size as the visible page on the terminal device is created on the first page, and the target canvas is a Canvas canvas. Optionally, the target canvas corresponds to a target area in the first page. Accordingly, the pixel data of corresponding pixels in the third and fourth images are orthogonally superimposed to obtain the pixel data corresponding to the target area. The pixel data corresponding to the target area can characterize the pixel texture information corresponding to the target canvas.

[0154] In one possible implementation, the color data of the pixels at the target location in the third and fourth images are multiplied in their respective pixel color channels to obtain the color data of the canvas pixels at the target location in their respective pixel color channels. The color data of the pixels at the target location in the fourth image in any pixel color channel is then used as the transparency data of the canvas pixels at the target location in their respective pixel transparency channels. This yields the pixel texture information corresponding to the target canvas. The pixel texture information includes the pixel data corresponding to each canvas pixel in the target canvas, and the pixel data includes the aforementioned color data and transparency data.

[0155] In an exemplary embodiment, such as Figure 18 As shown, the implementation process of step 232 includes the following steps (232a~232d), Figure 18 The flowchart of a page display method provided in one embodiment of this application is shown. Figure 4 .

[0156] Step 232a: Normalize the pixel data of each pixel in the third image to obtain the first data vector corresponding to each pixel in the third image.

[0157] In one possible implementation, the RGB of each pixel in the third image is described as RGB(lr, lg, lb), where lr is the color output value of the pixel in the third image on the R channel, lg is the color output value of the pixel in the third image on the G channel, and lb is the color output value of the pixel in the third image on the B channel.

[0158] The color output values ​​of each pixel in the third image are normalized in each pixel color channel to obtain the feature data corresponding to each pixel in the third image in each pixel color channel. Based on the feature data corresponding to each pixel in the third image in each pixel color channel, the first data vector corresponding to each pixel can be generated.

[0159] Optionally, the first data vector described above is vec3(lr / 255, lg / 255, lb / 255).

[0160] Step 232b: Normalize the pixel data of each pixel in the fourth image to obtain the second data vector corresponding to each pixel in the fourth image.

[0161] The second data vector is used to represent the transparency information of the canvas pixels in the target canvas.

[0162] In one possible implementation, the RGB of each pixel in the fourth image is described as RGB(rr, rg, rb), where rr is the color output value of the pixel in the fourth image on the R channel, rg is the color output value of the pixel in the fourth image on the G channel, and rb is the color output value of the pixel in the fourth image on the B channel.

[0163] The color output values ​​of each pixel in the fourth image are normalized in each pixel color channel to obtain the feature data corresponding to each pixel in the fourth image in each pixel color channel. Based on the feature data corresponding to each pixel in the fourth image in each pixel color channel, a second data vector corresponding to each pixel can be generated.

[0164] Optionally, the second data vector described above is vec3(rr / 255, rg / 255, rb / 255).

[0165] Step 232c: The feature data in each dimension of the first data vector is fused with the feature data in the corresponding dimension of the second data vector to obtain fused pixel data.

[0166] The fused pixel data is used to characterize the color information of the canvas pixels.

[0167] The feature data in each dimension of the first data vector is multiplied with the feature data in the corresponding dimension of the second data vector to obtain the feature product data of the first data vector and the second data vector in each dimension. The above-mentioned fused pixel data includes the feature product data of the first data vector and the second data vector in each dimension.

[0168] Step 232d: Based on the fused pixel data and the feature data in the second data vector, determine the pixel data corresponding to the canvas pixel.

[0169] The pixel data corresponding to each pixel on the canvas is used to represent pixel texture information.

[0170] Optionally, the feature product data of the first data vector and the second data vector in each dimension is concatenated with the feature data in any dimension of the second data vector to obtain the pixel data vector corresponding to the canvas pixel.

[0171] By fusing the first data vector with the second data vector, the texture information of the third image and the texture information of the fourth image can be orthogonally superimposed, and the transparent texture in the second image can be restored in the canvas to obtain the pixel data of each pixel of the restored transparent texture.

[0172] In one possible implementation, the pixel data is represented by a pixel data vector, and the pixel data vector of each canvas pixel of the restored transparent texture is represented as vec4(vec3(vec3(lr / 255, lg / 255, lb / 255)*vec3(rr / 255, rg / 255, rb / 255)), rr / 255).

[0173] Step 233: Based on pixel texture information, display at least one target object corresponding to the first image on the first page.

[0174] The aforementioned pixel texture information includes pixel data corresponding to each canvas pixel in the target canvas, and the pixel data includes the aforementioned color data and transparency data.

[0175] By using the color and transparency data corresponding to each pixel in the target canvas, the transparency effect of the second image described above can be reproduced on the screen, displaying only at least one target object while transparently displaying irrelevant content areas. In this embodiment, a video file without transparency is used for dynamic compositing and rendering of transparent video, reducing client-side decoder requirements.

[0176] In practical applications, after the target video element in the silent, non-static playback obtains video frames from the animated video, and then goes through steps 231 to 233, each frame of the animated video can be used as a video texture. After processing by a WebGL Shader, the extracted pixel texture information is drawn onto the canvas for display, resulting in the display of at least one target object on the first page, thus reproducing the transparency effect in the original video. Drawing video textures on the target canvas using H5WebGL does not consume more computing resources as the number of target objects increases, improving page efficiency.

[0177] In one possible implementation, the process of determining the pixel data of each pixel in the canvas can be called the pixel shading process. This pixel shading process can be handled by a pixel shader, and the specific pixel shader code snippet and corresponding comments are as follows:

[0178]

[0179]

[0180] The technical solutions provided in the embodiments of this application will be described below with reference to specific examples. Please refer to... Figure 19 , Figure 19 This example illustrates a flowchart of a process for displaying a ribbon-falling effect on an application launch page. First, the original video 191 (the second video mentioned above) is split into two videos containing only RGB channels. One is a color video containing the color data of the original video 191 (the third video mentioned above), and the other is a grayscale video representing the transparency data of the original video 191 in grayscale (the fourth video mentioned above). These two videos are then horizontally stitched together to obtain the animated video 192 (the first video mentioned above) used as a background page on mobile devices to implement the ribbon-falling effect. The original video 191 is a ribbon-falling effect video exported from graphics and video processing software (After Effects, AE). The pixel channels of the original video 191 are RGB + Alpha channels, and the motion blur effect is preserved; the color channels are not pre-multiplied. This animated video is designed for mobile web playback, has high compatibility, low requirements for mobile decoders, and consumes relatively few computing resources.

[0181] When a particle animation effect is required on a mobile device, WebGL is used to read and depict the video texture of the animation video 192. A color video 193 representing the texture on the left side of the animation video 192 and a grayscale video 194 representing the texture on the right side of the animation video 192 are extracted. The color video 193 (RGB) and the grayscale video 194 (left half of the animation video 192) are multiplied by channels to achieve a positive overlay. Based on the overlay result, the pixel data of each pixel in the canvas of the mobile webpage is determined. Based on the pixel data of each pixel in the canvas, a ribbon falling animation is depicted on the mobile webpage 195, displaying the falling ribbon 196 and restoring the single-frame transparent texture from the original video to achieve the ribbon falling effect. Optionally, the mobile webpage 195 also includes a card element 197, which plays a promotional video. The mobile webpage can be used as an application launch page.

[0182] It should be noted that the above-mentioned ribbon falling animation effect is only a kind of particle animation effect, and the ribbon is only a target object. This application embodiment does not limit the types of particle animation effects and target objects.

[0183] In summary, the technical solution provided in this application, by acquiring the image to be processed, can obtain a non-transparent color image that can characterize the color information of the original transparency image, and a non-transparent grayscale image that can characterize the transparency information. Based on the aforementioned non-transparent color image and non-transparent grayscale image, the transparency effect of the original transparency image can be reproduced, thereby displaying at least one target object in the original transparency image on the first page. There is no need to manually create and configure the animation particles required for particle animation effects, which reduces the cost of page effect production. Furthermore, the computing resources consumed by the page display do not increase with the increase in the number of target objects, effectively improving the page display efficiency.

[0184] In specific application scenarios, such as displaying particle animation effects on mobile web pages, the technical solution provided in this application can enable the playback of bonus page particle animation effects on mobile web page content. This solves the problem that the Lottie solution cannot be used to render particle animation effects on Android / iOS / web platforms. Furthermore, particle motion effects can be reproduced on the page using only non-transparent video files, which not only reduces the requirements for client decoders but also reduces network data transmission and terminal computing power, greatly improving page display efficiency and adapting to complex network environments. Moreover, the terminal side does not experience a significant increase in rendering resources as the number of animation particles increases, further enhancing page display efficiency.

[0185] The following are embodiments of the apparatus of this application, which can be used to execute embodiments of the method of this application. For details not disclosed in the apparatus embodiments of this application, please refer to the embodiments of the method of this application.

[0186] Please refer to Figure 20 This diagram illustrates a block diagram of a page display apparatus according to an embodiment of this application. The apparatus has the function of implementing the above-described page display method; this function can be implemented in hardware or by hardware executing corresponding software. The apparatus 2000 can be a computer device or can be installed within a computer device. The apparatus 2000 may include: a page display module 2010, an image acquisition module 2020, and an object display module 2030.

[0187] Page display module 2010 is used to display the first page.

[0188] Image acquisition module 2020 is used to acquire at least one image to be processed; wherein, the at least one image to be processed includes a third image and a fourth image corresponding to at least one second image, the at least one second image is a transparency image including at least one target object, the third image is a non-transparent color image used to characterize the color information of the second image, and the fourth image is a non-transparent grayscale image used to characterize the transparency information of the second image.

[0189] The object display module 2030 is used to display the at least one target object on the first page based on the third image and the fourth image.

[0190] In an exemplary embodiment, the device is applied to a terminal device equipped with a target sensor, and the page display module 2010 is specifically used to display the first page when an application launch command for a target application is detected.

[0191] The object display module 2030 includes: an operation receiving unit and an object display unit.

[0192] An operation receiving unit is configured to receive a trigger operation via the target sensor when the first page is displayed, the trigger operation being an operation to trigger the display of the at least one target object.

[0193] An object display unit is configured to display the at least one target object on the first page in response to the triggering operation, based on the third image and the fourth image.

[0194] In an exemplary embodiment, the apparatus 2000 further includes a layer determination unit.

[0195] A layer determination unit is used to determine at least one display layer corresponding to the at least one image to be processed in the first page.

[0196] The object display unit is further configured to display the at least one target object on the at least one display layer based on the third image and the fourth image.

[0197] In an exemplary embodiment, the at least one image to be processed includes at least one first image, and the generation process corresponding to the at least one first image includes:

[0198] Obtain a second video; wherein the second video includes the at least one target object, and the transparency of the area in the second video other than the at least one target object is less than a transparency threshold;

[0199] The second video is subjected to a first video conversion process to obtain a third video, which is used to represent the color information of the second video.

[0200] The second video is subjected to a second video conversion process to obtain a fourth video, which is used to characterize the transparency information of the second video;

[0201] The third video and the fourth video are fused together to obtain a first video, which includes the at least one first image.

[0202] In an exemplary embodiment, the second video includes color data of each pixel in the at least one second image corresponding to the pixel color channel, and transparency data of each pixel corresponding to the pixel transparency channel;

[0203] The step of performing a first video conversion process on the second video to obtain a third video includes:

[0204] The third image is generated based on the color data, and the third video includes the third image;

[0205] The step of performing a second video conversion process on the second video to obtain a fourth video includes:

[0206] The fourth image is generated based on the transparency data, and the fourth video includes the fourth image;

[0207] The process of fusing the third video and the fourth video to obtain the first video includes:

[0208] The third image is stitched together with the fourth image to obtain the at least one first image.

[0209] In an exemplary embodiment, the apparatus 2000 further includes an image splitting unit.

[0210] An image splitting unit is used to split the at least one first image to obtain the third image and the fourth image.

[0211] The object display module 2030 includes an image orthogonal unit.

[0212] An image orthogonal unit is used to perform orthogonal superposition processing on the third image and the fourth image to generate pixel texture information corresponding to the target canvas, the target canvas being used to display the at least one target object;

[0213] The object display unit is further configured to display the target object corresponding to the at least one first image on the first page based on the pixel texture information.

[0214] In an exemplary embodiment, the image orthogonal unit includes: a first vector generation subunit, a second vector generation subunit, a vector fusion subunit, and a canvas pixel determination subunit.

[0215] The first vector generation subunit is used to normalize the pixel data of each pixel in the third image to obtain the first data vector corresponding to each pixel in the third image.

[0216] The second vector generation subunit is used to normalize the pixel data of each pixel in the fourth image to obtain the second data vector corresponding to each pixel in the fourth image. The second data vector is used to characterize the transparency information of the canvas pixels in the target canvas.

[0217] The vector fusion subunit is used to fuse the feature data in each dimension of the first data vector with the feature data in the corresponding dimension of the second data vector to obtain fused pixel data, which is used to characterize the color information of the canvas pixels.

[0218] The canvas pixel determination subunit is used to determine the pixel data corresponding to the canvas pixel based on the fused pixel data and the feature data in the second data vector. The pixel data corresponding to the canvas pixel is used to characterize the pixel texture information.

[0219] In an exemplary embodiment, the device 2000 further includes a card display module and a content display module.

[0220] A card display module is used to display card elements on the first page, wherein the card elements are used to display multimedia content associated with the first page.

[0221] The content display module is used to display the multimedia content based on the card element, wherein the card element includes preset controls.

[0222] The page display module 2010 is also configured to display a second page associated with the card element in response to a selection operation on the preset control.

[0223] In summary, the technical solution provided in this application, by acquiring the image to be processed, can obtain a non-transparent color image that can characterize the color information of the original transparency image, and a non-transparent grayscale image that can characterize the transparency information. Based on the aforementioned non-transparent color image and non-transparent grayscale image, the transparency effect of the original transparency image can be reproduced, thereby displaying at least one target object in the original transparency image on the first page. There is no need to manually create and configure the animation particles required for particle animation effects, which reduces the cost of page effect production. Furthermore, the computing resources consumed by the page display do not increase with the increase in the number of target objects, effectively improving the page display efficiency.

[0224] It should be noted that the apparatus provided in the above embodiments is only illustrated by the division of the above functional modules when implementing its functions. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. In addition, the apparatus and method embodiments provided in the above embodiments belong to the same concept, and the specific implementation process can be found in the method embodiments, which will not be repeated here.

[0225] Please refer to Figure 21 This diagram illustrates a structural block diagram of a computer device according to an embodiment of this application. The computer device may be a terminal. This computer device is used to implement the page display method provided in the above embodiments. Specifically:

[0226] Typically, computer device 2100 includes a processor 2101 and a memory 2102.

[0227] Processor 2101 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 2101 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field Programmable Gate Array), and PLA (Programmable Logic Array). Processor 2101 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 2101 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, processor 2101 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

[0228] The memory 2102 may include one or more computer-readable storage media, which may be non-transitory. The memory 2102 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 2102 is used to store at least one instruction, at least one program, code set, or instruction set, configured to be executed by one or more processors to implement the page display method described above.

[0229] In some embodiments, the computer device 2100 may also optionally include: a peripheral device interface 2103 and at least one peripheral device. The processor 2101, memory 2102, and peripheral device interface 2103 can be connected via a bus or signal line. Each peripheral device can be connected to the peripheral device interface 2103 via a bus, signal line, or circuit board. Specifically, the peripheral device includes at least one of: a radio frequency circuit 2104, a touch display screen 2105, a camera assembly 2106, an audio circuit 2107, a positioning assembly 2108, and a power supply 2109.

[0230] Those skilled in the art will understand that Figure 21 The structure shown does not constitute a limitation on computer device 2100 and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

[0231] In an exemplary embodiment, a computer-readable storage medium is also provided, the storage medium storing at least one instruction, at least one program, code set, or instruction set, wherein the at least one instruction, the at least one program, the code set, or the instruction set, when executed by a processor, implements the above-described page display method.

[0232] Optionally, the computer-readable storage medium may include: ROM (Read Only Memory), RAM (Random Access Memory), SSD (Solid State Drives), or optical disc, etc. The random access memory may include ReRAM (Resistance Random Access Memory) and DRAM (Dynamic Random Access Memory).

[0233] In an exemplary embodiment, a computer program product or computer program is also provided, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the page display method described above.

[0234] It should be understood that "multiple" as used herein refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. Furthermore, the step numbers described herein are merely illustrative of one possible execution order. In some other embodiments, the steps may not be executed in the order shown in the figures, such as two steps with different numbers being executed simultaneously, or two steps with different numbers being executed in the reverse order of the figures. This application does not limit this.

[0235] In addition, in the specific embodiments of this application, data such as user information are involved. When the above embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0236] The above description is merely an exemplary embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.< / canvas>

Claims

1. A page display method, characterized in that, The method includes: Display the first page; At least one image to be processed is obtained; wherein the at least one image to be processed includes a third image and a fourth image corresponding to at least one second image, the at least one second image is a transparency image including at least one target object, the third image is a non-transparent color image used to characterize the color information of the second image, and the fourth image is a non-transparent grayscale image used to characterize the transparency information of the second image; the fourth image is obtained based on grayscale image conversion processing of the transparency data of the at least one second image, and the color data of each pixel in the fourth image in the RGB channel is determined based on the transparency data; Displaying the at least one target object on the first page based on the third image and the fourth image; the displaying of the at least one target object on the first page based on the third image and the fourth image includes: The pixel data of each pixel in the third image is normalized to obtain the first data vector corresponding to each pixel in the third image; the color data of each pixel in the fourth image in each pixel color channel is normalized to obtain the feature data corresponding to each pixel in the fourth image in each pixel color channel; based on the feature data corresponding to each pixel in the fourth image in each pixel color channel, the second data vector corresponding to each pixel in the fourth image is obtained, and the second data vector is used to characterize the transparency information of the canvas pixels in the target canvas; The feature data in each dimension of the first data vector is multiplied with the feature data in the corresponding dimension of the second data vector to obtain fused pixel data. The fused pixel data is used to represent the color information of the canvas pixels. The fused pixel data includes the feature product data of the first data vector and the second data vector in each dimension. Based on the fused pixel data and the feature data in the second data vector, the pixel data corresponding to the canvas pixel is determined. The pixel data corresponding to the canvas pixel is used to characterize pixel texture information. The target canvas is used to display the at least one target object. Based on the pixel texture information, at least one target object corresponding to the first image is displayed on the first page.

2. The method according to claim 1, characterized in that, The method is applied to a terminal device equipped with a target sensor, wherein displaying the first page includes: If an application launch command targeting the application is detected, the first page is displayed; The step of displaying the at least one target object on the first page based on the third image and the fourth image includes: When the first page is displayed, a trigger operation is received by the target sensor, the trigger operation being used to trigger the display of the at least one target object; In response to the triggering operation, the at least one target object is displayed on the first page based on the third image and the fourth image.

3. The method according to claim 1, characterized in that, The method further includes: Determine at least one display layer in the first page corresponding to the at least one image to be processed; The step of displaying the at least one target object on the first page based on the third image and the fourth image includes: Based on the third image and the fourth image, the at least one target object is displayed on the at least one display layer.

4. The method according to claim 1, characterized in that, The at least one image to be processed includes at least one first image, and the generation process corresponding to the at least one first image includes: Obtain a second video; wherein the second video includes the at least one target object, and the transparency of the area in the second video other than the at least one target object is less than a transparency threshold; The second video is subjected to a first video conversion process to obtain a third video, which is used to represent the color information of the second video. The second video is subjected to a second video conversion process to obtain a fourth video, which is used to characterize the transparency information of the second video; The third video and the fourth video are fused together to obtain a first video, which includes the at least one first image.

5. The method according to claim 4, characterized in that, The second video includes color data of each pixel in the at least one second image corresponding to the color channel of the pixel, and transparency data of each pixel corresponding to the transparency channel of the pixel; The step of performing a first video conversion process on the second video to obtain a third video includes: The third image is generated based on the color data, and the third video includes the third image; The step of performing a second video conversion process on the second video to obtain a fourth video includes: The fourth image is generated based on the transparency data, and the fourth video includes the fourth image; The process of fusing the third video and the fourth video to obtain the first video includes: The third image is stitched together with the fourth image to obtain the at least one first image.

6. The method according to claim 5, characterized in that, The method further includes: The at least one first image is split to obtain the third image and the fourth image.

7. The method according to any one of claims 1 to 6, characterized in that, The method further includes: Card elements are displayed on the first page, and the card elements are used to display multimedia content associated with the first page; The multimedia content is displayed based on the card element, which includes preset controls; In response to a selection operation on the preset control, a second page associated with the card element is displayed.

8. A page display device, characterized in that, The device includes: The page display module is used to display the first page; An image acquisition module is used to acquire at least one image to be processed; wherein the at least one image to be processed includes a third image and a fourth image corresponding to at least one second image, the at least one second image is a transparency image including at least one target object, the third image is a non-transparent color image used to characterize the color information of the second image, and the fourth image is a non-transparent grayscale image used to characterize the transparency information of the second image; the fourth image is obtained based on grayscale image conversion processing of the transparency data of the at least one second image, and the color data of each pixel in the fourth image in the RGB channel is determined based on the transparency data; An object display module is configured to display the at least one target object on the first page based on the third image and the fourth image; the process of displaying the at least one target object on the first page based on the third image and the fourth image includes: The pixel data of each pixel in the third image is normalized to obtain the first data vector corresponding to each pixel in the third image; the color data of each pixel in the fourth image in each pixel color channel is normalized to obtain the feature data corresponding to each pixel in the fourth image in each pixel color channel; based on the feature data corresponding to each pixel in the fourth image in each pixel color channel, the second data vector corresponding to each pixel in the fourth image is obtained, and the second data vector is used to characterize the transparency information of the canvas pixels in the target canvas; The feature data in each dimension of the first data vector is multiplied with the feature data in the corresponding dimension of the second data vector to obtain fused pixel data. The fused pixel data is used to represent the color information of the canvas pixels. The fused pixel data includes the feature product data of the first data vector and the second data vector in each dimension. Based on the fused pixel data and the feature data in the second data vector, the pixel data corresponding to the canvas pixel is determined. The pixel data corresponding to the canvas pixel is used to characterize pixel texture information. The target canvas is used to display the at least one target object. Based on the pixel texture information, at least one target object corresponding to the first image is displayed on the first page.

9. The apparatus according to claim 8, characterized in that, The device is applied in a terminal device equipped with a target sensor, and the page display module is used to display the first page when an application launch command for the target application is detected; The object display module includes: an operation receiving unit and an object display unit; The operation receiving unit is configured to receive a trigger operation via the target sensor when the first page is displayed, the trigger operation being an operation to trigger the display of the at least one target object. An object display unit is configured to display the at least one target object on the first page in response to the triggering operation, based on the third image and the fourth image.

10. The apparatus according to claim 8, characterized in that, The device further includes: a layer determination unit; The layer determination unit is used to determine at least one display layer corresponding to the at least one image to be processed in the first page; The object display unit is also configured to display the at least one target object on the at least one display layer based on the third image and the fourth image.

11. The apparatus according to claim 8, characterized in that, The at least one image to be processed includes at least one first image, and the apparatus includes a first image generation unit for: Obtain a second video; wherein the second video includes the at least one target object, and the transparency of the area in the second video other than the at least one target object is less than a transparency threshold; The second video is subjected to a first video conversion process to obtain a third video, which is used to represent the color information of the second video. The second video is subjected to a second video conversion process to obtain a fourth video, which is used to characterize the transparency information of the second video; The third video and the fourth video are fused together to obtain a first video, which includes the at least one first image.

12. The apparatus according to claim 11, characterized in that, The second video includes color data of each pixel in the at least one second image corresponding to the color channel of the pixel, and transparency data of each pixel corresponding to the transparency channel of the pixel; The first image generation unit is configured to: The third image is generated based on the color data, and the third video includes the third image; The fourth image is generated based on the transparency data, and the fourth video includes the fourth image; The third image is stitched together with the fourth image to obtain the at least one first image.

13. The apparatus according to claim 12, characterized in that, The device further includes: an image segmentation unit; The image splitting unit is used to split the at least one first image to obtain the third image and the fourth image.

14. The apparatus according to any one of claims 8-13, characterized in that, The device further includes: a card display module and a content display module; The card display module is used to display card elements on the first page, and the card elements are used to display multimedia content associated with the first page; The content display module is used to display the multimedia content based on the card element, wherein the card element includes preset controls; The page display module is also configured to display a second page associated with the card element in response to a selection operation on the preset control.

15. A computer device, characterized in that, The computer device includes a processor and a memory, the memory storing at least one instruction, at least one program, a code set, or an instruction set, the at least one instruction, the at least one program, the code set, or the instruction set being loaded and executed by the processor to implement the page display method as described in any one of claims 1 to 7.

16. A computer-readable storage medium, characterized in that, The storage medium stores at least one instruction, at least one program, code set, or instruction set, wherein the at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by a processor to implement the page display method as described in any one of claims 1 to 7.

17. A computer program product, characterized in that, The computer program product includes computer instructions stored in a computer-readable storage medium, a processor of a computer device reading the computer instructions from the computer-readable storage medium, and the processor executing the computer instructions to cause the computer device to perform the page display method as described in any one of claims 1 to 7.

Images