using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ScreenFlip
{
public class FlipStoryboardCreator
{
public static void Create(UIElement front, UIElement back, out Storyboard sb, out ScaleTransform scale, out TimeSpan tsLastFrame)
{
double speed = 4;
double flipRotation = 0;
double flipped = 2;
sb = new Storyboard();
scale = new ScaleTransform();
tsLastFrame = new TimeSpan();
TimeSpan tsSideFlipped = new TimeSpan();

int frames = 1;
DoubleAnimationUsingKeyFrames daX = new DoubleAnimationUsingKeyFrames();
tsLastFrame = new TimeSpan();
while (flipRotation != flipped * 180)
{
flipRotation += speed;
double flipRadian = flipRotation * (Math.PI / 180);
double size = Math.Cos(flipRadian);
double scalar = (1 / (1 / size));

DiscreteDoubleKeyFrame ddkfX = new DiscreteDoubleKeyFrame();
ddkfX.Value = (size * scalar);

tsLastFrame = TimeSpan.FromMilliseconds(frames * 7);

//the first time we flip to negative capture the tsLastFrame so we know when we will need to
//visualize the flip side
flipped = (size < 0) ? +1 : +0;
if (flipped == 1 && tsSideFlipped.Ticks == 0)
{
tsSideFlipped = tsLastFrame;
}

ddkfX.KeyTime = KeyTime.FromTimeSpan(tsLastFrame);

//add the DiscreteDoubleKeyFrame to the DoubleAnimationUsingKeyFrames
daX.KeyFrames.Add(ddkfX);

flipRotation %= 360;
frames++;
}

Storyboard.SetTarget(daX, scale);
Storyboard.SetTargetProperty(daX, new PropertyPath(”(ScaleX)”));
sb.Children.Add(daX);

VisualizeSide(sb, tsSideFlipped, 0, TimeSpan.FromMilliseconds((tsSideFlipped.Milliseconds + 100)), back.Opacity, back);
VisualizeSide(sb, TimeSpan.FromMilliseconds((tsSideFlipped.Milliseconds - 100)), front.Opacity, tsSideFlipped, 0, front);
back.Opacity = 0;
}

private static void VisualizeSide(Storyboard sb, TimeSpan tsStart, double opacityStart, TimeSpan tsEnd, double opacityEnd, UIElement side)
{
DoubleAnimationUsingKeyFrames daOpacity = new DoubleAnimationUsingKeyFrames();
SplineDoubleKeyFrame sdkfStart = new SplineDoubleKeyFrame();
sdkfStart.Value = opacityStart;
sdkfStart.KeyTime = tsStart;
sdkfStart.KeySpline = DefineKeySpline(0, 0, 1, 1);
daOpacity.KeyFrames.Add(sdkfStart);

SplineDoubleKeyFrame sdkfEnd = new SplineDoubleKeyFrame();
sdkfEnd.Value = opacityEnd;
sdkfEnd.KeyTime = tsEnd;
sdkfEnd.KeySpline = DefineKeySpline(0, 0, 1, 1);
daOpacity.KeyFrames.Add(sdkfEnd);

Storyboard.SetTarget(daOpacity, side);
Storyboard.SetTargetProperty(daOpacity, new PropertyPath(”(UIElement.Opacity)”));

sb.Children.Add(daOpacity);
}

private static KeySpline DefineKeySpline(double cp1X, double cp1Y, double cp2X, double cp2Y)
{
KeySpline ksStart = new KeySpline();
ksStart.ControlPoint1 = new Point(cp1X, cp1Y);
ksStart.ControlPoint2 = new Point(cp2X, cp2Y);
return ksStart;
}
}
}

I do have a question. Would it be easy to make the Back grid larger then the front Grid? So that if you click on the front youll get more detail on the back side and still make a good 3d animation?

Thank you for sharing this - it’s very nice!

David