CN107038735B - Method and system for realizing entity opening animation - Google Patents
Method and system for realizing entity opening animation Download PDFInfo
- Publication number
- CN107038735B CN107038735B CN201710209891.5A CN201710209891A CN107038735B CN 107038735 B CN107038735 B CN 107038735B CN 201710209891 A CN201710209891 A CN 201710209891A CN 107038735 B CN107038735 B CN 107038735B
- Authority
- CN
- China
- Prior art keywords
- animation
- entity
- pictures
- picture
- layers
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/20—3D [Three Dimensional] animation
Landscapes
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method and a system for realizing entity opening animation, which are suitable for iOS and OS X platforms and relate to the technical field of networks. The method comprises the following steps: creating a picture of an entity and a plurality of layers for loading the picture, wherein each picture displays at least one side surface of the outer surface or the inner surface of the entity; setting the loaded pictures of each layer and the loading sequence and animation effect of the pictures in the appointed layer; and superposing all the layers, and setting an animation execution sequence of the appointed layers, so that the three-dimensional graph in the entity closed state is displayed when all the layers start to load the pictures, and the three-dimensional graph in the entity open state is displayed after all the pictures in the appointed layers are loaded. The method is simple to realize, greatly reduces the workload of designers, is suitable for scenes with various entities opened, and meets the customized requirements of users.
Description
The invention relates to the technical field of networks, in particular to a method and a system for realizing entity opening animation.
Background
In order to improve the experience of the user using the application software, proper animation display can be added in the visual design of the product to improve the fluency of the interface, reduce the feeling of obtrusiveness, or prompt the user to execute certain operation to create active user experience. Particularly, for an entity such as an envelope, a gift box or a treasure box in application software, which has an opening/closing action, for example, a user receives a letter, obtains a gift bag in the application, or obtains a prop in a game, a cool and dazzling animation opening effect can enhance the interaction effect with the user and improve the user experience of products and services. Therefore, developers often need to design various animated special effects to inject vitality into applications. The entity opening effect shown in most mobile terminal application software in the current market is mainly realized by the following two ways: 1. the gif mode has simple development but high memory occupation, and can influence the fluency of the use of a user to a certain extent; 2. a plurality of pictures are displayed alternately, a visual animation alternate playing effect is brought to a user, the workload of a designer is increased, a plurality of excessive effect pictures need to be drawn, and the customization degree is low.
Disclosure of Invention
Aiming at the defects in the prior art, the invention mainly aims to provide a method for realizing the entity opening animation, and the invention also aims to provide a system for realizing the entity opening animation.
The invention provides a method for realizing entity opening animation, which is suitable for iOS and OS X platforms and comprises the following steps:
creating a picture of an entity and at least two layers for loading the picture, modifying the attributes of the layers by using a core animation CAKeyframeanimation, setting the attributes of the layers by using a basic animation CABASICanimation, and displaying at least one side surface of the outer surface or the inner surface of the entity by each picture;
setting the loaded pictures of each layer and the loading sequence and animation effect of the pictures in the appointed layer;
superposing all layers, and setting an animation execution sequence of a specified layer, so that a three-dimensional graph in an entity closed state is displayed when all layers start to load the pictures, and a three-dimensional graph in an entity open state is displayed after all the pictures in the specified layer are loaded; wherein the content of the first and second substances,
determining the stacking sequence of the image layers loaded with the pictures when all the image layers are stacked according to the relative positions of all the loaded pictures in the three-dimensional graph in the entity closed state or the relative positions of all the loaded pictures in the three-dimensional graph in the entity open state;
the outer surface of the entity is displayed before the entity is opened, and the outer surface and/or the inner surface of the entity is displayed after the entity is opened;
the core animation CAKeyframeanimation provides support for the key frame animation, and specifies the key path and the array and time of the corresponding value of each stage.
On the basis of the technical scheme, the animation effect of the picture comprises picture turning and picture sliding.
On the basis of the technical scheme, when the animation effect of the picture is picture turning, the pictures loaded on the appointed layer comprise pictures before and after turning;
the setting of the loading sequence and the animation effect of the pictures in the specified layer comprises the following steps:
dividing the total angle range of image turning into two sections, loading the image before turning in the first section of angle range of the appointed image layer, and loading the image after turning in the second section of angle range;
and setting key frame animation display parameters of the picture loaded in each section of angle range, wherein the key frame animation display parameters comprise turning duration.
On the basis of the technical scheme, when the animation effect of the picture is picture turning, the pictures loaded on the appointed layer also comprise the pictures in turning;
the setting of the loading sequence and the animation effect of the pictures in the specified layer comprises the following steps:
dividing the total angle range of image turning into n sections corresponding to the total number n of all the images, wherein n is greater than 1, and loading the ith image in the angle range of the ith section, wherein i is not less than 1 and not more than n, wherein the 1 st image is an image before turning, and the nth image is an image after turning;
and setting key frame animation display parameters of the picture loaded in each section of angle range, wherein the key frame animation display parameters comprise turning duration.
On the basis of the technical scheme, the setting of the key frame animation display parameters of the loaded picture in each section of angle range comprises the following steps: dividing any angle range into m sub-ranges, wherein m is greater than 1, and setting key frame animation display parameters of the pictures loaded in each sub-range, wherein the key frame animation display parameters comprise turning duration.
On the basis of the technical scheme, the specified layer is moved backwards after the layer is turned over.
On the basis of the technical scheme, when the animation effect of the picture is picture sliding, the setting of the loading sequence and the animation effect of the picture in the appointed layer comprises the following steps:
and setting the loading sequence of the pictures and the sliding animation display parameters, wherein the sliding animation display parameters comprise position coordinates and sliding duration after sliding.
On the basis of the technical scheme, all layers are superposed, so that the three-dimensional graph displaying the entity closed state when all layers start to load the picture comprises the following steps:
and determining the mutual relation of the displayed side surfaces of the pictures which are loaded at the beginning of all the layers according to the three-dimensional figures in the entity closed state, and sequentially overlapping all the layers to enable the front layer to cover the back layer, wherein the pictures loaded on the front layer correspond to the pictures loaded on the back layer in position.
The invention also provides a system for realizing entity opening animation, which is suitable for the iOS and OS X platform, and comprises:
the system comprises a creating module, a processing module and a display module, wherein the creating module is used for creating a picture of an entity and a plurality of layers for loading the picture, modifying the attributes of the layers by using a core animation CAKeyframeanimation, and setting the attributes of the layers by using a basic animation CABASICanimation, and each picture displays at least one side surface of the outer surface or the inner surface of the entity;
the picture setting module is used for setting all the pictures loaded in each layer and the loading sequence and the animation effect of the pictures in the appointed layer;
the layer setting module is used for superposing all layers and setting an animation execution sequence of the appointed layers, so that the three-dimensional graph in the entity closed state is displayed when all the layers start to load the pictures, and the three-dimensional graph in the entity open state is displayed after all the pictures in the appointed layers are loaded; wherein the content of the first and second substances,
determining the stacking sequence of the image layers loaded with the pictures when all the image layers are stacked according to the relative positions of all the loaded pictures in the three-dimensional graph in the entity closed state or the relative positions of all the loaded pictures in the three-dimensional graph in the entity open state;
the outer surface of the entity is displayed before the entity is opened, and the outer surface and/or the inner surface of the entity is displayed after the entity is opened;
the core animation CAKeyframeanimation provides support for the key frame animation, and specifies the key path and the array and time of the corresponding value of each stage.
On the basis of the technical scheme, the animation effect of the picture comprises picture turning and picture sliding.
Compared with the prior art, the invention has the following advantages:
(1) the method has the advantages that the solid opening animation can be realized only by creating the pictures of the solid according to the three-dimensional figures of the solid closing state and the solid opening state and loading the pictures in the layers according to the sequence and the preset animation effect, the realization is simple, and the workload of designers is greatly reduced.
(2) The method is applicable to scenes opened by various entities only by replacing the loaded pictures and adjusting the relative positions of the pictures, is simple and easy to use, and greatly improves the development efficiency.
(3) The animation display parameters can be configured according to needs, the interaction is friendly, and the customization requirements of users are met.
Drawings
FIG. 1 is a flowchart of a method for implementing an entity opening animation according to an embodiment of the present invention;
FIG. 2 is a schematic diagram of a system for implementing an entity opening animation according to an embodiment of the present invention.
Detailed Description
The invention is described in further detail below with reference to the figures and the embodiments.
The invention relates to a scheme for realizing a method for opening an animation by an entity, which has the following thought: the iOS-based kernel Animation (Core Animation), which modifies the attributes of the layer CALayer at the time of creation and makes it change smoothly. The layer is the place where the animation occurs, the basic animation CAKeyframeanimation simply sets and changes the attributes of the layer to realize the basic animation effect, and the CAKeyframeanimation provides support for the key frame animation and specifies the array and time of the key path and the corresponding value of each stage. After the animation display parameters are set and started, the core animation can independently complete the corresponding animation frame. The animation is easy to realize, the iOS core animation is adopted for realizing, and the memory consumption is low.
Based on the above thought, referring to fig. 1, an embodiment of the present invention provides a method for implementing an entity opening animation, which is applicable to iOS and OS X platforms, and includes the following steps:
s1, creating a picture of an entity and at least two layers for loading the picture, wherein each picture displays at least one side surface of the outer surface or the inner surface of the entity.
And S2, setting the loaded pictures of each layer and the loading sequence and animation effect of the pictures in the appointed layer.
And S3, superposing all layers, and setting an animation execution sequence of the appointed layers, so that the three-dimensional graph in the entity closed state is displayed when all the layers start to load the pictures, and the three-dimensional graph in the entity open state is displayed after all the pictures in the appointed layers are loaded.
Wherein, the entity is usually three-dimensional, and the three-dimensional graph is a three-dimensional effect for displaying the entity on a planar two-dimensional computer screen. The outer surface of the entity is displayed before the entity is opened, the outer surface and/or the inner surface of the entity is displayed after the entity is opened, for example, the outer surface of the whole envelope is displayed before the envelope is opened, the inner surface of the envelope and letters therein can be displayed after the envelope is opened, only a part of the inner surface (such as an envelope cover) of the opened envelope and letters can be displayed, pictures of the outer surface are still remained on the front side and the back side of the envelope, and the pictures can be flexibly determined according to actual conditions when being created.
The method has the advantages that the solid opening animation can be realized only by creating the pictures of the solid according to the three-dimensional figures of the solid closing state and the solid opening state and loading the pictures in the layers according to the sequence and the preset animation effect, the realization is simple, and the workload of designers is greatly reduced.
The animation effect of the picture comprises picture turning and picture sliding, and can also comprise transition effects, such as gradual change effect, entering covering effect, pushing effect, uncovering effect and the like. And when the animation effect of the picture is picture turning, the pictures loaded on the specified layers comprise pictures before turning and pictures after turning. For example, one side of the outer surface of the picture display entity before the turning is performed, and the side corresponding to the side of the outer surface on the inner surface of the picture display entity after the turning is performed.
The setting of the loading sequence and the animation effect of the pictures in the appointed layer comprises the following steps:
and dividing the total angle range of the image turning into two sections, wherein the specified image layer loads the image before turning in the first section of angle range, and loads the turned image in the second section of angle range.
And setting key frame animation display parameters of the loaded pictures in each section of angle range, wherein the key frame animation display parameters comprise turning duration. Specifically, any angle range is divided into m sub-ranges, m is greater than 1, and key frame animation display parameters of the pictures loaded in each sub-range are set, wherein the key frame animation display parameters comprise turning duration.
The pictures loaded in the appointed layer also comprise pictures in turning, and the setting of the loading sequence and the animation effect of the pictures in the appointed layer comprises the following steps:
dividing the total angle range of the image turning into n sections corresponding to the total number n of all the images, wherein n is greater than 1, loading the ith image in the angle range of the ith section of the image layer, and i is not less than 1 and not more than n, wherein the 1 st image is the image before turning, and the nth image is the image after turning.
And setting key frame animation display parameters of the loaded pictures in each section of angle range, wherein the key frame animation display parameters comprise turning duration. Specifically, any angle range is divided into m sub-ranges, m is greater than 1, and key frame animation display parameters of the pictures loaded in each sub-range are set, wherein the key frame animation display parameters comprise turning duration.
By setting the animation display parameters and duration of the key frames, the time for switching the pictures and the like, the user can not feel obtrusive in vision and can not perceive the change of the pictures. The effect is the same as gif, but because the system function is adopted, the memory occupation is very small. Compared with the implementation mode of picture rotation playing, the reusability is stronger.
And after the specified layer is turned over, backward moving operation is carried out, so that other layers in the subsequent steps are prevented from being shielded.
When the animation effect of the picture is picture sliding, the setting of the loading sequence and the animation effect of the picture in the appointed layer comprises the following steps: and setting the loading sequence of the pictures and the slide animation display parameters, wherein the slide animation display parameters comprise position coordinates after sliding and sliding duration.
The position coordinates and the sliding time length before starting and after finishing are only needed to be set, the animation can be displayed according to the set sliding animation display parameters after being started, and the codes are very concise and efficient. The animation display parameters can be configured according to needs, the interaction is friendly, and the customization requirements of users are met.
Superposing all layers, so that the three-dimensional graph displaying the entity closed state when all the layers start to load the pictures comprises the following steps: and determining the mutual relation of the displayed side surfaces of the pictures which are loaded at the beginning of all the layers according to the three-dimensional figures in the entity closed state, and sequentially overlapping all the layers to enable the front layer to cover the back layer, wherein the pictures loaded on the front layer correspond to the pictures loaded on the back layer in position.
In steps S2 and S3, in order to display the three-dimensional graph in the physically closed state, a picture loaded on each layer may be set first, and a relative position of the loaded picture in the three-dimensional graph in the physically closed state determines a stacking order of the layers loaded with the picture when all the layers are stacked. In addition, all layers may be superimposed first, and then each layer is loaded with a corresponding picture, for example, a picture of a front side surface of the entity is loaded on a previous layer, and a picture of a rear side surface of the entity is loaded on a subsequent layer. When a three-dimensional graph of a solid is displayed on a planar two-dimensional computer screen, the front layer is close to a viewer (such as a user), and the rear layer is far away from the viewer. After all the pictures are loaded, the relative positions of the loaded pictures in the three-dimensional graph in the entity open state determine the stacking sequence of the layers loaded with the pictures when all the layers are stacked, so that the three-dimensional graph in the entity open state is displayed.
And the layout is carried out in sequence according to the sequence, so that the shielding of the visual effect can be realized, and the 3D effect of the entity is presented, namely the three-dimensional graph of the closed state of the entity is displayed before the animation is started, and the three-dimensional graph of the closed state of the entity after the animation is finished.
The method is applicable to scenes opened by various entities only by replacing the loaded pictures and adjusting the relative positions of the pictures, is simple and easy to use, and greatly improves the development efficiency.
The following takes the envelope as an example to further describe the specific implementation process of the present invention.
To achieve an animation of envelope opening, letter ejection, pictures of the envelope are first created, each picture showing one side of the outer or inner surface of the envelope, in particular, the picture of the envelope comprises the envelope cover, the envelope flap, the letter and the envelope bottom. Since the pictures of the envelope flap when the envelope is closed and opened are different, two pictures of the outer surface and the inner surface of the envelope flap need to be created for the envelope flap. Four layers are created for loading these pictures: the graphic system comprises a back side graphic layer (bottom of an envelope), a front side graphic layer (front cover of the envelope), a top graphic layer (flip cover of the envelope) and an inner graphic layer (letter).
Secondly, setting the loaded pictures of each layer and the loading sequence and animation effect of the pictures in the appointed layer,
and finally, overlapping all layers, and setting an animation execution sequence of the appointed layers, so that the three-dimensional graph in the entity closed state is displayed when all the layers start to load the pictures, and the three-dimensional graph in the entity open state is displayed after all the pictures in the appointed layers are loaded.
Specifically, the back side layer, the front side layer, the top layer and the inner layer are loaded with the bottom of the envelope, the cover of the envelope, the outer surface of the envelope flip cover and the letter respectively and are superposed to display that the envelope is closed. And when the pictures loaded in other layers are unchanged and the top layer is loaded on the inner surface of the envelope flip cover, all the layers are overlapped to display that the envelope is opened.
Adopt four layers, fixed rear side layer and front side layer set up animation effect to top layer and inside layer, and the form of opening of animation and real envelope is unanimous for the envelope that realizes is opened, accords with most users 'operation custom and cognitive experience, improves user's use and experiences.
When all layers are stacked, the four layers need to be sequentially laid out, the rear side layer is located at the bottommost layer, the inner layer is located at the upper layer, the front side layer is located on the inner layer, and the top layer is located at the topmost layer. And the upper edge of the letter loaded by the inner image layer is lower than the upper edge of the bottom of the envelope loaded by the back image layer, and the bottom edges, left edges and right edges of the letter and the bottom of the envelope are respectively aligned. Similarly, the envelope cover loaded by the front image layer and the envelope flip loaded by the top image layer are respectively aligned with the corresponding edge of the bottom of the envelope loaded by the back image layer.
And the layout is carried out in sequence according to the sequence, so that the shielding of the visual effect can be realized, and the 3D effect of the entity is presented, namely the three-dimensional graph of the closed state of the entity is displayed before the animation is started, and the three-dimensional graph of the closed state of the entity after the animation is finished.
When the loading sequence and the animation effect of the envelope flip cover in the top layer are set, the total angle range of the envelope flip cover is 180 degrees, and the total angle range of the envelope flip cover can be divided into two sections: 0 to 90 degrees and 90 to 180 degrees. The top layer is loaded on the outer surface of the envelope flip cover at 0-90 degrees, and is loaded on the inner surface of the envelope flip cover at 90-180 degrees, and the pictures are switched when being vertical to the visual condition of a user, namely 90 degrees, so that seamless connection on the visual effect of the user is realized. In order to make the turning effect more continuous, the key frame animation is adopted to realize, so that the rotation attribute changes among a plurality of values, and the key frame animation can be regarded as a plurality of continuously executed basic animations which are just like one frame for making and playing.
In the process of turning the envelope flip cover by 0 to 90 degrees, the envelope flip cover can be further divided into two sub-ranges of 0 to 45 degrees and 45 to 90 degrees, in order to realize smooth transition, the duration of each sub-range respectively accounts for 50% of the turning time duration, for example, the turning time duration is usually set to be 0.7s according to the time duration of the animation to visually generate the image to the human. For different entities, such as opening of a treasure box, the speed of turning the flip cover 0 to 30 degrees, 30 degrees to 60 degrees and 60 to 90 degrees is usually different due to the weight of the flip cover, so that the visual habit of a user can be met by setting different execution time periods.
The specific code is implemented as follows:
specifically, the function is adopted to realize top layer switching pictures.
By setting the animation parameters and duration of the key frames, the time for switching the pictures and the like, the user can not feel obtrusive in vision and can not perceive the change of the pictures. The effect is the same as gif, but because the system function is adopted, the memory occupation is very small. Compared with the implementation mode of picture rotation playing, the reusability is stronger.
And in the process of turning the envelope flip cover by 90-180 degrees, modifying the angle sub-range, the time length parameter and the like of the key frame animation by adopting the same method as the method of 0-90 degrees. And after the animation is finished, moving the image layer backwards to be at the same level with the rear image layer, so as to avoid blocking the internal image layer popped up in the subsequent step.
When the loading sequence and the animation effect of the letters in the internal layer are set, the letters move upwards from the bottom, the x-axis coordinate is kept unchanged, the y coordinate value is modified to a proper position, the basic animation is used for realizing, and the approximate code is realized as follows:
CABasicAnimation*animation＝
[CABasicAnimationanimationWithKeyPath:@"position.y"]；
CGFloatoriginPositionX＝self.letter.layer.position.x；
CGFloatoriginPositionY＝self.letter.layer.position.y；
CGFloatendPositionX＝originPositionX；
CGFloatendPositionY＝originPositionY-backDownHeight- backTopHeight-20；
animation.fromValue＝@(originPositionY)；
animation.toValue＝@(endPositionY)；
animation.duration＝1；
animation.repeatCount＝1；
animation.delegate＝self；
[animation setRemovedOnCompletion:YES]；
[animation setValue:@"animation3"forKey:ANIMATIONKEY]；
[self.letter.layersetPosition:CGPointMake(endPositionX, endPositionY)]；
[self.letter.layeraddAnimation:animationforKey:@"animation3 "]；
after the envelope is opened, the letter is popped to a proper position, and at the moment, the basic animation is adopted instead of using the key frame animation for control. The position coordinates and the sliding time length before starting and after finishing are only needed to be set, the animation can be displayed according to the set sliding animation display parameters after being started, and the codes are very concise and efficient.
Referring to fig. 2, an embodiment of the present invention further provides a system for implementing entity opening animation, which is suitable for iOS and OS X platforms, and the system includes:
the creating module is used for creating a picture of the entity and loading a plurality of layers of the picture, and each picture displays at least one side surface of the outer surface or the inner surface of the entity.
The picture setting module is used for setting all pictures loaded in each layer and the loading sequence and animation effect of the pictures in the appointed layer.
The layer setting module is used for superposing all layers and setting an animation execution sequence of the appointed layers, so that the three-dimensional graph in the entity closed state is displayed when all the layers start to load the pictures, and the three-dimensional graph in the entity open state is displayed after all the pictures in the appointed layers are loaded.
The animation effect of the picture comprises picture turning and picture sliding.
The core animation can independently complete the corresponding animation frame only by creating the picture of the entity according to the three-dimensional figures of the closed state and the open state of the entity, loading the picture by utilizing the layer of the core animation, and setting the animation display parameters and starting the core animation. The animation is simple and easy to use, the memory consumption is low, the workload of designers is greatly reduced, animation display parameters can be configured as required, the interaction is friendly, and the customization requirements of users are met.
The present invention is not limited to the above-described embodiments, and it will be apparent to those skilled in the art that various modifications and improvements can be made without departing from the principle of the present invention, and such modifications and improvements are also considered to be within the scope of the present invention. Those not described in detail in this specification are within the skill of the art.
Claims (10)
1. A method for realizing entity opening animation is suitable for iOS and OS X platforms, and is characterized by comprising the following steps:
creating a picture of an entity and at least two layers for loading the picture, modifying the attributes of the layers by using a core animation CAKeyframeanimation, setting the attributes of the layers by using a basic animation CABASICanimation, and displaying at least one side surface of the outer surface or the inner surface of the entity by each picture;
setting the loaded pictures of each layer and the loading sequence and animation effect of the pictures in the appointed layer;
superposing all layers, and setting an animation execution sequence of a specified layer, so that a three-dimensional graph in an entity closed state is displayed when all layers start to load the pictures, and a three-dimensional graph in an entity open state is displayed after all the pictures in the specified layer are loaded; wherein the content of the first and second substances,
determining the stacking sequence of the image layers loaded with the pictures when all the image layers are stacked according to the relative positions of all the loaded pictures in the three-dimensional graph in the entity closed state or the relative positions of all the loaded pictures in the three-dimensional graph in the entity open state;
the outer surface of the entity is displayed before the entity is opened, and the outer surface and/or the inner surface of the entity is displayed after the entity is opened;
the core animation CAKeyframeanimation provides support for the key frame animation, and specifies the key path and the array and time of the corresponding value of each stage.
2. The method of implementing an entity opening animation of claim 1, wherein: the animation effect of the picture comprises picture turning and picture sliding.
3. The method for realizing entity opening animation according to claim 2, wherein when the animation effect of the picture is picture turning, the pictures loaded on the designated layer comprise pictures before turning and pictures after turning;
the setting of the loading sequence and the animation effect of the pictures in the specified layer comprises the following steps:
dividing the total angle range of image turning into two sections, loading the image before turning in the first section of angle range of the appointed image layer, and loading the image after turning in the second section of angle range;
and setting key frame animation display parameters of the picture loaded in each section of angle range, wherein the key frame animation display parameters comprise turning duration.
4. The method of implementing an entity opening animation of claim 2, wherein: when the animation effect of the picture is picture turning, the pictures loaded on the appointed layer also comprise the pictures in turning;
the setting of the loading sequence and the animation effect of the pictures in the specified layer comprises the following steps:
dividing the total angle range of image turning into n sections corresponding to the total number n of all the images, wherein n is greater than 1, and loading the ith image in the angle range of the ith section, wherein i is not less than 1 and not more than n, wherein the 1 st image is an image before turning, and the nth image is an image after turning;
and setting key frame animation display parameters of the picture loaded in each section of angle range, wherein the key frame animation display parameters comprise turning duration.
5. The method for realizing entity opening animation according to claim 3 or 4, wherein the setting of the key frame animation display parameters of the loaded pictures in each angle range comprises the following steps: dividing any angle range into m sub-ranges, wherein m is greater than 1, and setting key frame animation display parameters of the pictures loaded in each sub-range, wherein the key frame animation display parameters comprise turning duration.
6. The method of implementing an entity opening animation of claim 5, wherein: and carrying out backward movement operation on the appointed layer after the overturning is finished.
7. The method for realizing entity opening animation according to claim 2, wherein when the animation effect of the picture is picture sliding, setting the loading sequence and the animation effect of the picture in the specified layer comprises:
and setting the loading sequence of the pictures and the sliding animation display parameters, wherein the sliding animation display parameters comprise position coordinates and sliding duration after sliding.
8. The method of claim 1, wherein superimposing all layers such that a three-dimensional graph of an entity closed state is displayed when all layers begin loading the picture comprises:
and determining the mutual relation of the displayed side surfaces of the pictures which are loaded at the beginning of all the layers according to the three-dimensional figures in the entity closed state, and sequentially overlapping all the layers to enable the front layer to cover the back layer, wherein the pictures loaded on the front layer correspond to the pictures loaded on the back layer in position.
9. A system for realizing entity opening animation, which is suitable for iOS and OS X platforms, and is characterized by comprising:
the system comprises a creating module, a processing module and a display module, wherein the creating module is used for creating a picture of an entity and a plurality of layers for loading the picture, modifying the attributes of the layers by using a core animation CAKeyframeanimation, and setting the attributes of the layers by using a basic animation CABASICanimation, and each picture displays at least one side surface of the outer surface or the inner surface of the entity;
the picture setting module is used for setting the pictures loaded in each layer and the loading sequence and animation effect of the pictures in the appointed layer;
the layer setting module is used for superposing all layers and setting an animation execution sequence of the appointed layers, so that the three-dimensional graph in the entity closed state is displayed when all the layers start to load the pictures, and the three-dimensional graph in the entity open state is displayed after all the pictures in the appointed layers are loaded; wherein the content of the first and second substances,
determining the stacking sequence of the image layers loaded with the pictures when all the image layers are stacked according to the relative positions of all the loaded pictures in the three-dimensional graph in the entity closed state or the relative positions of all the loaded pictures in the three-dimensional graph in the entity open state;
the outer surface of the entity is displayed before the entity is opened, and the outer surface and/or the inner surface of the entity is displayed after the entity is opened;
the core animation CAKeyframeanimation provides support for the key frame animation, and specifies the key path and the array and time of the corresponding value of each stage.
10. The system for implementing a physical opening animation of claim 9 wherein the animation effects of the picture include picture flipping and picture sliding.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710209891.5A CN107038735B (en) | 2017-03-31 | 2017-03-31 | Method and system for realizing entity opening animation |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710209891.5A CN107038735B (en) | 2017-03-31 | 2017-03-31 | Method and system for realizing entity opening animation |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107038735A CN107038735A (en) | 2017-08-11 |
| CN107038735B true CN107038735B (en) | 2021-02-02 |
Family
ID=59534777
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710209891.5A Active CN107038735B (en) | 2017-03-31 | 2017-03-31 | Method and system for realizing entity opening animation |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107038735B (en) |
Families Citing this family (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107507283B (en) * | 2017-08-21 | 2019-06-25 | 广州视源电子科技股份有限公司 | Expansion rendering method, device, electronic equipment and the storage medium of solid figure |
| CN110300047B (en) * | 2018-03-23 | 2021-10-08 | 腾讯科技（深圳）有限公司 | Animation playing method and device and storage medium |
| CN110704138B (en) * | 2018-06-25 | 2021-04-23 | 马上消费金融股份有限公司 | Animation effect realization method and device and computer readable storage medium |
| CN109600558B (en) * | 2018-07-11 | 2021-08-13 | 北京字节跳动网络技术有限公司 | Method and apparatus for generating information |
| CN112214856B (en) * | 2020-11-04 | 2022-05-31 | 上海理工大学 | Precision machine tool rigidity optimization design method for overall structure |
| CN112882637B (en) * | 2021-02-23 | 2022-07-29 | 上海哔哩哔哩科技有限公司 | Interaction method for multi-layer animation display and browser |
| CN112882638B (en) * | 2021-02-23 | 2022-08-26 | 上海哔哩哔哩科技有限公司 | Multi-layer animation display method and device |
| CN113476852A (en) * | 2021-07-02 | 2021-10-08 | 网易（杭州）网络有限公司 | Virtual object acquisition method and device, electronic equipment and storage medium |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104537702A (en) * | 2014-12-01 | 2015-04-22 | 苏州乐米信息科技有限公司 | Animation simulation method for mobile phone software |
| CN104778735A (en) * | 2014-01-14 | 2015-07-15 | 腾讯科技（深圳）有限公司 | Animation generation method and device based on irregular figure |
-
2017
- 2017-03-31 CN CN201710209891.5A patent/CN107038735B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104778735A (en) * | 2014-01-14 | 2015-07-15 | 腾讯科技（深圳）有限公司 | Animation generation method and device based on irregular figure |
| CN104537702A (en) * | 2014-12-01 | 2015-04-22 | 苏州乐米信息科技有限公司 | Animation simulation method for mobile phone software |
Non-Patent Citations (2)
| Title |
|---|
| 一种使用GSAP的模式信封动画;佚名;《https://github.com/pstrawberriedev/gsap-envelope》;20160419;1-8 * |
| 仿星巴克App的星星滚动动画展示;佚名;《https://github.com/yesidi/StarbucksAnimation》;20170103;1-8 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107038735A (en) | 2017-08-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107038735B (en) | Method and system for realizing entity opening animation | |
| US8352864B2 (en) | Method of operating a design generator for personalization of electronic devices | |
| US9671942B2 (en) | Dynamic user interface for inheritance based avatar generation | |
| US8296658B2 (en) | Generator for personalization of electronic devices | |
| US9472161B1 (en) | Customizing virtual assets | |
| US20080316227A1 (en) | User defined characteristics for inheritance based avatar generation | |
| MX2012009334A (en) | Method and device for generating user interface. | |
| CN110688506A (en) | Template generation method and device, electronic equipment and storage medium | |
| CN105389090A (en) | Game interaction interface displaying method and apparatus, mobile terminal and computer terminal | |
| CN111897483A (en) | Live broadcast interaction processing method, device, equipment and storage medium | |
| KR20220130257A (en) | Adaptive display method and apparatus for virtual scene, electronic device, storage medium and computer program product | |
| US20110310104A1 (en) | Digital comic book frame transition method | |
| US9092912B1 (en) | Apparatus and method for parallax, panorama and focus pull computer graphics | |
| US11645805B2 (en) | Animated faces using texture manipulation | |
| Schroeder | AndEngine for Android game development cookbook | |
| JP2017068438A (en) | Computer program for generating silhouette, and computer implementing method | |
| CN106530372A (en) | Method for generating frame animation | |
| US20140215383A1 (en) | Parallax scrolling user interface | |
| US20170031583A1 (en) | Adaptive user interface | |
| CN109445789B (en) | Method, system and medium for generating composite control with independent rendering layer | |
| CN115713589A (en) | Image generation method and device for virtual building group, storage medium and electronic device | |
| CN114430466A (en) | Material display method, device, electronic equipment, storage medium and program product | |
| CN109254660B (en) | Content display method, device and equipment | |
| CN112346614B (en) | Image display method and device, electronic device, and storage medium | |
| WO2008151419A1 (en) | Sex selection in inheritance based avatar generation |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |