Image flip animation in windows 8? - silverlight

Question

I need to show the images continuously like projection flip animation like the below link having sample.
http://www.silverlightbuzz.com/2009/10/14/using-the-3d-tools-to-animate-in-blend/
How to implement the above sample second animation .There are two types of animations we can see in above link .How to implement second one in windows 8 like that?
The dlls System.Windows.Interactivity and Microsoft.Expression.Interactions are n't useful in windows 8.Then how to do this animation in windows 8?
EDIT:
<UserControl.Resources>
<Storyboard x:Name="Storyboard1" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:02" Value="90"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="00:00:02" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="00:00:02.5000000" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:03.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
<EasingDoubleKeyFrame KeyTime="00:00:03.5000000" Value="0"/>
<EasingDoubleKeyFrame KeyTime="00:00:04" Value="90"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Black">
<Rectangle x:Name="rectangle1" RadiusX="12" RadiusY="12" Height="300" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300">
<Rectangle.Projection>
<PlaneProjection RotationX="-90"/>
</Rectangle.Projection>
<Rectangle.Fill>
<ImageBrush ImageSource="/Assets/7.png"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="rectangle" RadiusX="12" RadiusY="12" Height="300" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300">
<Rectangle.Projection>
<PlaneProjection RotationX="-90"/>
</Rectangle.Projection>
<Rectangle.Fill>
<ImageBrush ImageSource="/Assets/8.png"/>
</Rectangle.Fill>
</Rectangle>
<Button x:Name="StartAnimation"
Content="Start Animation"
Grid.Row="1"
Width="163"
Height="61" Margin="0,65,0,24" Click="StartAnimation_Click" />
</Grid>

Answer 1

link that you should follow..it will tell you how make storyboard for animation ..and when you save your storyboard in blend then a stoyboard will automatically come in page.resources section and you can begin it in your code behind whereever you want to..just right''
StoryboardName.begin();
i ma giving you this link it is very difficult to give you all information step by step as it requires ui use..hope this helps you..
ok fine i have done something that might helps you..like i have binded your rectangle fill to a property that you can change at any time through code .like you can use dispatchertimer and after fixed interval you can change the image of your rectangle like this..
<Rectangle x:Name="rectangle1" RadiusX="12" RadiusY="12" Height="300" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300">
<Rectangle.Projection>
<PlaneProjection RotationX="-90"/>
</Rectangle.Projection>
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding hello1}"/>
</Rectangle.Fill>
</Rectangle>
in your page .cs do this..
public sealed partial class MainPage : Page , INotifyPropertyChanged
{
public MainPage()
{
this.InitializeComponent();
DispatcherTimerSetup();
// hello1 = "/Assets/4.jpeg";
hello1 = new ImageBrush();
hello1.ImageSource =
new BitmapImage(
new Uri(BaseUri, "Assets/1.jpg")
);
this.DataContext = this;
}
DispatcherTimer dispatcherTimer;
DateTimeOffset startTime;
DateTimeOffset lastTime;
DateTimeOffset stopTime;
int timesTicked = 1;
int timesToTick = 10;
public void DispatcherTimerSetup()
{
dispatcherTimer = new DispatcherTimer();
dispatcherTimer.Tick += dispatcherTimer_Tick;
dispatcherTimer.Interval = new TimeSpan(0, 0, 1);
//IsEnabled defaults to false
// TimerLog.Text += "dispatcherTimer.IsEnabled = " + dispatcherTimer.IsEnabled + "\n";
startTime = DateTimeOffset.Now;
lastTime = startTime;
// TimerLog.Text += "Calling dispatcherTimer.Start()\n";
dispatcherTimer.Start();
//IsEnabled should now be true after calling start
// TimerLog.Text += "dispatcherTimer.IsEnabled = " + dispatcherTimer.IsEnabled + "\n";
}
void dispatcherTimer_Tick(object sender, object e)
{
rectangle.Fill = hello1;
}
private ImageBrush hello;
public ImageBrush hello1
{
get
{
return hello;
}
set
{
hello = value;
FirePropertyChanged("hello1");
}
}
/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached. The Parameter
/// property is typically used to configure the page.</param>
private void StartAnimation_Click_1(object sender, RoutedEventArgs e)
{
Storyboard1.Begin();
// Storyboard1.GetCurrentTime =
// Storyboard1.
// double sd = Storyboard1.GetCurrentTime;
}
public event PropertyChangedEventHandler PropertyChanged;
protected void FirePropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
you can modify it according to your need..hope this will help you..