Ellipse Stroke Animation

Posted by Skea under Silverlight on 3/6/2010 | Views : 9500 | Status : [Member] | Replies : 20
Hi, i am new to the forums. I got here through this page http://www.dotnetfunda.com/tutorials/silverlight/animation.aspx
I would like to create animation like the [5th Ellipse object] at the bottom. But this time, i would like circles or rather the stroke to animate instead of the fill color.
May someone please help me create a xaml for this.

regards.




Responses

Posted by: Abhi2434 on: 3/7/2010 [Member] [Microsoft_MVP] [MVP] Silver

Up
0
Down
Let me know what type of animation you need.

You can easily use DoubleAnimation to animate the width/height of the Ellipse to animate it from 0 to its original size rather than using ColorAnimation in EventTrigger for strokes. You just need to add EventTrigger inside the Ellipse.Loaded and define your StoryBoard.

I didnt tried out the code myself, but I think you can do this easily.

www.abhisheksur.com

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Kunal2383 on: 3/7/2010 [Member] Starter

Up
0
Down
Hi Skea,

As much as I understand from your problem statement is you want to animate your circle border i.e. the Stroke color instead of the Fill color. Correct me if I am wrong. And if my understanding is correct then here is the XAML for the same. I have created two different Circle for you. One has a gradient stroke color which animates in circular direction and another has a solid color which changes to various color modes.

Have a look into the below code for clear understanding:


<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication1.MainPage"
Width="300" Height="300">
<UserControl.Resources>
<Storyboard x:Name="sb_GradientAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ellipseGradient" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="sb_SolidAnimation">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="ellipseSolid" RepeatBehavior="Forever">
<EasingColorKeyFrame KeyTime="0" Value="Red"/>
<EasingColorKeyFrame KeyTime="0:0:1" Value="#FFFFCA00"/>
<EasingColorKeyFrame KeyTime="0:0:2" Value="#FF0082FF"/>
<EasingColorKeyFrame KeyTime="0:0:3" Value="#FF18FF00"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
<Ellipse x:Name="ellipseGradient" Fill="#FFF3FB8A" HorizontalAlignment="Left" Height="100" Margin="32,28,0,0" VerticalAlignment="Top" Width="100" StrokeThickness="5" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="#FFFFCA00" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Ellipse x:Name="ellipseSolid" Fill="#FFF3FB8A" Height="100" Margin="161,0,39,35" StrokeThickness="5" VerticalAlignment="Bottom" Stroke="Red" Width="100"/>
</Grid>
</UserControl>


Please mark it as answer if this helps you. Let me know if you need anything more.


Thanks & Regards,
Kunal Chowdhury | http://www.kunal-chowdhury.com | http://twitter.com/kunal2383

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Skea on: 3/7/2010 [Member] Starter

Up
0
Down
Thanks, but i meant like in the image http://i50.tinypic.com/2guji1k.jpg

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Kunal2383 on: 3/7/2010 [Member] Starter

Up
0
Down
Hi Skea,

Can you elaborate your problem please, so that, it will be easy for answer your query.

Thanks & Regards,
Kunal Chowdhury | http://www.kunal-chowdhury.com | http://twitter.com/kunal2383

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Abhi2434 on: 3/8/2010 [Member] [Microsoft_MVP] [MVP] Silver

Up
0
Down
I think animation is easier when you know what exactly the animation does.

Try to think what are the moves you want. May be its ColorAnimation, DoubleAnimation, DoubleAnimationUsingKeyFrames etc.
And create that your own. This will make you learn the concept.

If you really get any problem creating those, ask us. We are here to help you.

:)

www.abhisheksur.com

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Skea on: 3/8/2010 [Member] Starter

Up
0
Down
I have a map that i search. When i search, it moves me to that point of interest. I would like to show an indicator at that particular point using animated circles like the ones in the picture whose link is posted above.
I think the Storyboard.TargetProperty is Opacity.
In that picture i use the screenshot program called ZScreen which has that moving grid accompaned with small circles.
ZScreen can be found on codeplex.

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Skea on: 3/8/2010 [Member] Starter

Up
0
Down
Abhi2334, i had tried to do something but miserably failed.thats why i looked for help here.

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Abhi2434 on: 3/8/2010 [Member] [Microsoft_MVP] [MVP] Silver

Up
0
Down
I think what you have to do, is to either draw the ellipse yourself (with perfection) in Expression Builder using KeyFrames or you use PathAnimation to draw the ellipse dynamically.

Take a look at this :

http://msdn.microsoft.com/en-us/library/aa970561.aspx

Also try out the sample Application :
http://msdn.microsoft.com/en-us/library/ms771534.aspx

Here the object is moved following the page. You need to draw the path just following it.

I hope this will help you.

www.abhisheksur.com

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Skea on: 3/8/2010 [Member] Starter

Up
0
Down
Abhi2334, thanks for the links, however, i am not looking for something that animates around my ellipse, instead i am looking to animate my ellipses.I have a feeling that i have to draw about 4 ellipses of different radius but using the same center point, and of the same stroke color and strokethickness. Then i change thier opacity.

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Abhi2434 on: 3/8/2010 [Member] [Microsoft_MVP] [MVP] Silver

Up
0
Down
Hey, I think you are looking for this :

http://www.pixelwit.com/blog/2008/09/animated-arc-drawing/
Its in flash actionscript, you need it in WPF right..

Well, you need to use ArcSegment which will create arc path. Now here drawing arc in WPF is what I dont like. See how I have drawn the path using ArcSegement :

 <Path Stroke="Black" StrokeThickness="1">

