Trigonometric function, slow in and slow out animation and C # implementation

Time:2021-5-5

You can often see the animation effect of slow in and slow out in daily life, such as:

1. Scroll bar with slow in and slow out effect:

2. Breathing lamp with slow in and slow out effect:

Like the above effect, it uses the knowledge related to trigonometric function. Next, we will explain how to achieve this effect step by step from the beginning.


 

 

1、 Basic knowledge

(1) Trigonometric function

The commonly used trigonometric functions are sine function (SIN), cosine function (COS) and tangent function (tan). Sine function and cosine function are commonly used in animation effect, because they can be transformed into each other, so this paper will explain sine function.

As shown in the figure below, right triangle ABC:

Then:

sin(A)=a/c

That is: the sine value of angle a = the opposite side / hypotenuse of angle A

(2) Sine curve

The trigonometric function and animation bridge is the trigonometric function curve.

Taking sine function as an example, the sine curve formula is y = a * sin (b * x + C) + D

Where y and X are ordinate and abscissa respectively.

1. In the default state, i.e. y = sin (x), the curve is shown as follows:

2. The parameter “a” in the sine curve formula controls the amplitude of the curve. The larger the value a is, the larger the amplitude is. The smaller the value a is, the smaller the amplitude is.

For example: y = 2 * sin (x), the curve is shown in the following figure (the blue line is y = sin (x)):

3. The parameter “B” controls the period of the control curve. The larger the b value is, the shorter the period is. The smaller the b value is, the longer the period is.

For example: y = sin (2x), the curve is shown in the following figure (the blue line is y = sin (x)):

4. The parameter “C” controls the curve to move left and right, C value is positive, curve moves left, C value is negative, curve moves right;

For example: y = sin (x + 1), the curve is shown in the following figure (the blue line is y = sin (x)):

5. Parameter “d” controls the control curve to move up and down. D value is a positive number, the curve moves up, D value is a negative number, the curve moves down;

For example: y = sin (x) + 1, the curve is shown in the following figure (the blue line is y = sin (x)):

(3) Angle and radian

When using the code to calculate the sine value, the unit is generally radian, like the “math. Sin ()” function in C #, but the intuitive effect is angle, so we need to explain the angle and radian.

1. Angle

Definition: two rays radiate from the center of the circle to the circumference, forming an angle and an arc opposite the angle. When the arc length is exactly equal to one of the 360 minutes of the circumference of the circle, the angle between the two rays is 1 degree.

The schematic diagram is as follows:

2, radian

Definition: radian: two rays shoot from the center of the circle to the circumference, forming an included angle and a section of arc opposite the included angle. When the arc length is exactly equal to the radius of the circle, the angle between the two rays is 1 radian.

The schematic diagram is as follows:

Where: ab = OA = R

3. The difference between angle and radian

The most basic difference is that the arc length of the angle is different. The degree is equal to one of the 360 minutes of the circumference of the circle, and the radian is equal to the radius.

4. Conversion of angle and radian

Because: arc angle = arc length / radius

So:

a. Perimeter (360) = perimeter / radius = 2 π r/r=2 π

b. Flat angle (180 degrees)= π

It can be seen from B: 180 degrees= π radian

So:

c. 1 degree = π/ 180 radians (≈ 0.017453 radians)
d. 1 radian = 180/ π Degree (≈ 57.3 degrees)

The conversion formula is obtained

Radians = degrees* π/ one hundred and eighty
Degree = radian * 180/ π


 

3、 Animation implementation

The simple way to realize it is to use the change of “Y” and “X” value of sine curve. For slow in and slow out animation, it is the change of speed.

Definition and formula of velocity: velocity is numerically equal to the ratio of the displacement of the object and the time taken for the displacement to occur. The calculation formula of velocity isv=Δs/Δt

Speed control is nothing more than the change of distance and time.

In the implementation of applications, it is often not to change two quantities at the same time, but to fix one quantity and change one quantity.

