Information sending system animation integration and application method

Abstract

The invention discloses a message sending system animation integration and application method, which comprises the following steps of: A, making an animation by using AE, and exporting the animation into a json file in combination with a bodymovin plug-in; b, in each piece of attribute data, the value of k is a fixed number or a combined key frame data set; c, using a request Animation Frame, then transmitting the current time of the nowTime, converting the time into the time currentFrame of the whole frame period, and assuming that the current frame is a 15.256545 frame; d, the known current frame is 15.256545, and belongs to the first key frame 0-gt; 15.256545 / 30 can be used in an animation of 30, which is a difference value 8 that the current frame / time difference * attribute needs to change. The method has the beneficial effects that the light animation possibly means that the size of an animation file is smaller, the bandwidth and time required by network transmission are reduced, the cloud storage cost is also reduced, and the light animation is particularly important for an online platform and mobile equipment because the light animation can be loaded and played more quickly.

Description

Technical Field

[0001] The present invention relates to the technical field of information transmission systems, and in particular to an animation integration and application method of information transmission systems. Background Art

[0002] A message distribution system is an information publishing system, which is usually used in business, education, government and other fields to deliver information to the public or specific groups. Expanding the content can increase the attractiveness and functionality of the system. Video: Provides high-definition video playback, supports multiple formats, and adds video editing functions such as editing and special effects; Pictures: Supports high-resolution pictures, adds picture carousels, galleries and other functions; Text: Provides rich text editing tools and supports multiple fonts, colors and layout styles.

[0003] However, existing information distribution systems lack animation capabilities, which may limit their appeal and expressiveness in conveying information, and have the following problems: Professional skill requirements: Animation production usually requires professional animators and video editors who have the corresponding artistic and technical levels; Production costs: The services of professional advertising companies are often costly, which may limit the budget of the information distribution system for animation production; Video compression: In order to facilitate network transmission, the video may need to be compressed, but this may affect the clarity and quality of the video. Summary of the invention

[0004] The purpose of the present invention is to provide a method for integrating and applying animation in a messaging system to solve the problems raised in the above-mentioned background technology.

[0005] To achieve the above object, the present invention provides the following technical solution: a method for integrating and applying animation of a message sending system, comprising the following steps:

[0006] A. Use AE to create animations, and combine it with the bodymovin plug-in to export the animations to json files;

[0007] B. In each attribute data, the value of k is a fixed number or a combined key frame data set;

[0008] C. Use requestAnimationFrame, then pass the current time nowTime, convert the time into the time of the entire frame period currentFrame, and assume that the current time is 15.256545 frames;

[0009] D. Knowing that the current frame is 15.256545, which belongs to the first key frame 0->30 animation, you can use 15.256545 / 30, which is the current frame / time difference*the difference value of the attribute that needs to change 8, so the scale attribute value of the current frame should be 20-(15.256545 / 30*8)=15.931588. In this way, no matter what the device refresh frequency is, whether it is fast or slow, you can ensure that the most accurate attribute value of the current frame is obtained in the current frame until the animation ends.

[0010] Preferably, fr: frame rate, which is preset when using AE to make animation. This is the frame rate of the animation. ip, op: start and end frames, starting at 0 frame and ending at 180 frame, so the total running time of this animation is 6 seconds. Because fps is 30 frames / second, 180 frames correspond to 6 seconds.

[0011] Preferably, the key information of the hierarchy is ks, a: anchor point; o: opacity; p: position; r: rotation; s: scale.

[0012] Preferably, the entire animation has a total of 60 frames, the playback speed is 30fps / s, 2 key frames 0->30->60, and the scale attribute changes from 20->12->20.

[0013] Compared with the prior art, the present invention has the following beneficial effects:

[0014] 1. Lighter animation: This may mean that the animation file size is smaller, which helps reduce the bandwidth and time required for network transmission, and also reduces the cost of cloud storage. Lightweight animation is especially important for online platforms and mobile devices because they can load and play faster; 2. Lower-cost animation synthesis: If the animation does not need to be synthesized into the video, this may mean that some steps in the animation production process are omitted or simplified, thereby reducing production costs. This may be achieved by using ready-made animation templates or automation tools; 3. Available to non-professional technicians: This shows that animation production has become more user-friendly. Even non-professional technicians can use pre-made special effects files to create animations, which lowers the entry barrier and enables more people to participate in animation production; 4. Improved quality of animation effects: This may mean that new technologies provide higher-quality visual effects, bringing customers a brand new experience. High-quality animation can better attract the audience's attention and increase the attractiveness of the content. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 Application of the present invention Figure 1 ;

