This is short guide how to create parallax effect using accelerometer on mobile platforms. Some code is related to Android, but all concept is applicable to iOS, etc.
What is parallax effect? There are some more complex definitions but i would define as simple as the following – you move your phone/device in space and some objects inside your application are shifting accordingly to compensate this movement. This allows to create some strong feeling of 3d interface as well as nice interaction effect.
As good example you can check out my live wallpaper (link on market), which is using this effect while rendering particle system of moving objects. More information about this application can be found here.
To create parallax effect we need to grab data from accelerometer sensor (as i found out gyroscope is not present at majority of phones while accelerometer gives enough of data to be happy with it), convert sensor data to relative rotation angles and shift some parts of application interface accordingly. 3 steps:
There is very nice site http://glsl.heroku.com/, where you can find the gallery of complex GLSL shaders (from very simple gradients to very complex rendering systems). You can modify their code at real-time using provided editor:
Current implementation of WebGL is using GL ES 2.0 – the same as all mordern android / iOS phones/tablets. So i decided to test if i can use these shaders at mobile applications – and tested their performance on Sumsung Galaxy Note II. Of course i tested only relatively simple shaders expecting them to run slow…
I have read new apple documents considering IOS7 application design. And here is very short list of features:
Main key features:
Full screen (Use whole screen of device).
Minimalism. No heavy shadows, bezels, gradients, etc. Borderless buttons.
A lot of white space.
Single font (but dynamic size).
Minimalistic light single-color icons.
Dynamic layout with no fixed hardcoded sizes.
Specific Apple features:
Translucent elements hint content behind them. And here they mean specific blurred gradients.
Control center could be swiped from bottom of screen.
As you see – only last block of features is related to actual new apple platform. First list can be easily applied to Android or WP. So now apple tries to reach main market tendency to minimalistic design. Not something new. I wonder for how long this fashion will last, but at the moment that style is new standard across all mobile devices.
This brief is based on “Designing for iOS 7” and “iOS 7 UI Transition Guide” official documents from apple development site.
My newly developped cross-platform engine finallygoes to markets. Current platfroms are iOS, Android and Windows desktop.
Download stylish multiplatform timer with synchronization between devices. You can control your timer from your PC, your iPhone or iPad, your android tablet and more. And even get more fun sharing timer with your friends.