In the actual implementation of the program, it is generally fixed “time” and only changes “distance”. The “time” here can be understood as “time interval”. That is to say, when the time interval is constant, the running distance in each time interval should be considered.

So the embodiment on the sine curve is the value of Y with equal x interval.

(1) Simple implementation

(1) Realization idea:

From the curve of y = sin (x), we can see that the range of y value is (- 1 ~ + 1)

2. Move the curve up by a distance of 1, i.e. y = sin (x) + 1, where the range of y value is: (0 ~ 2)

3. In order to make the range of y value (0 ~ 1), divide the function by 2, that is, y = (sin (x) + 1) / 2

As shown in the figure (the blue line is y = sin (x)):

4, multiply the y value by the swing distance of the slow in and slow out animation

(2) C # implementation:

1. Control layout and properties

2. Core code

Trigonometric function, slow in and slow out animation and C # implementationTrigonometric function, slow in and slow out animation and C # implementation

void pShowD()
 {
     //I is a degree, not a radian
     int i = 0;
     //The width of the slider itself should be subtracted from the moving distance
     double dMoveDistance = panel_Board.Width - panel_Slider.Width;
     while (true)
     {
         i++;
         if (i > 360)
         {
             //One cycle is 360 degrees
             i = 0;
         }
         //Fixed time interval
         Thread.Sleep(10);
         //Through the formula: radian = degree* π/ 180 to convert degree I to the number of radians required by math. Sin()
         double dz = dMoveDistance * (1 + Math.Sin(i * Math.PI / 180)) / 2;
         pSetLeft(Convert.ToInt32(dz));
 
     }
 }
 
 void pSetLeft(int i)
 {
     if (panel_Slider.InvokeRequired)
     {
         panel_Slider.Invoke(new Action(pSetLeft), new object[] { i });
     }
     else
     {
         panel_Slider.Left = i;
     }
 }

Simple implementation

3. Operation effect

(2) Simple implementation optimization

Through the observation of the above implementation, we can find that although the slow in and slow out effect is achieved, but its “slider” (panel) is not the same_ The start position of the slider is not the leftmost, but from the middle.

According to the above formula, when x = 0, y = (sin (x) + 1) / 2 = 1 / 2, that is, one half of the whole swing distance.

(1) Optimization ideas

In order for the slider to start from the far left, you need to move the curve to the right by a distance of π/ 2。

The curve formula is y = (sin (x)- π/ 2)+1)/2

As shown in the figure (the blue line is y = sin (x)):

(2) C # implementation

1. The layout is the same as above.

2. Core code

Trigonometric function, slow in and slow out animation and C # implementationTrigonometric function, slow in and slow out animation and C # implementation

void pShowD2()
 {
     //I is a degree, not a radian
     int i = 0;
     //The width of the slider itself should be subtracted from the moving distance
     double dMoveDistance = panel_Board.Width - panel_Slider.Width;
     while (true)
     {
         i++;
         if (i > 360)
         {
             //One cycle is 360 degrees
             i = 0;
         }
         //Fixed time interval
         Thread.Sleep(10);
         //Through the formula: radian = degree* π/ 180 to convert degree I to the number of radians required by math. Sin()
         //Because I is a degree, it is (I-90)
         double dz = dMoveDistance * (1 + Math.Sin((i-90) * Math.PI / 180)) / 2;
         pSetLeft(Convert.ToInt32(dz));
 
     }
 }
 
 void pSetLeft(int i)
 {
     if (panel_Slider.InvokeRequired)
     {
         panel_Slider.Invoke(new Action(pSetLeft), new object[] { i });
     }
     else
     {
         panel_Slider.Left = i;
     }
 }

Simple implementation (optimization)

3. Operation effect

(3) Extended implementation

In practical applications, animation often needs to be completed in a “fixed time”.

Taking the previous implementation as an example, the time of sliding the slider from the left end to the right end is fixed to 1 second. How to realize it?

(1) Realization idea

There is no big difference between the whole idea and the previous one. It is still a fixed “time” and a “change” distance “.

