How I Animated and Shipped 50 iOS Spinners in 48 hours

Step 1: Find Inspiration

Search & Collect

Oleg Frolov (Left). Aaron Iker (Right).
Valentin Solomon (Left). UI8 (Right).

Queue Them Up

Step 2: Animate

Process

  1. (Re)create the design and import into Flow.
  2. Animate and Iterate.
  3. Export, Test and Tweak.
  4. Save the final animation file, move on. Don’t Stop

Examples

Designing, animating and exporting the Charting spinner in 90s.

Step 3: Github

  1. Create a new Xcode project from one of the exported projects
  2. Create a few classes to make it easy to switch between animations
  3. Individually export each animation using Flow’s Custom iOS Activity Indicator option
  4. Import all the animation files (3 per animation, 50 animations = 150 files)
  5. Create a layout with all the spinners
  6. Record all the spinners on my phone
  7. Make an animated GIF in photoshop with a bezel around the animation
  8. Upload the Xcode project to Github
  9. Write the markdown page, including the GIF

Step 4: Dribbble

  1. A 1600x1200 mp4 with my animation centred
  2. A zipped version of my animation file.
  3. A description, using a template, of the shot being uploaded.
  1. I create a new project called iOS Spinners
  2. I upload/rebound each shot, using its prepared files and description.
  3. I schedule each shot so that there are 2 posted each workday for the next 25 days.

Reflection

--

--

--

A new class of UI Animation software. Import from Sketch. Animate in Flow. Export production-ready code.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Mocking API Calls in UI Tests

How to Write Unit Tests for Selector Functions in Swift

Build an iOS framework for distribution with Bazel

8 Algorithms Destined for the Standard Library in Swift

Building Your Own WotsApp — Part 6

A Real World Alignment Challenges in SwiftUI 2.0

Build a Rubik Cube Using SceneView and SwiftUI

I. Single Responsibility Principle in Swift

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Flow

Flow

A new class of UI Animation software. Import from Sketch. Animate in Flow. Export production-ready code.

More from Medium

Get your weapon of choice with Swift

How to add amazing frame-by-frame animations in SwiftUI

So you want to do mock testing in XCTest?

Swift | A Virtual Try-On | Hair Color