How to reproduce watchOS closing activity ring animation with sparks on iOS?

Question

How to best reproduce the closing activity ring animation from watchOS 4 on iOS? Im particularly interested in the rotating sparkling effect.

Here a still frame of the animation I'm talking about:

and here is a video of it.

Is it possible to implement something like this with Core Animation?

Answer 1

Here at the university of science in zürich in the usability lab, we use:

• sketch or illustrator or designer.gravit.io for designing the svg sketches.
• than we import it in after effects or in Haiku.ai for animating
• and export it as .json for airbnbs animations library Bodymovin or also known as Lottie. Therefor are libraries for web, android and ios available.

The advantage of this solution over @bryanjclark "exported it as a series of images" is that the animation is sharp in every resolution (svg), it is only one .json file and you have the full control over its speed and frames.

Otherwise if you really want to do it with code only, give a look at this Article, done with OpenGL ES2.0.

Or with the AnimationCore example in this SO Answer.

Answer 2

I’m nearly-certain that is a pre-rendered animation, not something generated on-device. (If it is generated on-device, it’s not something you’d have API access).

I’d bet that:

• a designer worked it up in a tool like AfterEffects,
• exported it as a series of images,
• then the developers implemented it using something like WKImageAnimatable

You can see other developers using WKImageAnimatable to build gorgeous animations in their WatchKit apps - for example, Cultured Code’s app Things (watch the video there!) has some really terrific little animation flourishes that (almost-definitely) use WKImageAnimatable under-the-hood!