After playing with iOS7 for a little, I was curious about the new 3D effect they have going on the home screen. For those familiar with Windows Phone you’ll already be familiar with the parallax effect that is used within the Panorama control to give the idea of motion. So, I’m thinking it can’t be that hard to produce the same sort of effect using the gyroscope capability coupled with a simple render transform or two.
A few minutes later I’ve got the following code which produces a similar effect to what you’d see on iOS7:
Motion sensor = new Motion();
public MainPage()
{
InitializeComponent();
sensor.CurrentValueChanged += sensor_CurrentValueChanged;
sensor.Start();
}
private ManualResetEvent waiter=new ManualResetEvent(false);
void sensor_CurrentValueChanged(object sender,
SensorReadingEventArgs<MotionReading> e)
{
try
{
var pitch = e.SensorReading.Attitude.Pitch;
var roll = e.SensorReading.Attitude.Roll;
Dispatcher.BeginInvoke(() =>
{
var transform = B_Background.RenderTransform as CompositeTransform;
var contentTransform = GD_Content.RenderTransform as CompositeTransform;
var newTrans = 24*roll*2/Math.PI;
var contentShift = 18 * roll * 2 / Math.PI;
transform.TranslateX =
-Math.Max(Math.Min(newTrans, 50),-50);
contentTransform.TranslateX =
Math.Max(Math.Min(contentShift, 12), -12);
newTrans = 48*pitch*2/Math.PI;
contentShift = 36 * pitch * 2 / Math.PI;
transform.TranslateY =
-Math.Max(Math.Min(newTrans, 50), -50);
contentTransform.TranslateY =
Math.Max(Math.Min(contentShift, 12), -12);
waiter.Set();
});
waiter.WaitOne();
}
catch (Exception ex)
{
Debug.WriteLine(ex.Message);
}
}
It’s not that easy to demonstrate this via a blog but in the following images you can see the slight displacement of the background and the foreground icons as the screen is rotated through different pitch and yaw values.
Full source: