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.
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
# - 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
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
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
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
# 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
The finished Apple Music prototype