Tween buffering experience

Tween Buffer


We should be familiar with tween buffering. To put it bluntly, it is the process of gradually moving from the starting position to the target position. This process can be accelerated or slowed down, these different easing methods are the various tweets.

Tween Algorithm


Now that we know the concept, it is helpful to understand the Tween Algorithm for us to better use tween or compile our own tween.
During the easing process, the object gradually moves to the target position from the starting position over time. We assume that the moving distance is disx, and the object is used as the Y axis, time t is used as the X axis, so that you can easily obtain a curve, such:

Download

(16.96 KB) the day before yesterday

In the middle, I took three time points, Ta, TB, and TC. Their moving distance is Da, DB, and DC, the time between Ta and TB is the same as that between TB and TC, but it is obvious that
The db-da is smaller than the DC-db. That is to say, in the same time period, the closer the time is, the faster the object moves. In fact, it is the cubic easing mode in tween, you can start this article
The SwF shows its effect.
If the curve is like this, what do you think is easing?

Download

(16.35 KB) the day before yesterday

Click on the stage of SwF in the starting part and try to find this curve. Have you seen it? The square above is like a basketball player falling to the ground, rebounding a few times and then stopping at the target position. This is tween.
Bounce Buffer Effect. There are also many interesting buffer modes in tween. You can find these buffer modes in the tweenlite open-source class library.

Download

(10.25 KB) the day before yesterday

The result is yes, but how is the easing calculated? Don't worry. Let's talk about it for you.
First, I declare several variables:

• Time
• Beforemove: Start position
• Changedistance: the distance between the start position and the target position, that is, a variation in the distance
• Duration: the time required to move the object from the starting position to the target position, that is, the total duration of the easing operation.

We assume that the object is moving at a constant velocity as the target position. Based on these four variables, we can easily calculate the position POS of the object after the time. The formula is as follows:

1. Pos = changedistance * (Time/duration) + beforemove

Copy code

Can you understand the formula above? After the time, use changedistance to multiply this time to the ratio of the slow total duration to get the moving distance, in addition, the initial position is the actual location of the object.
Try to open the linear class in the tweenlite open-source class. You will see the following code:

1. Package Gs. Easing {
   
2. Public class linear {
   
3. Public static function easenone (T: Number, B: Number, C: Number, D: Number): number {
   
4. Return C * t/d + B;
   
5. }
   
6. Public static function easein (T: Number, B: Number, C: Number, D: Number): number {
   
7. Return C * t/d + B;
   
8. }
   
9. Public static function easeout (T: Number, B: Number, C: Number, D: Number): number {
   
10. Return C * t/d + B;
    
11. }
    
12. Public static function easeinout (T: Number, B: Number, C: Number, D: Number): number {
    
13. Return C * t/d + B;
    
14. }
    
15. }
    
16. }

Yes
Not very familiar? Yes, that is the formula I mentioned just now. This is the linear slow-motion mode Algorithm in tweenlite. You can try to open other slow-motion modes and check their source code,
Although easein, easeout, and easeinout algorithms are different, they all contain these four parameters: T (time), B (beforemove ),
C (changedistance) and D (duration ).
However, when tweenlite calculates easing, it does not directly pass the start position and the distance between the start position and the target position as a parameter to the easein function, because tweenlite is not just a slow sit.
Standard, including the width and height of the object, transparency, etc. In fact, tweenlite replaces these two values with 0 and 1 respectively to obtain the proportional factor between the experience time and the easing time, then
Use Factor to apply to the easing of object attributes.

1. Factor = Linear. easein (T, 0, 1, D );
   
2. Object. Para = changevalue * factor + beforevalue;

After understanding the slow-moving Computing Principle, can you use the curve equations you learned in college to write your own slow-moving model ?!