How to make Ellipse animation (Windows Phone 8 - c#) - animation

Question

I have an ellipse, and I want to make an animation to show this ellipse.
The animation should do something like this gif:
http://media.giphy.com/media/qiutE2wCo1YXe/giphy.gif
But instead of the ellipse disappear, it starts from zero and ends full.
Does anybody can help me with this?

Answer 1

You can make it by splitting the ellipse in half and animate two pieces of it separately. Here's my solution that implements the idea.
First of all, you have to define shapes to animate. I use Canvas as a container.
<Canvas Width="100"
Height="100">
<Canvas.Clip>
<EllipseGeometry RadiusX="50"
RadiusY="50"
Center="50, 50" />
</Canvas.Clip>
<Canvas>
<Canvas.Clip>
<RectangleGeometry Rect="0, 0, 50, 100" />
</Canvas.Clip>
<Rectangle x:Name="HalfLeft"
Width="50"
Height="100"
Fill="Red"
Canvas.Left="0"
Canvas.Top="0">
<Rectangle.RenderTransform>
<RotateTransform Angle="-180"
CenterX="50"
CenterY="50"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
<Canvas>
<Canvas.Clip>
<RectangleGeometry Rect="50, 0, 50, 100" />
</Canvas.Clip>
<Rectangle x:Name="HalfRight"
Width="50"
Height="100"
Fill="Red"
Canvas.Left="50"
Canvas.Top="0">
<Rectangle.RenderTransform>
<RotateTransform Angle="-180"
CenterX="0"
CenterY="50"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</Canvas>
You can modify Angle value to see how it works. I set -180 degrees, so they are invisible, but the angle will be animated to 0.
Then you need two animations in one storyboard. I have added it to main page resources.
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="FillAnimation">
<DoubleAnimation Storyboard.TargetName="HalfLeft"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
From="-180"
To="0"
BeginTime="00:00:01"
Duration="00:00:01"/>
<DoubleAnimation Storyboard.TargetName="HalfRight"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
From="-180"
To="0"
Duration="00:00:01"/>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
And that's it. The last thing you have to do is to run the animation from code.
FillAnimation.Begin();
Screenshot: