A 3D rotation animation production method for an Animation-based page

Abstract

The application discloses a page 3D rotation animation production method based on Animation, which comprises the following steps: S101, a Rotate3dAnimation class is realized to extend the Animation class; S102, an applyTransformation() method is rewritten to provide a matrix transformation at a specified time; in the method, a matrix rotating around the Y axis is obtained by using a Camera class, and the matrix is set to a rotating object; S103, a current camera position is saved to restore to the original position after transformation is completed, and a Z axis offset is set; S104, a view is set to rotate around the Y axis, the X axis or a rotation center point; the rotation center point can be set as a center point of the view or a self-defined coordinate point; a rotation effect of the animation is realized through a configured animation execution rate; S105, a transformation is applied to a transformation matrix; and S106, a position of the camera is restored after the call is completed. The application can realize a 3D flip effect on the android, and improve user experience.

Description

Technical Field

[0001] This invention relates to the field of computer and image data processing technology, and in particular to a method for creating 3D rotating page animation based on animation. Background Technology

[0002] Currently, iOS clients have an official API that allows for 3D flip effects when switching pages. However, Android currently only provides 2D flip animation effects. In order to keep the animation effects of an app consistent between iOS and Android, a 3D flip effect needs to be implemented on Android to make the user experience of the two clients similar and to improve the Android user experience.

[0003] Currently, there are three types of animations in Android:

[0004] (1) Frame Animation: Animation is produced by playing a series of images in sequence.

[0005] (2) TweenAnimation: This animation effect is produced by continuously transforming the image of objects in the scene (transparency, scaling, translation, rotation). It is a progressive animation, and View animation supports customization.

[0006] (3) AttributeAnimation: Achieves animation effects by dynamically changing the properties of an object.

[0007] Currently, Android's built-in animation effects are all 2D, lacking 3D effects and unable to achieve the 3D flip animations of iOS, resulting in relatively limited animation options. This invention primarily aims to implement 3D flip animations on Android, enabling Android to have iOS-like rotation effects. It also enriches Android's page flipping effects, bridging the gap in user experience between iOS and Android app clients. While some Android 3D animation effects exist, they primarily rotate view controls on the page. This invention supports not only view controls but also 3D rotation of the entire page during page transitions, rather than animing a single view. It achieves control by integrating the page transition lifecycle.

[0008] Based on the principles of view rendering, in Android, each View has three fixed core steps that are executed sequentially: measure, layout, and draw. Measure and layout determine the size and position of the View to be drawn, and then draw it onto the surface. The measure, layout, and draw methods primarily run at the system's application framework layer, while the actual rendering of the data onto the screen is handled by the system's native SurfaceFlinger service. Optimization of the animation rendering process results in smoother rotation effects. Summary of the Invention

[0009] To address the problems existing in current technologies, the purpose of this invention is to provide a 3D rotation effect, enriching the animated page flipping effects of Android, and performing corresponding rotation operations according to the page's lifecycle. The closing of one page and the opening of another are animated together, and this rotation animation seamlessly connects the page switching process.

[0010] To achieve the above objectives, the present invention provides a method for creating 3D rotation animation of a page based on animation, characterized in that the method includes the following steps:

[0011] S101. Implement a Rotate3dAnimation class that extends the Animation class;

[0012] S102. Override the applyTransformation() method to provide a matrix transformation at a specified time; in this method, use the Camera class to obtain a matrix that rotates around the Y-axis, and set the matrix into the Transformation object;

[0013] S103. Save the current camera position so that it can be restored to its original position after the transformation is completed. Set the Z-axis offset.

[0014] S104. Set the view to rotate around the Y-axis, X-axis, or rotation center point; the rotation center point can be set to the center point of the view or a custom coordinate point; the rotation effect of the animation is achieved by configuring the animation execution rate;

[0015] S105. Apply the transformation to the transformation matrix;

[0016] S106. After the call is complete, restore the camera position.

[0017] Furthermore, in step S103, a distinction is made between entering and exiting the page, and the Z-axis offset is increased or decreased; increasing the Z-axis offset achieves the page entry effect, and decreasing the Z-axis offset achieves the page exit effect.

[0018] Furthermore, page A is first rotated using the animationOut method provided by the encapsulated Rotate3dAnimation class. When a callback message indicating the end of the animation is received, the method to open page B is called. Simultaneously, in the onresume lifecycle method of page B, the animationIn method provided by the Rotate3dAnimation class is called to rotate page B, thus completing the rotation process of switching from page A to page B.

