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:

explode

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

image

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: