Animate ellipse size

Question

How to animate wpf ellipse size to center point?

My solution:

 private void drawEllipseAnimation()
    {

        if (pointEl.Width == 16)
                {
                    DoubleAnimation myDoubleAnimation = new DoubleAnimation();
                    myDoubleAnimation.From = 16;
                    myDoubleAnimation.To = 22;
                    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.5));
                    pointEl.BeginAnimation(Ellipse.WidthProperty, myDoubleAnimation);
                    pointEl.BeginAnimation(Ellipse.HeightProperty, myDoubleAnimation);

        if (pointEl.Width == 22)
                    {
                        DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();
                        myDoubleAnimation2.From = 22;
                        myDoubleAnimation2.To = 16;
                        myDoubleAnimation2.Duration = new Duration(TimeSpan.FromSeconds(0.5));
                        pointEl.BeginAnimation(Ellipse.WidthProperty, myDoubleAnimation2);
                        pointEl.BeginAnimation(Ellipse.HeightProperty, myDoubleAnimation2);
                     }
    }

WPF Code:

  <Ellipse Fill="#FFCA2437" Width="16" Height="16" Margin="10" Name="pointEl">
                    <Ellipse.Effect>
                        <BlurEffect Radius="3"  KernelType="Gaussian"/>
                    </Ellipse.Effect>
  </Ellipse>

But this animate in top and left point. My idea change ellipse size to ellipse center point.

eg.: drawEllipseAnimation(); put DispatcherTimer event.

Without a good [mcve], it's not practical to try to answer the question. But, you should try animating the `Margin` property as well as the `Width` so that the position of the ellipse changes appropriately. A couple of other notes: IMHO animations are better declared in XAML; and, you don't need to declare two animations to animated between two extents...just set the `Repeat` property on the animation to suit your needs. — Peter Duniho, Oct 29 '17 at 18:34
I want to pulse animation. Margin property not resolve this problem :( — Gabee, Oct 30 '17 at 11:48

score 0 · Answer 1 · answered Oct 30 '17 at 12:23

Work this code!

   <!-- Pulse -->
<Storyboard x:Key="Pulse" RepeatBehavior="Forever">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="PulseBox">
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.22"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="PulseBox">
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1.22"/>
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard> 

<Ellipse x:Name="PulseBox" Fill="#FFCA2437" Width="14" Height="14"  RenderTransformOrigin="0.5,0.5">
                    <Ellipse.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Ellipse.RenderTransform>
                    <Ellipse.Effect>
                        <BlurEffect Radius="3"  KernelType="Gaussian"/>
                    </Ellipse.Effect>
                </Ellipse>

Start:

  Storyboard board = (Storyboard)this.FindResource("Pulse");
        board.Begin();

Stop:

Storyboard board = (Storyboard)this.FindResource("Pulse");
        board.Stop();

Reference: Advanced XAML Animation effects.

Animate ellipse size

1 Answers1