[0019] Furthermore, using the center point of the view as the rotation center, the code is as follows:

[0020] matrix.preTranslate(-centerX,-centerY);

[0021] matrix.postTranslate(centerX,centerY);

[0022] If these two lines of code are not set, the rotation center will be the X and Y coordinates (0,0) by default.

[0023] Furthermore, the code uses a Camera to implement the animation. A Camera is a camera that moves an object in one place while the object moves along with the camera at a set angle. Then, the matrix that completes the animation is retrieved from the Camera.

[0024] In step S104, during the execution of the rotation animation, the animation execution rate is configured through the coordinated operation of the interpolator and the estimator, resulting in different visual effects at different rates.

[0025] The value incrementer has a method `getInterpolator()` that receives an `input` parameter. The value of `input` changes continuously with the animation, following this pattern: it increases uniformly according to the set animation duration, ranging from 0 to 1. At the start of the animation, the value of `input` is 0, and at the end, it is 1. The intermediate values ​​change between 0 and 1 as the animation runs, representing the percentage of time elapsed. The purpose of the `input` parameter is to calculate the percentage change in the current attribute value based on the percentage of time elapsed. The current attribute value is located on the x-axis, and the changed position is calculated based on the percentage change. The calculation formula in the code is as follows:

[0026] intresult=(int)(startValue+fraction*(endValue-startValue))

[0027] The evaluate method in the evaluator receives the three parameters: the animation completion parameter fraction, the initial value, and the ending value. In the code, the difference between the ending value and the initial value is obtained, then multiplied by the coefficient fraction, and added back to the initial value to obtain the current position of the animation on the x-axis. The coefficient fraction is obtained through the input value. After obtaining the coefficient fraction, the change of the x-property is calculated based on the coefficient fraction, thereby implementing the method of configuring the animation execution rate.

[0028] This invention achieves a 3D flipping animation effect. The code uses a Camera to implement the animation, moving the camera at a set angle. Then, the matrix that completes the animation is retrieved from the Camera, and the parent layout of the Activity is used as the view to rotate, thus realizing a 3D rotation effect on the page. This invention achieves the same rotation effect as iOS, and utilizes the page lifecycle to control the animation, enriching the animation effects on Android. Attached Figure Description

[0029] Figure 1 A timing diagram of the page switching process is shown in the page 3D rotation animation production method based on animation according to an embodiment of the present invention.

[0030] Figure 2 A schematic diagram of the process for creating a 3D rotating animation of a page based on Animation according to an embodiment of the present invention is shown.

[0031] Figure 3 This diagram illustrates the system-level flow of the measurement, layout, and draw processes for animation in this invention. Detailed Implementation

[0032] The technical solution of the present invention will now be clearly and completely described with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0033] In the description of this invention, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are used only for the convenience of describing the invention and for simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on the invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0034] In the description of this invention, it should be noted that, unless otherwise explicitly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art can understand the specific meaning of the above terms in this invention according to the specific circumstances.

[0035] The following combination Figures 1-3 Specific embodiments of the present invention will be described in detail below. It should be understood that the specific embodiments described herein are for illustrative and explanatory purposes only and are not intended to limit the present invention.

[0036] Animation refers to a form of animation that uses frame-by-frame photography of two-dimensional pictures or three-dimensional objects to create the illusion of motion.

[0037] Explanation of terms used in this embodiment:

[0038] Animation

[0039] Camera-------Camera category

[0040] applyTransformation -------- Begins rotational transformation

[0041] animationOut -------- Exit animation

[0042] animationIn ------- Enter animation

[0043] onresume -------- Callback when the page is first created

[0044] startActivity -------- Method to start redirecting to a new page

[0045] Measure ---------The first step in drawing a view: measurement

[0046] Layout – The second step in view drawing: layout

[0047] Draw ---------View Drawing, Part 3

[0048] SurfaceFlinger - Android system service

[0049] SharedClient --------- Anonymous memory sharing in Android

[0050] SharedBufferStack ------ A shared memory stack in Android.

[0051] Seven methods in the Activity lifecycle:

[0052] onCreate(): This method is called by the system when an Activity is first instantiated, and it is called only once during the entire lifecycle. It is typically used for initialization settings, such as setting the layout file to be used by the Activity, and binding listeners to buttons, etc.