<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="100,100">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment Size="100,100" RotationAngle="0" IsLargeArc="True" SweepDirection="CounterClockwise" Point="101,100" >
</ArcSegment>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>


You need animation. Just create this in codebehind with appropriate values.

For the most easiest alternative, draw the path in Expression Blend, with TimeLine Recording on.

:)

www.abhisheksur.com

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Skea on: 3/8/2010 [Member] Starter

Up
0
Down
My Brother. This is not it. What i need is so simple. Have you seen the picture i posted in Post #4. It spells it all, but let me elaborate once more.

You have searched or seen some one perform a search query on a map. If the search is successful,the map moves to that point. Googlemaps shows these points using the [Big Pin], one can show a ellipse that animates the border like in Kunal2383 example. With me i want to show circles that animate like water waves. Like in the small pic i posted.
Hope that explains it all.

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Skea on: 3/8/2010 [Member] Starter

Up
0
Down
Or, check out this software http://code.google.com/p/zscreen/ . Its a good one.
Run it, it will show a tray icon. Right click the icon, go to [Quick Actions] and click on the [Crop Shot]. You will see the animation i am talking about.

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Skea on: 3/13/2010 [Member] Starter

Up
0
Down
Hi, were you able to look at this?

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Abhi2434 on: 3/13/2010 [Member] [Microsoft_MVP] [MVP] Silver

Up
0
Down
Oh.. it seems to be quite easy.. I will update it today with the code.



www.abhisheksur.com

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Skea on: 3/17/2010 [Member] Starter

Up
0
Down
Hi Abhi2434.
Were you able to work it out?

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Abhi2434 on: 3/20/2010 [Member] [Microsoft_MVP] [MVP] Silver

Up
0
Down
Sorry for such a late reply...

I think you need to do like this :
    <Canvas>

<Ellipse Canvas.Left="50" Canvas.Top="50" Stroke="Red" Width="100" Height="100" >
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="90" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="80" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="70" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1.5" Value="60" />
<DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="50" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="90" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="80" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="70" />
<DiscreteDoubleKeyFrame KeyTime="0:0:1.5" Value="60" />
<DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="50" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>


www.abhisheksur.com

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Skea on: 3/23/2010 [Member] Starter

Up
0
Down
Hi Abhi2434. Thanks for the response. I got somewhere.
I need some thing like this:http://www.telerik.com/products/silverlight/chart.aspx

Here is what i wroteup but the circles dont seem to center at thier orign.
1 <UserControl
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 x:Class="SilverlightApplication3.MainPage"
5 Width="640" Height="480">
6
7
8 <Canvas>
9
10 <Canvas.Triggers>
11 <EventTrigger RoutedEvent="Canvas.Loaded">
12 <EventTrigger.Actions>
13 <BeginStoryboard>
14 <Storyboard >
15 <DoubleAnimation RepeatBehavior="Forever"
16 Storyboard.TargetName="Pt1"
17 Storyboard.TargetProperty="ScaleX"
18 From="1"
19 To="0.3"
20 Duration="0:0:5" />
21 </Storyboard>
22 </BeginStoryboard>
23
24 <BeginStoryboard>
25 <Storyboard>
26 <DoubleAnimation RepeatBehavior="Forever"
27 Storyboard.TargetName="Pt1"
28 Storyboard.TargetProperty="ScaleY"
29 From="1"
30 To="0.3"
31 Duration="0:0:5" />
32 </Storyboard>
33 </BeginStoryboard>
34 <!--<BeginStoryboard>
35 <Storyboard >
36 <DoubleAnimation RepeatBehavior="Forever"
37 Storyboard.TargetName="rect_Copy"
38 Storyboard.TargetProperty="Width"
39 From="30"
40 To="100"
41 Duration="0:0:5" />
42 </Storyboard>
43 </BeginStoryboard>
44
45 <BeginStoryboard>
46 <Storyboard>
47 <DoubleAnimation RepeatBehavior="Forever"
48 Storyboard.TargetName="rect_Copy"
49 Storyboard.TargetProperty="Height"
50 From="30"
51 To="100"
52 Duration="0:0:5" />
53 </Storyboard>
54 </BeginStoryboard>-->
55 </EventTrigger.Actions>
56 </EventTrigger>
57 </Canvas.Triggers>
58
59
60 <Ellipse x:Name="rect" Stroke="Green" Width="100" Height="100" Canvas.Left="30"
61 Canvas.Top="29">
62 <Ellipse.RenderTransform>
63 <ScaleTransform x:Name="Pt1" ScaleX="1" ScaleY="1"/>
64 </Ellipse.RenderTransform>
65
66 </Ellipse>
67 <Ellipse x:Name="rect_Copy"
68 Stroke="Green"
69 Width="30"
70 Height="30"
71 Canvas.Left="65"
72 Canvas.Top="64"/>
73
74 </Canvas>
75 </UserControl>

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Skea on: 3/24/2010 [Member] Starter

Up
0
Down
Never Mind. I got it to work. I love it.

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Abhi2434 on: 3/25/2010 [Member] [Microsoft_MVP] [MVP] Silver

Up
0
Down
Oh.. .thats great..

I think you just calculated the margin element when size changes? isnt it ?

Or you changed Canvas.Left / Canvas.Top dynamically..

Have fun...

www.abhisheksur.com

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Skea on: 3/25/2010 [Member] Starter

Up
0
Down
Canvas.Left and Canvas.Top

Skea, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response