[0016] Figure 2 Application of the present invention Figure 2 ;

[0017] Figure 3 Application of the present invention Figure 3 ;

[0018] Figure 4 This is the animation rate diagram of the present invention. DETAILED DESCRIPTION

[0019] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0020] See also Figure 1-Figure 4 , a method for integrating and applying animation of a message sending system, comprising the following steps:

[0021] A. Use AE (Adobe After Effects) to create animations, and use the bodymovin plug-in to export the animations to json files;

[0022] B. In each attribute data, the value of k is a fixed number (static) or a combined key frame data set (dynamic);

[0023] C. Use requestAnimationFrame, and then pass the current time nowTime, convert the time into the time currentFrame of the entire frame period, and assume that the current time is 15.256545 frames (for smoothness, the current time frame has a decimal point, and the attribute value is also allowed to have a decimal point);

[0024] D. Knowing that the current frame is 15.256545, which belongs to the first key frame 0->30 animation, you can use 15.256545 / 30, which is the current frame / time difference*the difference value of the attribute that needs to change 8 (scale from 20->12), so the scale attribute value of the current frame should be 20-(15.256545 / 30*8)=15.931588. In this way, no matter what the device refresh frequency is, whether it is fast or slow, you can ensure that the most accurate attribute value of the current frame is obtained in the current frame until the animation ends.

[0025] fr: frame rate, which is preset when making animation with AE. This is the frame rate (fps) of the animation. ip, op: start and end frames, starting at 0 frame and ending at 180 frame, so the total running time of this animation is 6 seconds. Because fps is 30 frames / second, 180 frames correspond to 6 seconds.

[0026] The key information of the hierarchy is ks (hierarchy data information), a: anchor point; o: opacity; p: position; r: rotation; s: scale.

[0027] The entire animation has a total of 60 frames, the playback speed is 30fps / s, 2 key frames 0->30->60, and the scale attribute changes from 20->12->20.

[0028] In most cases, the rate of animation is changing, and there are some data used as the rate, namely o and i data, where o and i can be two Bezier-rate control points, and the Bezier curve of two control points belongs to the third-order Bezier curve, which can be substituted into the third-order formula.

[0029] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for integrating and applying animation in a messaging system, characterized in that: The following steps are involved: A. Use AE to create animations, and combine it with the bodymovin plug-in to export the animations to json files; B. In each attribute data, the value of k is a fixed number or a combined key frame data set; C. Use requestAnimationFrame, then pass the current time nowTime, convert the time into the time of the entire frame period currentFrame, and assume that the current time is 15.256545 frames; D. Knowing that the current frame is 15.256545, which belongs to the first key frame 0->30 animation, you can use 15.256545 / 30, which is the current frame / time difference*the difference value of the attribute that needs to change 8, so the scale attribute value of the current frame should be 20-(15.256545 / 30*8)=15.931588. In this way, no matter what the device refresh frequency is, whether it is fast or slow, you can ensure that the most accurate attribute value of the current frame is obtained in the current frame until the animation ends.

2. The method for integrating and applying animation in a messaging system according to claim 1, characterized in that: fr: frame rate, which is preset when making animation with AE. This is the frame rate of the animation. ip, op: start and end frames, starting at 0 frame and ending at 180 frame, so the total running time of this animation is 6 seconds. Because fps is 30 frames / second, 180 frames correspond to 6 seconds.

3. The method for integrating and applying animation in a messaging system according to claim 1, characterized in that: The key information of the hierarchy is ks, a: anchor point; o: opacity transparency; p: position; r: rotation; s: scale.

4. The method for integrating and applying animation in a messaging system according to claim 1, characterized in that: The entire animation has a total of 60 frames, the playback speed is 30fps / s, 2 key frames 0->30->60, and the scale attribute changes from 20->12->20.

Images