Principle - Loading Spinner Mask

① Artboard 1(Width 200 Height 200)
② Rectangle(Width 100 Height 100)→ Stroke(R 0 G 0 B 0 A 20)→ Width 10 → Fill(R 153 G 153 B 153 A 0)→ Radius 100 → Align Centers → Align Middles
④ Layer → Empty State → Command + C → Command + V
⑤ Empty State 2 → Right Side → Stroke(R 92 G 136 B 255 A 100 Hex 5C88FF)→ Command + G → Right Side Group → Clip Sublayers → X 92 Y 100 / Width 52 Height 100 → Command + C → Command + V
⑥ Right Side Group 2 → Angle 180° / X 50 Y 100 / Width 52 Height 100 → Right Side → Left Side
⑦ Right Side Group 2 → Left Side Group → Command + A → Command + G → Spinner → Artboard 1 ⚡︎ Tap → Artboard 2
⑧ Artboard 1 - Right Side Group → Width 0 Height 0 → Left Side Group → Width 0 Height 0 → Animate → Any Artboard to Artboard 2 - 「Left Side Group(Center X 0.30 / Center Y 0.60 / Width 0.30 / Height 0.60)→ Right Side Group(Center X 0 / Center Y 0.60 / Width 0.30 / Height 0)」 → Linear
⑨ Artboard 1 - Spinner → Scale 0.5 / Angle -35° / Opacity 0% → Artboard 1 - Spinner → Angle 135° → Animate → Any Artboard to Artboard 2 - Spinner → Angle 0.90 / Linear
⑩ Artboard 2 ⚡︎ Auto → Artboard 3 → Angle 35° / Scale 0.5 / Opacity 0% → ⚡︎ Auto Artboard 1


この記事が気に入ったらサポートをしてみませんか?