Page transition animation control method and device
By using video template files to describe the page transition animation process, the problems of low efficiency in changing animation effects and large communication errors in existing technologies are solved, achieving efficient and configurable control of page transition animation effects and reducing development costs.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- BEIJING YOUKU TECH CO LTD
- Filing Date
- 2022-12-02
- Publication Date
- 2026-06-02
AI Technical Summary
In existing technologies, changing page transition animation effects is inefficient and fails to achieve the desired effect, resulting in significant communication errors between design and development, and high costs.
The page transition animation process is described using a video template file. The video template file includes an animation image area, a mask area, and a transparency mask area. By acquiring and generating animation effect layers, the page transition animation effect can be controlled.
It reduces development costs, avoids communication errors between designers and developers, supports dynamic page jump effects, and improves the configurability and consistency of animation effects.
Smart Images
Figure CN115774593B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of page processing technology, specifically to page transition animation control methods and apparatus, as well as electronic devices. Background Technology
[0002] When switching pages in a mobile app, such as from page A to page B, transition animations are often used to enhance the user experience. A typical method for controlling page transition animations is to write code to control the animation effects of pages A and B, which, when combined, form a complete transition effect. The advantage of code-based control is its high degree of customizability.
[0003] However, in the process of realizing this invention, the inventors found that the above technical solution has at least the following problems: 1) When the designers generate new effects, it is very likely that the animation code will need to be significantly adjusted; 2) Designers often have some cool effects, which are costly to implement with code, and details may be lost during the communication process between design and development. Summary of the Invention
[0004] This application provides a page transition animation control method to solve the problems of low efficiency and inability to achieve the target animation effect when changing animation effects in existing technologies. This application also provides a page transition animation control device and an electronic device.
[0005] This application provides a method for controlling page transition animation, including:
[0006] Obtain a video template file to describe the page transition animation process. The video template file includes multiple video frames, each of which includes an animation image area, an animation image mask area, and a page transparency mask area before the transition.
[0007] In response to a page redirection operation, the multiple video frames included in the video template file are obtained; for each video frame, the animation image is obtained from the animation image area, the mask of the animation image is obtained from the mask area of the animation image, and the target transparency mask of the page before redirection is obtained from the transparency mask area.
[0008] An animation effect layer is generated based on the animated image and its mask.
[0009] The transparency mask of the target page view before the jump is set as the target transparency mask, the animation effect layer is on top of the target page view before the jump, and the target page view before the jump is on top of the page view after the jump.
[0010] Optionally, the layout of the animated image area, the mask area of the animated image, and the transparency mask area can be either horizontal or vertical.
[0011] Optionally, obtaining the animation image from the animation image region includes:
[0012] Obtain the position information of the animated image region;
[0013] The animation image is obtained based on the position information of the animation image region;
[0014] The step of obtaining the mask of the animation image from the mask region of the animation image includes:
[0015] Obtain the position information of the mask region of the animation image;
[0016] The mask of the animation image is obtained based on the position information of the mask region of the animation image;
[0017] Obtaining the target transparency mask from the transparency mask region includes:
[0018] Obtain the position information of the transparency mask area;
[0019] The target transparency mask is obtained from the transparency mask region based on the position information of the transparency mask region.
[0020] Optional, also includes:
[0021] Edit the file to enable page transition animation control based on the edited file.
[0022] Optional, also includes:
[0023] Obtain page navigation description rules; the rules include: path descriptions for layer movement and path descriptions for layer scaling;
[0024] Page transition animations are processed according to the rules described above.
[0025] This application also provides a method for controlling page transition animation, including:
[0026] Multiple screens are generated corresponding to the page transition animation process; the screens include: an animation image area, a mask area for the animation image, and a transparency mask area for the page before the transition;
[0027] Based on the multiple screens corresponding to the process, a video template file is generated to describe the page transition animation process.
[0028] Optional, also includes:
[0029] The file is sent to the client so that the client responds to the page jump operation and obtains the multiple video frames included in the video template file; for each video frame, the animation image is obtained from the animation image area, the mask of the animation image is obtained from the mask area of the animation image, and the target transparency mask of the page before the jump is obtained from the transparency mask area of the page before the jump; an animation effect layer is generated based on the animation image and the mask of the animation image; the transparency mask of the target page before the jump is set as the target transparency mask, the animation effect layer is on top of the target page before the jump, and the target page before the jump is on top of the page view after the jump.
[0030] This application also provides a page transition animation control device, including:
[0031] The video template file acquisition unit is used to acquire a video template file that describes the page jump animation process. The video template file includes multiple video frames, and each video frame includes an animation image area, an animation image mask area, and a page transparency mask area before the jump.
[0032] The video frame acquisition unit is used to acquire the plurality of video frames included in the video template file in response to a page jump operation;
[0033] An animation design information acquisition unit is used to acquire the animation image from the animation image area, acquire the mask of the animation image from the mask area of the animation image, and acquire the target transparency mask of the page before the jump from the transparency mask area for each video frame.
[0034] A layer processing unit is used to generate an animation effect layer based on the animation image and the mask of the animation image; and to set the transparency mask of the page view before the target jump to the target transparency mask;
[0035] A layer composition unit is used to place the animation effect layer as the upper layer of the target page view before the jump, and the target page view before the jump as the upper layer of the page view after the jump.
[0036] This application also provides a page transition animation control device, including:
[0037] The screen generation unit is used to generate multiple screens corresponding to the page jump animation process; the screens include: an animation image area, an animation image mask area, and a transparency mask area of the page before the jump;
[0038] The video template file generation unit is used to generate a video template file that describes the page transition animation process based on multiple screens corresponding to the process.
[0039] This application also provides an electronic device, including:
[0040] Processor and memory;
[0041] The memory is used to store programs that implement any of the page transition animation control methods described above. The device is powered on and the program of the method is run by the processor.
[0042] This application also provides a computer-readable storage medium storing instructions that, when executed on a computer, cause the computer to perform the various methods described above.
[0043] This application also provides a computer program product including instructions that, when run on a computer, cause the computer to perform the various methods described above.
[0044] Compared with the prior art, this application has the following advantages:
[0045] The page transition animation control method provided in this application embodiment obtains a video template file describing the page transition animation process. The video template file includes multiple video frames, each video frame including an animation image area, an animation image mask area, and a transparency mask area of the page before transition. In response to a page transition operation, the multiple video frames included in the video template file are obtained. For each video frame, the animation image is obtained from the animation image area, the animation image mask is obtained from the animation image mask area, and the target transparency mask of the page before transition is obtained from the transparency mask area. An animation layer is generated based on the animation image and the animation image mask. The transparency mask of the target page view before transition is set as the target transparency mask, and the animation effect layer is on top of the target page view before transition, which is on top of the page view after transition. This approach allows designers to directly create video template files based on animation needs. When the user interface handles page transitions, each frame of the video file is processed sequentially, and the page transition animation is executed based on the frame's texture (overlaying the video texture with the pages before and after the transition). Because page transition effects are expressed using video template files, a describable and configurable method for representing dynamic effects is employed, eliminating the need for developers to write or adjust animation code. Since the page transition effects are fixed to a template described by a video, any effect that can be described in the video template can be displayed. From designing the video template to displaying the effect in the app, the result is deterministic, avoiding communication errors between visual effects designers and developers. Therefore, it effectively improves animation effects and reduces development costs. Furthermore, because video template files can be dynamically distributed, it supports the dynamic deployment of page transition effects in new scenarios. Attached Figure Description
[0046] Figure 1 A flowchart illustrating an embodiment of the page transition animation control method provided in this application;
[0047] Figure 2 A schematic diagram illustrating a scenario of an embodiment of the page transition animation control method provided in this application;
[0048] Figure 3 This application provides a video screenshot illustration of an embodiment of the page transition animation control method;
[0049] Figure 4 A schematic diagram of layer overlay of an embodiment of the page transition animation control method provided in this application. Detailed Implementation
[0050] Many specific details are set forth in the following description to provide a full understanding of this application. However, this application can be implemented in many other ways different from those described herein, and those skilled in the art can make similar extensions without departing from the spirit of this application; therefore, this application is not limited to the specific embodiments disclosed below.
[0051] This application provides a method and apparatus for deploying resource objects, as well as an electronic device. The various solutions are described in detail below in each embodiment.
[0052] like Figure 1 As shown in the embodiments of this application, the method allows designers of page transition animation effects to create video template files according to effect requirements. Designers can independently add visual effects without repeated intervention from developers. Designers can design each frame in the video according to effect requirements, and each frame can include three parts: the animated image, the mask of the animated image, and the target transparency mask of the page before the transition. Then, all frames are combined into a video template file. After completion, the video template file can be published to the server. When adjustments are needed, no modification to the animation code is required; only the video template file needs to be modified, and it can be dynamically published. The server can distribute the video template file to the user's device (such as a smartphone or tablet) at an appropriate time, and when the page transitions, the page transition animation can be controlled according to the video template file.
[0053] First Embodiment
[0054] Please refer to Figure 2 This is a flowchart of the page transition animation control method of this application. In this embodiment, the method may include the following steps:
[0055] Step 201: Obtain the video template file used to describe the page transition animation process.
[0056] The video template file is used to express page transition effects. In client-side apps (mobile applications), the visible area for the user is typically represented by a "page." Different pages display different content, and the switching between two pages is called a "page transition" or "page jump." The video template file is a video file, which can be a video file using any video encoding standard (such as H.264 / 265). This video template file includes multiple video frames, and the playback time of these frames can be the time it takes for the page jump to complete.
[0057] In this embodiment, the video frame is divided into three regions: an animated image region, an animated image mask region, and a transparency mask region for the page before the jump. The animated image region includes the animated image, the animated image mask region includes the animated image mask, and the transparency mask region for the page before the jump includes the target transparency mask for the page before the jump. These three regions can be arranged horizontally or vertically, or one part can be in the upper left corner, another in the lower right corner, and yet another in the center. Because the video frame includes three parts, it can also be called a three-screen video.
[0058] like Figure 3 As shown, a frame in the video template file includes the following three parts: 1) The left frame shows three Minions moving from top to bottom; 2) The middle frame shows a mask effect corresponding to the left frame. Combining the left and middle frames makes everything except the Minions (and the horizontal bar above them) transparent, revealing the page content; 3) The right frame uses black to represent transparency and white to represent opacity. By gradually expanding the black area downwards and shrinking the white area in the later video frame compared to the earlier one, it represents the page gradually disappearing before the jump and gradually being fully displayed after the jump. When this video template is applied to a page transition, the overall effect is that after the user opens page B from page A, the Minions pull a curtain, moving from top to bottom; after the curtain passes, page B is displayed, and page A is hidden. This continues until page B is fully displayed and page A is completely hidden. The effect is as follows. Figure 1 The changes in the user page are shown in the image. The left image is page A, the middle image is a frame during the transition from page A to page B, and the right image is page B.
[0059] Step S203: In response to the page redirection operation, obtain the multiple video frames included in the video template file.
[0060] When a page redirection occurs on the user's end, the multiple video frames included in the video template file are retrieved. Specifically, the video frames can be retrieved frame by frame according to the video frame rate, and the following steps S205 to S209 are performed on the current video frame. The video frame rate is a measure of the number of displayed frames, measured in frames per second. For example, at a frame rate of 20 frames per second, the interval between each frame can be 50 milliseconds, meaning one video frame is retrieved every 50 milliseconds. The following steps S205 to S209 can be performed on the current video frame within 50 milliseconds.
[0061] Step S205: For each video frame, obtain the animation image from the animation image area, obtain the mask of the animation image from the mask area of the animation image, and obtain the target transparency mask of the page before the jump from the transparency mask area.
[0062] The video frame includes three areas: an animated image area, an animated image mask area, and a transparency mask area. This step obtains the animated image from the animated image area, the animated image mask from the animated image mask area, and the target transparency mask from the transparency mask area. In this embodiment, the animated image, the animated image mask, and the target transparency mask of the page before the jump are collectively referred to as animation design information.
[0063] In specific implementation, obtaining the animation image from the animation image region can be done in the following ways: obtaining the position information of the animation image region; obtaining the animation image based on the position information of the animation image region; obtaining the mask of the animation image from the mask region of the animation image can be done in the following ways: obtaining the position information of the mask region of the animation image; obtaining the mask of the animation image based on the position information of the mask region of the animation image; obtaining the target transparency mask from the transparency mask region can be done in the following ways: obtaining the position information of the transparency mask region; obtaining the target transparency mask from the transparency mask region based on the position information of the transparency mask region.
[0064] As mentioned above, the three areas included in the video frame can be arranged horizontally or vertically, or one part can be in the upper left corner, another in the lower right corner, and yet another in the center. In practice, developers can preset the position information of each area, and relevant personnel can create the corresponding content for each area according to the preset position information.
[0065] In one example, the location information of three regions can be automatically identified based on the characteristics of each region's image. For instance, the animated image is characterized by including the details of the animated image; the mask of the animated image is characterized by including the outline of the real animated image, but without image details; the transparency mask region has neither the details of the animated image nor the image outline, and usually only has black and white parts.
[0066] Step S207: Generate an animation effect layer based on the animation image and the mask of the animation image.
[0067] In practice, the animated image and its mask can be superimposed to create an animation effect layer.
[0068] Step S209: Set the transparency mask of the target page view before the jump to the target transparency mask, the animation effect layer is on top of the target page view before the jump, and the target page view before the jump is on top of the page view after the jump.
[0069] The method provided in this application embodiment displays a page with three layers during page transition: a layer of the page before transition, a layer of the page after transition, and an animation effect layer. The animation process of page transition is the change process of a composite image of these three layers. For example... Figure 4 As shown, the three layers are arranged from bottom to top as follows: Page B layer is the layer of the page after the jump; Page A layer, which supports transparency, is the layer of the page before the jump; and the animation effect layer, which also supports transparency. All three layers change over time, and the rules governing these changes are controlled by the playback time of the video frames in the video template file.
[0070] In practice, the animation effect layer can be used as the upper layer of the target page view before the jump, and the target page view before the jump can be used as the upper layer of the page view after the jump. In this way, three layers are combined to render the page jump image.
[0071] Figure 4This describes the transition from page A to page B. The video template file, leveraging the mobile application's infrastructure, is downloaded to a specific storage area of the app at an appropriate time (idle time or a time specified by application rules). When a user triggers the transition from page A to page B, the video template file is decoded and divided into three parts as shown in the diagram: additional effects (i.e., animated images), an additional effect mask (i.e., a mask for the animated images), and a transparency mask for page A (i.e., a transparency mask for the page before the transition). The additional effects describe the effects attached to the top of the page transition animation container during the transition, such as light effects, particle effects, or other visual elements related to the page transition. These effects can be created by a visual effects designer. The additional effect mask is a grayscale image, used to describe the transparency of the image. In practice, the mask can be applied to the additional effect image using a shader to increase its transparency, allowing the content below the additional effect (pages A / B, etc.) to show through, thus creating a seamless image blending effect. Page A Transparency Mask: The essence of page transition is describing the process of page A disappearing and page B appearing. This mask is applied to page A to describe the overlay relationship between the images of A and B. This method can display special effects such as A fading out / B fading in, and the display area of B expanding from small to large. After the video template file finishes playing, the page transition animation process ends, and the page officially enters page B.
[0072] In one example, the method may further include the following step: editing the file to control page transition animation based on the edited file. This approach allows designers to directly modify the content of the video template file, specifically modifying the animation images and their masks, as well as the target transparency mask of the page before the transition, thus achieving dynamic publishing effects.
[0073] The method provided in this application uses video template files to describe the animation effects of page transitions. While this standardization brings advantages, it also introduces limitations, such as the inability to describe the page view after the transition (e.g., ...). Figure 4 The method further includes the following steps to address this issue: obtaining page transition description rules; these rules include, but are not limited to, descriptions of layer movement paths and layer scaling paths; and performing page transition animation processing based on these rules. This approach allows for the expansion of page transition description rules as a supplement to the video template file, such as adding path description rules for layer movement and scaling, thereby achieving effects like movement and scaling when the page view enters after a transition, thus supporting more complex and richer effects.
[0074] In one example, the page before redirection can be a video search page, and the page after redirection can be a video search results page. The method may further include the following step: determining the correspondence between search keywords and video template files. Specifically, the correspondence between search keywords and video template files can be stored. Accordingly, step S203 can be implemented as follows: in response to a page redirection operation, the target video template file corresponding to the target search keyword can be obtained. For example... Figure 1 As shown, when a user enters the search keyword "Despicable Me," they can obtain a video template file corresponding to the Despicable Me franchise. A specific frame from this file can be displayed as follows: Figure 3 As shown, this video template file is used to implement the animation effects during page transitions. This approach allows for different page transition animations based on different search keywords, thus effectively improving the user experience.
[0075] As can be seen from the above embodiments, the page transition animation control method provided in this application obtains a video template file describing the page transition animation process. The video template file includes multiple video frames, each video frame including an animation image area, an animation image mask area, and a transparency mask area of the page before transition. In response to a page transition operation, the multiple video frames included in the video template file are obtained. For each video frame, the animation image is obtained from the animation image area, the animation image mask is obtained from the animation image mask area, and the target transparency mask of the page before transition is obtained from the transparency mask area. An animation layer is generated based on the animation image and the animation image mask. The transparency mask of the target page view before transition is set as the target transparency mask, and the animation effect layer is on top of the target page view before transition, which is on top of the page view after transition. This approach allows designers to directly create video template files based on animation needs. When the user interface handles page transitions, each frame of the video file is processed sequentially, and the page transition animation is executed based on the frame's texture (overlaying the video texture with the pages before and after the transition). Because page transition effects are expressed using video template files, a describable and configurable method for representing dynamic effects is employed, eliminating the need for developers to write or adjust animation code. Since the page transition effects are fixed to a template described by a video, any effect that can be described in the video template can be displayed. From designing the video template to displaying the effect in the app, the result is deterministic, avoiding communication errors between visual effects designers and developers. Therefore, it effectively improves animation effects and reduces development costs. Furthermore, because video template files can be dynamically distributed, it supports the dynamic deployment of page transition effects in new scenarios.
[0076] Second Embodiment
[0077] In the above embodiments, a page transition animation control method is provided. Correspondingly, this application also provides a page transition animation control device. This device corresponds to the embodiments of the above method. Since the device embodiments are basically similar to the method embodiments, the description is relatively simple, and relevant parts can be referred to in the description of the method embodiments. The device embodiments described below are merely illustrative.
[0078] This application also provides a page transition animation control device, including: a video template file acquisition unit, a video frame acquisition unit, an animation design information acquisition unit, a layer processing unit, and a layer compositing unit.
[0079] A video template file acquisition unit is used to acquire a video template file describing the page jump animation process. The video template file includes multiple video frames, each video frame including an animation image area, an animation image mask area, and a transparency mask area of the page before the jump. A video frame acquisition unit is used to acquire the multiple video frames included in the video template file in response to a page jump operation. Animation design information acquisition unit is used to acquire the animation image from the animation image area, the animation image mask from the animation image mask area, and the target transparency mask of the page before the jump from the transparency mask area for each video frame. A layer processing unit is used to generate an animation effect layer based on the animation image and the animation image mask; and to set the transparency mask of the target page view before the jump as the target transparency mask. A layer compositing unit is used to use the animation effect layer as the upper layer of the target page view before the jump, and the target page view before the jump as the upper layer of the page view after the jump.
[0080] In the video frame, the three regions—the animated image region, the animated image mask region, and the transparency mask region—can be arranged horizontally, vertically, or in any other arbitrary arrangement.
[0081] The step of obtaining the animation image from the animation image region includes: obtaining the position information of the animation image region; obtaining the animation image based on the position information of the animation image region; the step of obtaining the mask of the animation image from the mask region of the animation image includes: obtaining the position information of the mask region of the animation image; obtaining the mask of the animation image based on the position information of the mask region of the animation image; the step of obtaining the target transparency mask from the transparency mask region includes: obtaining the position information of the transparency mask region; obtaining the target transparency mask from the transparency mask region based on the position information of the transparency mask region.
[0082] In one example, the apparatus may further include a video template file editing unit for editing the file to enable page jump animation control based on the edited file.
[0083] In one example, the apparatus may further include the following units: a rule acquisition unit, used to acquire page jump description rules; the rules include: a path description for layer movement, and a path description for layer scaling; and a rule application unit, used to perform page jump animation processing according to the rules.
[0084] Third Embodiment
[0085] In the above embodiments, a page transition animation control method is provided. Correspondingly, this application also provides a resource object delivery method. This method corresponds to the embodiments of the above methods. Since the method embodiments are basically similar to the method embodiments, the description is relatively simple, and relevant parts can be referred to in the description of the method embodiments. The method embodiments described below are merely illustrative.
[0086] This application also provides a method for controlling page transition animations, which can be executed by a personal computer or other device suitable for designers. The method may include the following steps:
[0087] Step 1: Generate multiple screens corresponding to the page transition animation process; the screens include: the animation image area, the animation image mask area, and the transparency mask area of the page before the transition.
[0088] Designers can use various image processing software to generate multiple screens corresponding to the page transition animation process. In practice, the animation image, its mask, and the target transparency mask of the page before the transition need to be arranged in the screen according to their respective position information.
[0089] Step 2: Based on the multiple screens corresponding to the process, generate a video template file to describe the page transition animation process.
[0090] Designers can use various video editing software to generate video template files that describe the page transition animation process based on multiple screens corresponding to the process.
[0091] In this embodiment, the method may further include the following steps: sending the file to a client so that the client responds to a page jump operation and obtains the plurality of video frames included in the video template file; for each video frame, obtaining the animation image from the animation image region, obtaining the mask of the animation image from the mask region of the animation image, and obtaining the target transparency mask of the page before jump from the transparency mask region of the page before jump; generating an animation effect layer based on the animation image and the mask of the animation image; setting the transparency mask of the target page view before jump as the target transparency mask, wherein the animation effect layer is on top of the target page view before jump, and the target page view before jump is on top of the page view after jump.
[0092] In a specific implementation, the file can be stored on the server. The server can then distribute the video template file to the client (such as a smartphone or tablet) at an appropriate time. When the page redirects, the page redirection animation can be controlled based on the video template file.
[0093] Fourth embodiment
[0094] In the above embodiments, a page transition animation control method is provided. Correspondingly, this application also provides a page transition animation control device. This device corresponds to the embodiments of the above method. Since the device embodiments are basically similar to the method embodiments, the description is relatively simple, and relevant parts can be referred to in the description of the method embodiments. The device embodiments described below are merely illustrative.
[0095] This application also provides a page transition animation control device, including: a video frame generation unit and a video file generation unit. The video frame generation unit is used to generate multiple frames corresponding to the page transition animation process; each frame includes: an animation image area, an animation image mask area, and a transparency mask area of the page before the transition; the video file generation unit is used to generate a video template file describing the page transition animation process based on the multiple frames corresponding to the process.
[0096] In one example, the apparatus may further include the following units: a video template file sending unit, configured to send the file to a client, so that the client, in response to a page jump operation, obtains the plurality of video frames included in the video template file; for each video frame, obtains the animation image from the animation image region, obtains the mask of the animation image from the mask region of the animation image, and obtains the target transparency mask of the page before jump from the transparency mask region of the page before jump; generates an animation effect layer based on the animation image and the mask of the animation image; sets the transparency mask of the target page view before jump as the target transparency mask, wherein the animation effect layer is on top of the target page view before jump, and the target page view before jump is on top of the page view after jump.
[0097] Fifth embodiment
[0098] In the above embodiments, a page transition animation control method is provided. Correspondingly, this application also provides an electronic device. This device corresponds to the embodiments of the above method. Since the device embodiments are basically similar to the method embodiments, the description is relatively simple, and relevant parts can be referred to in the description of the method embodiments. The device embodiments described below are merely illustrative.
[0099] The electronic device of this embodiment includes: a processor and a memory; the memory is used to store a program that implements the page jump animation control method described above, and the device is powered on and runs the program of the method through the processor.
[0100] Although this application discloses preferred embodiments as described above, it is not intended to limit this application. Any person skilled in the art can make possible changes and modifications without departing from the spirit and scope of this application. Therefore, the scope of protection of this application should be determined by the scope defined in the claims of this application.
[0101] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.
[0102] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.
[0103] 1. Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information by any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer 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 technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include non-transitory computer-readable media, such as modulated data signals and carrier waves.
[0104] 2. Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
Claims
1. A method for controlling page transition animation, characterized in that, include: Obtain a video template file to describe the page transition animation process. The video template file includes multiple video frames, each of which includes an animation image area, an animation image mask area, and a page transparency mask area before the transition. In response to a page redirection operation, the plurality of video frames included in the video template file are obtained; For each video frame, the animation image is obtained from the animation image region, the mask of the animation image is obtained from the mask region of the animation image, and the target transparency mask of the page before the jump is obtained from the transparency mask region; An animation effect layer is generated based on the animated image and its mask. The transparency mask of the target page view before the jump is set as the target transparency mask, the animation effect layer is on top of the target page view before the jump, and the target page view before the jump is on top of the page view after the jump.
2. The method according to claim 1, characterized in that, The layout of the animated image area, the animated image mask area, and the transparency mask area includes: horizontal or vertical arrangement.
3. The method according to claim 1, characterized in that, The step of obtaining the animation image from the animation image region includes: Obtain the position information of the animated image region; The animation image is obtained based on the position information of the animation image region; The step of obtaining the mask of the animation image from the mask region of the animation image includes: Obtain the position information of the mask region of the animation image; The mask of the animation image is obtained based on the position information of the mask region of the animation image; Obtaining the target transparency mask from the transparency mask region includes: Obtain the position information of the transparency mask area; The target transparency mask is obtained from the transparency mask region based on the position information of the transparency mask region.
4. The method according to claim 1, characterized in that, Also includes: Edit the file to enable page transition animation control based on the edited file.
5. The method according to claim 1, characterized in that, Also includes: Obtain page navigation description rules; the rules include: path descriptions for layer movement and path descriptions for layer scaling; Page transition animations are processed according to the rules described above.
6. A method for controlling page transition animation, characterized in that, include: Generate multiple screens corresponding to the page transition animation process; The screen includes: an animated image area, an animated image mask area, and a transparency mask area of the page before the jump. Based on the multiple screens corresponding to the process, a video template file is generated to describe the page transition animation process; The video template file is sent to the client so that the client responds to the page jump operation and obtains multiple video frames included in the video template file; for each video frame, the animation image is obtained from the animation image area, the mask of the animation image is obtained from the mask area of the animation image, and the target transparency mask of the page before the jump is obtained from the transparency mask area of the page before the jump; an animation effect layer is generated based on the animation image and the mask of the animation image; the transparency mask of the target page view before the jump is set as the target transparency mask, the animation effect layer is on top of the target page view before the jump, and the target page view before the jump is on top of the page view after the jump.
7. A page transition animation control device, characterized in that, include: The video template file acquisition unit is used to acquire a video template file that describes the page jump animation process. The video template file includes multiple video frames, and each video frame includes an animation image area, an animation image mask area, and a page transparency mask area before the jump. The video frame acquisition unit is used to acquire the plurality of video frames included in the video template file in response to a page jump operation; An animation design information acquisition unit is used to acquire the animation image from the animation image area, acquire the mask of the animation image from the mask area of the animation image, and acquire the target transparency mask of the page before the jump from the transparency mask area for each video frame. A layer processing unit is used to generate an animation effect layer based on the animation image and the mask of the animation image; Set the transparency mask of the page view before the target jump to the target transparency mask; A layer composition unit is used to place the animation effect layer as the upper layer of the target page view before the jump, and the target page view before the jump as the upper layer of the page view after the jump.
8. A page transition animation control device, characterized in that, include: The screen generation unit is used to generate multiple screens corresponding to the page jump animation process; the screens include: an animation image area, an animation image mask area, and a transparency mask area of the page before the jump; The video template file generation unit is used to generate a video template file describing the page transition animation process based on multiple screens corresponding to the process. The device further includes: A video template file sending unit is configured to send the video template file to a client, so that the client, in response to a page jump operation, obtains multiple video frames included in the video template file; for each video frame, the unit obtains the animation image from the animation image area, obtains the mask of the animation image from the mask area of the animation image, and obtains the target transparency mask of the page before the jump from the transparency mask area of the page before the jump; generates an animation effect layer based on the animation image and the mask of the animation image; sets the transparency mask of the target page view before the jump as the target transparency mask, and the animation effect layer is on top of the target page view before the jump, and the target page view before the jump is on top of the page view after the jump.
9. An electronic device, characterized in that, include: Processor and memory; A memory for storing a program that implements the page transition animation control method according to any one of claims 1-6, wherein the device is powered on and the program of the method is run by the processor.