[0053] onStart(): The system calls this function when an Activity is visible but has not received user focus and cannot be interacted with.

[0054] onRestart(): This is called by the system when an Activity has been stopped and then restarted.

[0055] onResume(): The system calls this function when the Activity is visible and has user focus and can be interacted with.

[0056] `onPause()`: Used to store persistent data. At this stage, the program is visible but not interactive; the system will stop CPU-intensive tasks such as animations. As described above, you should save some of your data here because your program's priority decreases at this point, and it may be reclaimed by the system.

[0057] onStop(): Called by the system when an Activity is completely covered and becomes invisible by a new Activity.

[0058] onDestroy(): This is called by the system when the Activity is destroyed by the system (either by the user calling finish() or by the system due to insufficient memory). It is called only once in the entire lifecycle and is used to release resources created in the onCreate() method, such as ending threads.

[0059] The complete lifecycle of an Activity begins with the first call to onCreate() and ends with the call to onDestroy().

[0060] This invention provides a method for creating 3D rotation animations on a webpage based on animation, such as... Figure 1 As shown, it illustrates the timing diagram of the 3D animation effects of the present invention during the entire page switching process. When jumping from page A to page B, page A is first rotated using the animationOut method provided by the encapsulated Rotate3dAnimation class. When a callback message indicating the end of the animation is received, the method to open page B is called. At the same time, in the onresume lifecycle method of page B, the animationIn method provided by the Rotate3dAnimation class is called to rotate page B, completing the rotation process of switching from page A to page B.

[0061] The method for creating 3D rotating page animation based on animation of this invention specifically includes the following steps, such as... Figure 2 As shown:

[0062] S101. Implement a Rotate3dAnimation class that extends the Animation class;

[0063] S102. Override the applyTransformation() method to provide a matrix transformation at a specified time; in this method, use the Camera class to obtain a matrix that rotates around the Y-axis, and set the matrix into the Transformation object;

[0064] S103. Save the current camera position so that it can be restored to its original position after the transformation is completed. Differentiate between entering and exiting the page and set the Z-axis offset to increase or decrease.

[0065] S104. Set the view to rotate around the Y-axis, X-axis, or rotation center point; the rotation center point can be set to the center point of the view or a custom coordinate point. By configuring the animation execution rate, the rotation effect of the animation can be enriched, and different speeds will produce different visual effects.

[0066] S105. Apply the transformation to the transformation matrix;

[0067] S106. After the call is complete, restore the camera position.

[0068] The specific code flow is as follows:

[0069] / / Save the current camera position so that it can be restored to its original position after the transformation is complete.

[0070] camera.save();

[0071] / / camera.translate, this method accepts three parameters, namely the offsets of the x, y, and z axes. Here we only offset the z axis to distinguish between page entry and exit, and achieve different animation effects.

[0072] if(mReverse){

[0073] The z-offset will increase over time. This creates the effect of the view shifting from near to far.

[0074] camera.translate(0.0f,0.0f,mDepthZ*interpolatedTime);

[0075] }else{

[0076] The z-offset will become smaller and smaller. This creates the effect that the view moves towards us from a far away place, getting closer and closer, until it finally moves onto the screen window.

[0077] camera.translate(0.0f,0.0f,mDepthZ*(1.0f-interpolatedTime));

[0078] }

[0079] / / This adds a rotation effect to the View. During the movement, the View will also rotate around the Y-axis.

[0080] camera.rotateY(degrees);

[0081] / / This adds a rotation effect to the View. During movement, the View will also rotate around the X-axis.

[0082] / / camera.rotateX(degrees);

[0083] / / This applies the series of transformations defined earlier to the transformation matrix. After calling this line, the camera's position can be restored for reuse next time.

[0084] camera.getMatrix(matrix);

[0085] / / Camera position recovery

[0086] camera.restore();

[0087] / / Rotate around the center point of the View. If these two lines of code are not added, the rotation center will be (0,0).

[0088] matrix.preTranslate(-centerX,-centerY);

[0089] matrix.postTranslate(centerX,centerY);

[0090] The code uses Camera to implement the animation. Camera is a camera. An object stays in one place, and we move the camera at a set angle. Then we retrieve the matrix that completes the animation from Camera and draw our object. This is the principle of this 3D animation. The parent layout of the page is used as the view to rotate and achieve the 3D rotation effect of the page.

