The page indicators at the bottom of the screen appear on all except the last page. They’re slid off-screen just before the sixth page appears.
Parent layer for the page indicators
We’ll put the six indicators in a container layer so that we can move them off-screen by simply moving this parent layer.
# PAGE INDICATORS # Container for the page indicators indicatorsContainer = new Layer width: page.width, height: 6 backgroundColor: null y: 551 parent: container
Creating the page indicators
We first create an array to store them in, so that we can later refer to them by their index number in this
# Array for the indicators allIndicators = 
We create our six indicators by looping through a
# Creating the page indicators for i in [0..5] indicator = new Layer size: 6 backgroundColor: "white" borderRadius: "50%" opacity: 0.5 x: 119.5 + ( i * 15 ) parent: indicatorsContainer
The first indicator is placed
119.5 points from the left side, and each successive indicator
15 points farther to the right.
All indicators have 50% opacity.
In the same loop we can give each indicator an
active state (= full opacity), speed up the layer’s animation time to
0.5“, and then add the indicator to our
# Add an ‘active’ state indicator.states.active = opacity: 1 # Speed up the animations indicator.animationOptions = time: 0.5 # Store indicator in array allIndicators.push indicator
That’s that. We can already switch the first indicator to its
# Set state of the first indicator allIndicators.stateSwitch "active"
Making the correct page indicator active
At this point, we could set the active page indicator by adding more code to our
page.onMove block (and calculate with page widths), but there’s a better option: the
"change:currentPage" event signals when the PageComponent snaps to a page.
Add this new event handler to the end of the document:
# Page change event page.on "change:currentPage", -> # Setting all indicators to default state indicator.animate "default" for indicator in allIndicators # Getting the current page index current = page.horizontalPageIndex page.currentPage # Making current page indicator active allIndicators[current].animate "active"
Here we first switch all the indicators to their
default state. (This is, by the way, an alternative way of writing a
Then we use
horizontalPageIndex() to get the index for the
currentPage, and use this value to animate the correct indicator in
allIndicators to its
Sliding the page indicators off-screen
And then there’s one more detail: all indicators together slide to the left when we scroll from page five to page six.
We accomplish this by moving their parent layer:
indicatorsContainer.x = Utils.modulate page.scrollX, [page.width * 4, page.width * 5], [0, -page.width * 2], yes