Transitioning from the mini-player back to “Now Playing”

Now we want to get back. When the user taps the mini-player, it should sprout into the “Now Playing” screen.

We’ll listen for an onTap on the mini-player’s background layer.

Mini_Player_Background.onTap ->

Why the background? Because this way we can continue to use the “Play” and “Pause” buttons on the mini-player without also triggering this transition.

In the event handler, we start by making the “Now Playing” screen visible:

$.Now_Playing.opacity = 1

It’s underneath the mini-player anyway, and we don’t want to animate its transparency while sliding it up.

First set of animations

Now, our animations. There’s a fast set (one-third of a second) and a slower set (half a second). First the fast set:

# - First set of animations: a third of a second - #
firstSetDuration = 0.3

We hide the mini-player …

# Fade out the mini-player
Mini_Player.animate
    opacity: 0
    options:
        time: firstSetDuration

… and in the same 0.3 seconds we lower the Tab Bar:

# Lower the Tab Bar
$.Tabs.animate
    y: Screen.height
    options:
        time: firstSetDuration

It’s a small movement anyway (compared to the whole “Now Playing” screen sliding up).

Here’s a video of what’s happening (also at one-tenth of the speed):

Second set of animations

The second set starts at the same time, but these animations run slower: 0.5 seconds. Just like the first set, they use the default Bezier.ease curve.

# - Second set of animations: half a second - #
secondSetDuration = 0.5

The most obvious animation is the “Now Playing” screen moving back up:

# Animate the ScrollComponent upwards
scroll_now_playing.animate
    y: 33
    borderRadius:
        topLeft: 10
        topRight: 10
    options:
        time: secondSetDuration

(We also restore the border radius on the top corners.)

And at the same time, we want to bring the album cover back to its bigger size. But, we should check if the music is playing, so that we can animate it to the correct state.

As you know, the player object on the audio player gives us access to its HTML5 “audio” element. One of this element’s properties is paused, which will be ‘true’ when the music isn’t playing.

if audio.player.paused
    $.Album_Cover.animate "paused",
        time: secondSetDuration
else
    $.Album_Cover.animate "playing",
        time: secondSetDuration
        curve: Bezier.ease

By giving these animations a time we override the durations that were set when creating the states.

We also don’t want the spring curve contained in ”playing”, so we override it with a Bezier.ease curve.

What remains are the things that happen in the background, underneath the “Now Playing” screen:

• The transparent gray overlay should fade in again
• The screen in the back should also become a card
• The Status Bar should be white again

The gray overlay:

# Show the transparent gray overlay
overlay.animate
    opacity: 1
    options:
        time: secondSetDuration

Dealing with the “Library” and “For You” screens:

# Shrink & move the screens in the back
scroll_library.animate
    scaleX: 0.93
    y: 20
    borderRadius: 10
    options:
        time: secondSetDuration

scroll_for_you.animate
    scaleX: 0.93
    y: 20
    borderRadius: 10
    options:
        time: secondSetDuration

(Again, only one of them will be visible at this point.)

The Status Bar:

# Make the Status Bar white
$.Status_Bar.animate
    invert: 100
    options:
        time: secondSetDuration

All set. We should now make the mini-player untappable so that it can’t be triggered inadvertently when the user swipes down …

Mini_Player.visible = no

… and we register that the mini-player is not active.

miniPlayerActive = no

Prevent album cover animations when the mini-player is active

By now you might be asking why we even need this miniPlayerActive variable.

Well, tap the “Play” button in the mini-player.

These animations should not happen when we’re in the mini-player.

Go back to the # Animating the album cover fold.

Until now the onplaying() and onpause() functions looked like this:

# When the music started playing
audio.player.onplaying = ->
    $.Album_Cover.animate "playing"
    # Show and hide the small buttons
    Mini_Button_Play.visible = no
    Mini_Button_Pause.visible = yes
    # … and also the big buttons
    $.Button_Play.visible = no
    $.Button_Pause.visible = yes

(The onpause() function will contain similar code.)

With an extra if line we’ll check for miniPlayerActive, and only when it’s not active (no) we change the state of $.Album_Cover.

# When the music started playing
audio.player.onplaying = ->
    if miniPlayerActive is no
        $.Album_Cover.animate "playing"
    # Show and hide the small buttons
    Mini_Button_Play.visible = no
    Mini_Button_Pause.visible = yes
    # … and also the big buttons
    $.Button_Play.visible = no
    $.Button_Pause.visible = yes

(Add the same line to the onpause() function.)

Done!

The finished Apple Music prototype