Thursday, October 25, 2018

Deep-dive Into the AirPower Charging Animation

Guilherme Rambo:

ChargingViewService is the process responsible for showing the cool animation. When the device is connected to power, a daemon called sharingd detects the presence of a power source for the device, it then checks to see if the power source is a wireless charger manufactured by Apple and then triggers the presentation of the charging UI.


The most important asset for the animation is a video file, usually called (AirPods have other video files for Left-only, Right-only and Right+Left). This video file consists of two videos side-by-side: one of them is the color video of the 3D device animating into the screen and then rotating and the other one is the same content, but represented as an alpha mask.

Another asset is a SceneKit scene file that contains a plane matching the position of the device’s screen throughout the animation (it lines up with the video). When the engagement animation is presented, the video is sliced in half and is used as a texture in a SceneKit scene, with the color part being used as the diffuse texture and the alpha part being used as the transparency texture, resulting in a video with a transparent background. The wallpaper is composed on top of the video with the plane provided by the scene.


That “flying back” animation is configured through a series of plist files which are also a part of the assets downloaded from mesu. There are different permutations of the files for each iPhone screen size and also variants for right-to-left languages.

Comments RSS · Twitter

Leave a Comment