Based on the previous “simple implementation (optimization)”, the following modifications and supplements need to be added:

1. Suppose that the “time interval” is: interval, then it will change (Step = 1 / interval) times in the specified 1 second.

2, then, every time the degree changes, it will no longer be “1”, and another cycle is a slider back and forth, so the degree of the second change is: per = 2 π/ 2*Step=180/Step。

(2) C # implementation

The comparison of uniform speed is added in the implementation.

1. Layout and properties

2. Core code

Trigonometric function, slow in and slow out animation and C # implementationTrigonometric function, slow in and slow out animation and C # implementation

void pShowD2()
 {
     //The position of the current slider
     double d = 0;
     //True / false: slide right / left
     bool bToRight = true;
     //Time interval in MS
     int iInterval = 10;
     //Total time from left to right, in MS
     int iAnimateTime = 1000;
     //The width of the slider itself should be subtracted from the moving distance
     double dMoveDistance = panel_Board.Width - panel_Slider.Width;
     //Number of changes needed
     double dStep = Convert.ToDouble(iAnimateTime) / iInterval;
     //Distance increased by each change
     double dPerX = dMoveDistance / dStep;
     while (true)
     {
         d = bToRight ? d + dPerX : d - dPerX;
         if (d > dMoveDistance)
         {
             bToRight = false;
         }
         if (d < 0)
         {
             bToRight = true;
         }
 
         Thread.Sleep(iInterval);
         int iZ = Convert.ToInt32(d);
         pSetLeft2(iZ);
 
     }
 }
 void pSetLeft2(int i)
 {
     if (panel_S2.InvokeRequired)
     {
         panel_S2.Invoke(new Action(pSetLeft2), new object[] { i });
     }
     else
     {
         panel_S2.Left = i;
     }
 }

1, uniform speed

Trigonometric function, slow in and slow out animation and C # implementationTrigonometric function, slow in and slow out animation and C # implementation

void pShowD()
 {
     //D is a degree, not a radian
     double d = 0;
     //Time interval in MS
     int iInterval = 10;
     //Total time from left to right, in MS
     int iAnimateTime = 1000;
     //The width of the slider itself should be subtracted from the moving distance
     double dMoveDistance = panel_Board.Width - panel_Slider.Width;
     //Number of changes needed
     double dStep = Convert.ToDouble(iAnimateTime) / iInterval;
     //The degree of increase per change
     double dPer = 180.0 / dStep;
     while (true)
     {
         d += dPer;
         if (d > 360)
         {
             //One cycle is 360 degrees
             d = 0;
         }
         //Fixed time interval
         Thread.Sleep(iInterval);
         //Through the formula: radian = degree* π/ 180 to convert degree I to the number of radians required by math. Sin()
         double dz = dMoveDistance * (1 + Math.Sin((d - 90) * Math.PI / 180)) / 2;
         pSetLeft(Convert.ToInt32(dz));
 
     }
 }
 
 void pSetLeft(int i)
 {
     if (panel_Slider.InvokeRequired)
     {
         panel_Slider.Invoke(new Action(pSetLeft), new object[] { i });
     }
     else
     {
         panel_Slider.Left = i;
     }
 }

2. Slow in and slow out

3. Operation effect

 


 

4、 Concluding remarks

This article mainly talks about trigonometric function and slow in and slow out animation, but trigonometric function plays a more important role in animation, such as directly using sine curve shape to draw wave effect, which can be used in charging, progress bar and other places.

If you know the role of curves in animation, you can achieve different animation effects through different function curves. For example, another very useful “Bezier curve” can achieve more complex and elegant animation effects.

 

If there are mistakes and deficiencies, we welcome your criticism and correction.

 

Recommended Today

Detailed explanation of how to customize redis command with Lua

preface As a very successful database, redis provides a wealth of data types and commands. Using these, we can easily and efficiently complete many cache operations, but there are always some special problems or needs to be solved. At this time, we may need to customize our own redis data structure and commands. Redis command […]