[0091] Specifically, in step S104, during the execution of the rotation animation, the animation execution rate is configured through the coordinated operation of the interpolator and estimator, enriching the rotation effect and creating different visual effects at different rates. It uses the x-property as the animation parameter, representing its horizontal position on the screen. The animation duration is set to 40ms, and the distance traveled is 40 pixels. Every 10ms, as the frame refresh rate, the object moves horizontally by 10 pixels. At the end of 40ms, the animation stops, and the object ends at a horizontal position of 40 pixels. This is an example of an animation with linear interpolation, meaning the object moves at a constant speed.

[0092] The value estimator includes a method `getInterpolator()` that receives an `input` parameter. The value of `input` changes continuously with the animation, following this pattern: it increases uniformly according to the set animation duration, ranging from 0 to 1. At the start of the animation, `input` is 0, and at the end, it is 1. The intermediate value changes between 0 and 1 as the animation runs, representing the percentage of time elapsed. The purpose of `input` is to calculate the percentage change in the current attribute value based on the percentage of time elapsed. In this example, when `t = 20ms`, since the total runtime is 40ms, the percentage of time elapsed is 20 / 40 = 0.5. The estimator then calculates the changed attribute value based on this percentage change. The current attribute value is its position on the x-axis. The calculation formula used in the code is as follows:

[0093] intresult=(int)(startValue+fraction*(endValue-startValue))

[0094] The `evaluate` method in the evaluator receives the three parameters: the animation completion parameter `fraction`, the initial value, and the final value. In the code, the difference between the final value and the initial value is subtracted from the initial value, multiplied by the coefficient `fraction`, and then added back to the initial value. This gives the current position of the animation on the x-axis. The value of `input` determines `fraction`. The `input` value is calculated by the system and passed to the `getInterpolation()` method. The algorithm in the `getInterpolator()` method calculates a return value based on the `input` value, and this return value is `fraction`. Analyzing this example, when `t = 20ms`, the value of `input` is calculated to be 20 / 40 = 0.5, meaning the animation is 50% complete. The return value of the `getInterpolator()` method is the coefficient `fraction`. Since this is a linear change example, the `input` value is returned directly. After obtaining the coefficient `fraction`, the change in the x-property is calculated based on it. In this example, the three parameters of `evaluate` in the evaluator are 0.5, 0, and 40. Substituting the values, the calculation is: 0 + 0.5 * (40 - 0) = 20. It can be seen that this matches the desired linear rate; when t = 20 ms, x = 20. The above process allows for configuring the animation execution rate.

[0095] like Figure 3 As shown, the system uses an anonymous shared memory mechanism to achieve cross-process data transfer between applications and SurfaceFlinger. Each application and SurfaceFlinger creates a SharedClient, and each SharedClient object can create up to 31 SharedBufferStacks. Each view corresponds to one SharedBufferStack, which is essentially one window.

[0096] Therefore, the main reasons for excessively long view rendering times are as follows:

[0097] 1. Excessive depth of interface layout: The Measure, Layout and draw processes of a page are all completed recursively. The time for traversing a multi-branch tree is related to the height h of the tree, and its time complexity is O(h). If the hierarchy is too deep, each additional layer will increase the page display time.

[0098] 2. Complex layout: For interfaces where the View state changes, a series of operations are required when the View changes, such as recalculation, creation of DisplayList, rendering of DisplayList, and updating to the screen. If the layout is very complex, it can easily lead to serious performance problems.

[0099] 3. Overdrawing: Possible causes include overlapping UI elements with multiple backgrounds, or the draw method in a custom View repeatedly drawing the same area.

[0100] Therefore, in this animation layout, we tried to keep the layout simple, without deep layers, and we processed each step separately according to the drawing process.

[0101] In this invention, rendering the animation data to be displayed onto the screen is achieved through the SurfaceFlinger service in the system-level process. The implementation process of SurfaceFlinger includes the following steps:

[0102] S100. Respond to client events, create a drawing layer and establish a connection with the client's view.

[0103] S200. Receive client data and attributes, and modify the drawing layer attributes, including size, color, and transparency.

[0104] S300. Refresh the content of the created drawing layer to the screen.

[0105] S400. Maintain the sequence of drawing layers and perform clipping calculations on the final output of the drawing layers.

