This afternoon I was impressed by an element on the Ceranco website that behaved like a wave of water. I started to wonder how I would be able to recreate the look of the wave animation in code. So I just dove in and started to play in Silverlight.
After about an hour I had this nice wave animation in Silverlight that I think would make a pretty sweet pre-loader:
Click here to view the animation.
Click here to download the source code.
So how does it work?
The key to this animation is the use of a custom path that I made, it is the element that is filled with the blue gradient. No, I didn’t create this Path in Blend. I created it with code. The curved line across the top is a BezierSegment which has three points that get animated up and down throughout the animation using Math.Sin and Math.Cos.
Just like all the other animations I have done, I subscribe to the CompositionTarget.Rendering event. Inside this event is where all the heavy-lifting is done. A variable name degree is incremented every time the event fires, and degree is passed to the math functions to calculate the new positions of the animated elements.
If you want to know more, take a look at the code.
Thanks for reading!