Radio for SoundCloud
Making it easier to find your favorite tracks
Radio for SoundCloud was built to improve the experience and discoverability of SoundCloud by offering radio stations using SoundCloud tracks. We pulled 15 radio stations to give you instant access to the most popular tracks in those genres. You can view each station’s playlist to browse tracks or to select a new one.
We knew we didn’t want a simple audio player — we wanted it to be unique, beautiful, and fun to use. We had an open-ended opportunity to experiment with animation and enhance the experience, so we went big, designing motion into every transition and interaction.
Music in Motion
The player view was our biggest challenge. This view required different animations to be assigned to different layers with literally every element on the screen animating in different ways. Keeping this motion-rich UI snappy was a challenge. It required balancing the memory demands of loading images and playing the next track, while also keeping animations smooth.
The transition from player to playlist — a triangular image-mask transforming into a circular one — proved to be particularly ambitious.
To make this work, we set up a custom view transition between the triangles of the player and the circles of the playlist.
Using a mathematical formula to determine the sizes and location of the start and end points, we were able to animate between the two views.
We wanted crisp animations, so tweening directly from a triangle to a circle (and vice versa) was not going to cut it for us.
Instead, we set out to create a unique function for a parabolic curve to give you something slightly different every time.
What We Learned
We’re not new to Core Animation, but building the Radio for SoundCloud application allowed us to spend a little more time in the deep end of the pool. We needed to figure out how to elegantly create a group of animations that a user can scrub through and match up with finger tracking. To get the player triangle to animate to a circle we had to chain up to 14 simple animations across five different layers per animation.
There are more than 80 simple animations that make up the 12 group animations in the player view. Some of the key frames for tweening the triangle to the circle were difficult to duplicate directly in code by hand, so we exported the Illustrator key frames to SVG and created a simple converter from SVG to Bezier Paths.
We also had to break out our linear algebra books to figure out how we wanted to translate the animating shape from one place to another. Since we wanted to use a parabolic curve when selecting the next and previous track, we had to set up a matrix to determine the key frames for the transition from the start to end position of the shape.
We started the project when Swift was first released. The beta language was really fun to work with, but also challenging, especially before certain issues with Swift were addressed. Swift and the beta Xcode can and did change overnight, with Apple making additions — both fixes and breaks. But all of this is part of what makes developing software exciting.
What’s Next?
We’ll give you a hint: Your favorite tracks might soon be accessible from your wrist. Until then, we hope that you’ll enjoy Radio for SoundCloud as much as we do.
Find us on Facebook and Twitter or get in touch at thirteen23.com.