[0106] This invention improves the Android user experience by implementing 3D flipping animations, maintaining consistency with iOS and enriching Android's animation effects. It achieves the same rotation effects as iOS, bringing the Android and iOS user experiences closer together. The 3D rotation effect is implemented using camera features. The animation is controlled using the activity's lifecycle.

[0107] In the description of this specification, references to terms such as "embodiment," "example," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of the present invention. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, those skilled in the art can combine or combine the different embodiments or examples described in this specification and the features therein without causing contradiction.

[0108] While embodiments of the present invention have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention. Those skilled in the art can make changes, modifications, substitutions, and alterations to the above embodiments within the scope of the present invention.

Claims

1. An Animation-based page 3D rotation animation production method, characterized in that, The method comprises the following steps: S101. Implement a Rotate3dAnimation class, which extends the Animation class; S102. Override the applyTransformation() method to provide a matrix transformation at a specified time; Use the Camera class to obtain a matrix that rotates around the Y axis, and set the matrix to the rotating object; S103. Save the current camera position to restore it to its original position after the transformation is completed, and set the Z axis offset; S104. Set the view to rotate around the Y axis, the X axis, or the rotation center point, which can be set to the center point of the view or a custom coordinate point; through the configured animation execution rate, the rotation effect of the animation is achieved; S105. Apply the transformation to the transformation matrix; S106. Restore the camera position after the call is completed; The rotating object is the parent layout of the Activity, and the Camera is used in the code to implement the animation, which moves with the camera at a set angle, and then the matrix Matrix that completes the animation is taken out from the Camera to rotate the parent layout of the Activity as the view to achieve the 3D rotation special effect of the page.

2. The Animation-based page 3D rotation animation making method according to claim 1, characterized in that, In step S103, the Z axis offset is increased or decreased according to whether the page is entering or exiting; the Z axis offset increase realizes the page entry effect, and the Z axis offset decrease realizes the page exit effect.

3. The Animation-based page 3D rotation animation making method according to claim 2, characterized in that, First, the animationOut method provided by the encapsulated Rotate3dAnimation class is used to rotate the page A, and when the callback message of the end of the animation is received, the method of opening the page B is called, and in the onresume lifecycle method of the page B, the animationIn method provided by the Rotate3dAnimation class is called to rotate the page B, which completes the rotation process of switching the page A to the page B.

4. The Animation-based page 3D rotation animation making method according to claim 3, characterized in that, The center point of the view is used as the rotation center, and the code is as follows: matrix.preTranslate(-centerX, -centerY); matrix.postTranslate(centerX, centerY); If the two code sentences are not set, the X and Y axis coordinates (0, 0) point is used as the rotation center by default.

5. The Animation-based page 3D rotation animation making method according to claim 4, characterized in that, The Camera is used in the code to implement the animation, which is a camera, and an object does not move, and moves with the camera at a set angle, and then the matrix that completes the animation is taken out from the Camera.

6. The Animation-based page 3D rotation animation making method according to any one of claims 1-5, characterized in that, In step S104, in the execution process of the rotation animation, the configuration of the animation execution rate is realized through the cooperation of the interpolator and the evaluator, so that different visual effects are achieved at different rates.

7. The Animation-based page 3D rotation animation making method according to claim 6, characterized in that, In the value-added device is provided with the method getInterpolator() for receiving a parameter input, the value of this parameter input will change with the movement of the animation, its change rule as follows: according to the set animation length uniform growth, the change range is 0 to 1; When the animation starts, the value of input is 0, to the end of the animation, the value of input is 1, and the intermediate value is between 0 and 1, which represents the percentage of time elapsed, the role of the parameter input is to calculate the percentage of the current attribute value change according to the percentage of time elapsed, the current attribute value is the position on the x axis, according to the percentage of change to calculate the position after the change, using the calculation formula as follows: int result = (int) (startValue + fraction * (endValue - startValue)).

8. The Animation-based page 3D rotation animation making method according to claim 7, characterized in that, In the evaluator using evaluate method receives three parameters: the completion of the animation parameter fraction, the initial value and the end value of the animation; The difference between the end value and the initial value is obtained, and then multiplied by the coefficient fraction, and then added to the initial value, to obtain the specific position value of the x axis of the animation; The value of input is obtained to obtain the coefficient fraction; After obtaining the coefficient fraction, the change of x attribute is calculated according to the coefficient fraction, thus realizing the method of configuring the animation execution rate.

Images