/ Refresh

An refresh animation that opens the shutter

An refresh animation that opens the shutter

RecyclerRefreshLayout

ShootRefreshView is the refresh animation of Kwai App. In fact, It's an animation that opens the shutter. the main point of this animation is how to draw the five line of the shutter. Mainly related to the formula of the circle and line.

ShootRefreshView

Analysis

Note: the following uses the 'Kwai line' represent the six lines of the shutter.


Step 1: Rotate the 'Kwai line', but the shutter does not open.

The red arc indicates the rotation of the 'Kwai line'


Step 2: Rotate the 'Kwai Line' and open the shutter.

The core idea is how to calculate the intersection of two lines on the following picture.



The following is the formula


Step3: Take the center of the 'Kwai Line' as the base point, and zoom 'Kwai Line'

The core idea is how to calculate the intersection of a lines and a circle on the following picture.



The following is the formula


Step4: Perform a refresh animation, rotate the gradient ring

The last step is easy to implement, just set the SweepGradient to the Paint and draw a circle.

GitHub