In my Halloween program, there is a bats animation. But at the first, the animation didn’t work well in browser (with Silverlight). I used Timer object for this animation. Today, I’d like to write about tips about this.
The conclusion is:
- Timer has about 10ms error (delay).
- Shapes operations move slower in browser.
- Especially, Shapes.ShowShapes() and Shapes.HideShapes() are slow.
- Adjust Interval or procedure to be the procedure time is shorter than the Interval.
- At least, avoid to be called a timer event handler while the previous event is handled.
The first one – the error of Timer can be easily confirmed with Clock.ElapsedMillisecond property. Sample program has been published as ZHB659.
I confirmed the other four tips with bats animation sample program QHH936-9. For moving 9 bats, program [Run] from IDE needs about 10ms but in browser it tooks about 100ms.
I also found that Shapes.ShowShapes() and Shapes.HideShapes() are slow. So, I used Shapes.SetOpacity() instead of these operations.
Frames per second (FPS) for animation is mostly 24 fps as the same as cinema movies. To animate this bat as 24 fps, 1 frame must be shorter than 42 ms. That is too faster for browser, so I decided to give 10 fps (100 ms / frame) for this program.
At the first time, the bats became stopped in browser. This was because multiple calling for the timer event handler. Most easy way to avoid this problem is to insert Timer.Pause() and Timer.Resume() in the event handler as follows.