iHeartRadio Comes to Apple TV

If you haven’t experienced the new Apple TV, you are missing out. Its a fantastic upgrade from the previous version. It’s fast, powerful and the remote sets the bar for Set Top Box controls. We are proud to be the Agency that iHeart selected to make their service come to life on the new platform. We believe the experience sets the bar for Apple TV apps!

Getting Started

iHeart has a very well-defined user experience that we translated to the new platform, taking advantage of some of the many unique features of Apple TV. There are so many things to consider with iHeart for the user, including local markets, user favorites, and a massive diverse library of music and local stations.

New Platform

New platforms bring new challenges. This is especially true when you go from a touchscreen-controlled, close-up experience, to a remote controller, 10-foot experience. Text gets larger, interfaces and navigation need to be simpler, and content becomes front and center. Apple has done a great job translating UIKit to the TV so it was pretty painless getting up and running on tvOS (the new OS for Apple TV). Most of the challenges occurred when we were getting familiar with the focus engine.

Focus

Focus is a brand new concept for iOS developers. Since the user is not touching the screen directly, tvOS instead has a focal point that moves around the screen to different views and controls based on directional input on the Siri Remote. Out of the box, the new Apple TV adds some very cool treatment to items on the screen that are focused. This is most notably seen on images. As you can see in the video below, images will get a drop shadow and a nice parallax effect along with popping up a little bit. This gives the user a good idea of where they are currently are on the screen. You can also do custom animations if you need something else for an effect. We ended up needing to add our own transforms when some views were coming into and going out of focus. Our UIButton subclass is an example of when we had to handle the focus style ourselves. To get an interactive “jiggle” on our custom buttons we also used the UIInterpolatingMotionEffect API.

override func becomeFocused(focus: Bool) { 
    switch focus { 
        case true: 
            let yAxisTransform = CGAffineTransformMakeTranslation(0, 35) 
            let scaleTransform = CGAffineTransformMakeScale(1.15, 1.15) 
            titleLabel.alpha = 1.0 titleLabel.transform = CGAffineTransformConcat(yAxisTransform, scaleTransform) 
        case false: 
            titleLabel.alpha = 0.5 
            titleLabel.transform = CGAffineTransformIdentity 
    }
} 
let xMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.x", type:
UIInterpolatingMotionEffectType.TiltAlongHorizontalAxis) 
xMotionEffect.maximumRelativeValue = 5 
xMotionEffect.minimumRelativeValue = -5 
addMotionEffect(xMotionEffect) 

let yMotionEffect = UIInterpolatingMotionEffect(keyPath: "center.y", type: 
UIInterpolatingMotionEffectType.TiltAlongVerticalAxis) yMotionEffect.maximumRelativeValue = 5 
yMotionEffect.minimumRelativeValue = -5 addMotionEffect(yMotionEffect)




Another focus issue we encountered is telling the focus engine where to go next when the user is swiping around on the remote. Naturally, the engine will move focus to the next view spatially. Swipe up and you will focus to an item above your current focus position. In some cases, though, this isn’t what you want. In the video below you can see that our focus is moving from something on the right side of the TV to the left side of the TV instead of the spatial movement. This is because there are focus guides on our view telling the focus engine where to go next.





Animations

There is a ton of polish on the app, and animations are front and center. We spent a lot of time making the animations look great and the final result turned out really sharp.



Player

Listening to music is at the core of the iHeartRadio experience so the player was a key feature of this app. A highlight of creating the player was building and animating the player controls view and the prototyping and implementing the screensaver. When a user is not interacting with the app for 20 seconds the screensaver will start. To create the Bokeh (animating circle) effect we used a SpriteKit particle emitter. Xcode has an excellent built-in particle creation tool so we could fine tune it to look exactly how we wanted.