Animations in Xamarin Forms (XF)

(Part 7 of the Panzer General Portable Project)

Granted, there are not a lot of animations in Panzer General – which is one of the reasons I thought it would be a good candidate for Fabulous and XF.  However, there is 1 place where there is a 6 frame animation – when there is a battle and a unit takes damage.  The images look like this:

and animated like this

When I did Panzer General in Windows Phone 6/7 using WPF, it was very simple to use a a storyboard and an ObjectAnimation class like this

 1 <Storyboard x:Name="ExplodeStoryboard">
 2   <ObjectAnimationUsingKeyFrames 
 3     Storyboard.TargetName="ExplodeTranslateTransform" 
 4     Storyboard.TargetProperty="X" Duration="0:0:1" Completed="ObjectAnimationUsingKeyFrames_Completed">
 5       <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0" />
 6       <DiscreteObjectKeyFrame KeyTime="0:0:.2" Value="-60" />
 7       <DiscreteObjectKeyFrame KeyTime="0:0:.4" Value="-120" />
 8       <DiscreteObjectKeyFrame KeyTime="0:0:.6" Value="-180" />
 9       <DiscreteObjectKeyFrame KeyTime="0:0:.8" Value="-240" />
10       <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="100" />
11    </ObjectAnimationUsingKeyFrames>
12 </Storyboard>

In XF, it looks like there is only 1 timer available so I need to hook into it like this

 1 module ChickenSoftware.PanzerGeneral.ExplodeDemo
 2 
 3 open Xamarin.Forms
 4 
 5 let addContent (layout:AbsoluteLayout) =
 6     let image = new Image()
 7     image.Source <- ImageSource.FromResource("explode0")
 8     let x = 50.0 
 9     let y = 50.0
10     let height = 50.0 
11     let width = 60.0 
12     let rectangle = new Rectangle(x,y,width,height)
13     layout.Children.Add(image , rectangle)
14 
15     let mutable index = 1
16     let callback = new System.Func<bool>(fun _ -> 
17         match index with 
18         | 1 -> image.Source <- ImageSource.FromResource("explode1"); index <- 2
19         | 2 -> image.Source <- ImageSource.FromResource("explode2"); index <- 3
20         | 3 -> image.Source <- ImageSource.FromResource("explode3"); index <- 4
21         | 4 -> image.Source <- ImageSource.FromResource("explode4"); index <- 5
22         | 5 -> image.Source <- ImageSource.FromResource("explode0"); index <- 99
23         | _ -> ()
24         true)
25     Device.StartTimer(System.TimeSpan.FromSeconds(20.25),callback)
26 
27 let populateImage =
28     let layout = new AbsoluteLayout()
29     layout.HeightRequest <- 5000.0
30     layout.WidthRequest <- 5000.0
31 

The key lines is 16, where I create the callback function that gets called each time the timer triggers and then line 25 when the Device class has a method called “StartTimer”

This works

since there is no other animation in the game, I *think* this will work.  I guess I will see soon enough