Animating the icons around the iPhone
All icons will move to the right when we scroll to the second page, only at different speeds.
First we save the original
x positions of the icons, so that we have a base value to which we can apply a speed multiplier. Each icon’s position goes in a separate variable:
# save the icons’ initial x positions w_x = weather.x r_x = rss_feed.x f_x = facebook.x g_x = gmail.x s_x = stocks.x sc_x = soundcloud.x i_x = instagram.x c_x = calendar.x
Next step: We listen to the PageComponent’s
We move the icons by taking their original position (saved in
i_x…) and adding it to the PageComponent’s
scrollX distance, multiplied by a relative speed factor.
E.g., the Soundcloud icon moves at the scrolling speed, the Instagram and Stocks icons at 1.5x that speed, and the others, well, see below:
# Move event page.onMove -> # from page 1 to page 2 weather.x = w_x + ( page.scrollX * 1.7 ) rss_feed.x = r_x + ( page.scrollX * 0.9 ) facebook.x = f_x + ( page.scrollX * 0.55 ) gmail.x = g_x + ( page.scrollX * 0.4 ) stocks.x = s_x + ( page.scrollX * 1.5 ) soundcloud.x = sc_x + page.scrollX instagram.x = i_x + ( page.scrollX * 1.5 ) calendar.x = c_x + ( page.scrollX * 1.3 )