OnePlus stock boot animation in iOS using CoreAnimation

𝘈𝘯𝘪𝘮𝘢𝘵𝘪𝘰𝘯𝘴 𝘢𝘳𝘦 𝘢 𝘨𝘳𝘦𝘢𝘵 𝘸𝘢𝘺 𝘵𝘰 𝘥𝘦𝘭𝘪𝘨𝘩𝘵 𝘢𝘯𝘥 𝘦𝘯𝘨𝘢𝘨𝘦 𝘶𝘴𝘦𝘳𝘴. 𝘞𝘦 𝘴𝘦𝘦 𝘩𝘰𝘸 𝘣𝘦𝘢𝘶𝘵𝘪𝘧𝘶𝘭𝘭𝘺 𝘪𝘵 𝘢𝘮𝘱𝘭𝘪𝘧𝘪𝘦𝘴 𝘵𝘩𝘦 𝘰𝘷𝘦𝘳𝘢𝘭𝘭 𝘜𝘟. 𝘈𝘯𝘥 𝘢𝘯𝘪𝘮𝘢𝘵𝘪𝘰𝘯𝘴 𝘢𝘳𝘦 𝘱𝘳𝘦𝘴𝘦𝘯𝘵 𝘢𝘭𝘭 𝘰𝘷𝘦𝘳 𝘳𝘪𝘨𝘩𝘵 𝘧𝘳𝘰𝘮 𝘵𝘩𝘦 𝘣𝘰𝘰𝘵 𝘴𝘤𝘳𝘦𝘦𝘯 𝘰𝘧 𝘢 𝘱𝘩𝘰𝘯𝘦 𝘵𝘰 𝘵𝘩𝘦 𝘤𝘢𝘳𝘰𝘶𝘴𝘦𝘭 𝘦𝘧𝘧𝘦𝘤𝘵 𝘪𝘯 𝘢 𝘴𝘩𝘰𝘱𝘱𝘪𝘯𝘨 𝘢𝘱𝘱.

The challenge

I own an OnePlus 3t and was stuck in its beautiful boot animation since a long time. And I thought of giving it a try to achieve it with iOS animations.

Are you ready? Let us get started!

What we will be building…

Steps

1. Draw a square/box view.

Nothing much here

2. Work on the independent components of the box view. Try writing the body of the above functions yourself while using layers. Your output should look like below.

Hint: Go for CAShapeLayer

3. Write the animatePlus function.

innerPlusPath / outerPlusPath functions? 🧐

• CATransaction is used for grouping multiple layer-tree operations (in our case animations) into atomic updates to the render tree.
• We will be using .forwards fillMode and isRemovedOnCompletion in almost every animations to keep the animation in the target layer.
• Chaining animations with help of a completion block.

4. Hands on the innerPlusPath / outerPlusPath functions.

CGMutablePath to the rescue 🎃

Output:

🤩

5. It’s time to animate the box to a circle with a chain of opacity, transform width and path animations.

Look for redundant code ☠️

• CAAnimationGroup allows multiple animations to be grouped and run concurrently.
• CAMediaTimingFunction defines the pace of an animation as a timing curve.

Output:

😍

6. Animate the size of the two circles with help of the transfrom property of layer.

7. Now time for the trickiest part of the animation i.e rotation of circles.

Enters CAReplicatorLayer

• Used CAReplicatorLayer to create a specified number (two instanceCount in our case) of sublayer copies. Provided an instanceDelay to delay the animation of the second sublayer (circle).
• CAKeyframeAnimation is used to animate the position of the path property.

Output:

So cool!!

7. Next step is to drop the white circle in between the red circle and re form the box once again. Give it a try yourself.

8. Drink a coffee ☕️ and enjoy!

Have a look at the full codebase in the below git repo. Do give it a ⭐️ if you like it.

imwinit/OnePlusBootAnimation

I would love to hear from you

You can reach me by the following channel(s):

LinkedIn

Feel free to drop suggestions in the comment section.

Thanks for reading. Happy code documenting!