You can often see the animation effect of slow in and slow out, 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, trigonometric function related knowledge is used. Next, we will explain how to achieve this effect step by step from the beginning.

## 1, Basic knowledge

### (1) Trigonometric function

Commonly used trigonometric functions include sine function (sin), cosine function (cos), tangent function (tan). Sine function and cosine function are commonly used in animation effect. Because they can transform each other, this paper will explain them with sine function.

As shown in the figure below, the right triangle ABC:

Then:

sin(A)=a/c

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

### (2) Sine curve

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

Taking sine function as an example, its sine curve formula is: y = A*sin(B*x + C) + D

Where y and x are the ordinate and abscissa respectively.

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

2. The parameter "A" in the sine curve formula controls the amplitude of the curve. The larger the A value is, the larger the amplitude is, the smaller the A value is, and the smaller the amplitude is.

For example: y=2*sin(x), the curve is as 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 value of B, the shorter the period, the smaller the value of B and the longer the period.

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

4. The parameter "C" controls the left and right movement of the control curve. The value of C is positive, the curve moves left, the value of C is negative, and the curve moves right;

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

5. The parameter "d" controls the up and down movement of the control curve. D value is positive, curve moves up, D value is negative, curve moves down;

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

### (3) Angle and radian

Because when the code is used to calculate the sine value, the unit is generally radian, like "in C" Math.Sin() "function, but the intuitive effect is angle, so we need to explain the angle and radian.

1. Angle

Definition: two rays are emitted from the center of the circle to the circumference, forming an arc with the included angle and the included angle facing each other. When the arc length is exactly equal to one of 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 are emitted from the center of the circle to the circumference, forming an arc with the included angle and the included angle facing each other. 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. Difference between angle and radian

The basic difference is that the arc length of the angle is different. Degree is equal to one of the 360 minutes of the circumference of the circle, while arc is equal to the radius.

4. Conversion of angle and radian

Because: arc angle = arc length / radius

So:

a. Circumference (360 °) = circumference / radius = 2 π r/r=2 π

b. Flat angle (180 °) = π

From b, 180 degrees = π radians

So:

c. 1 degree = π / 180 radians (≈ 0.017453 radians)

d. 1 radian = 180 / π degrees (≈ 57.3 degrees)

The conversion formula can be obtained:

Radian = Degree * π / 180

Degree = radian * 180 / π

## 3, Animation implementation

The idea of realization is simply 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: the velocity is numerically equal to the ratio of the displacement of the object movement to the time of the displacement. The calculation formula of velocity is v = Δ s / Δ t

Controlling speed 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 program implementation, it is usually fixed "time", only changing "distance". Here "time" can be understood as "time interval". That is to say, when the time interval is constant, the running distance within each time interval needs to be considered.

Then the reflection on the sine curve is the value of y under equal x interval.

### (1) Simple implementation

#### (1) Implementation ideas:

1. The curve of y=sin(x) shows 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. At this time, the range of y value: (0 ~ 2)

3. To change the range of y value to (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

Simple implementation1 void pShowD() 2 { 3 //i It's degrees, not radians 4 int i = 0; 5 //To move the distance, subtract the width of the slider itself 6 double dMoveDistance = panel_Board.Width - panel_Slider.Width; 7 while (true) 8 { 9 i++; 10 if (i > 360) 11 { 12 //One cycle is 360 degrees 13 i = 0; 14 } 15 //Fixed time interval 16 Thread.Sleep(10); 17 //Pass formula: radians=degree*π/180，Degree i Convert to Math.Sin()Number of radians required 18 double dz = dMoveDistance * (1 + Math.Sin(i * Math.PI / 180)) / 2; 19 pSetLeft(Convert.ToInt32(dz)); 20 21 } 22 } 23 24 void pSetLeft(int i) 25 { 26 if (panel_Slider.InvokeRequired) 27 { 28 panel_Slider.Invoke(new Action<int>(pSetLeft), new object[] { i }); 29 } 30 else 31 { 32 panel_Slider.Left = i; 33 } 34 }