动画椭圆大小答案

【问题标题】：Animate ellipse size动画椭圆大小
【发布时间】：2017-10-29 10:36:57
【问题描述】：

如何将 wpf 椭圆大小设置为动画到中心点？

我的解决方案：

 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 代码：

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

但是这个动画在顶部和左侧。我的想法将椭圆大小更改为椭圆中心点。

例如：drawEllipseAnimation();放置 DispatcherTimer 事件。

【问题讨论】：

没有好的minimal reproducible example，试图回答这个问题是不切实际的。但是，您应该尝试为Margin 属性和Width 设置动画，以便椭圆的位置适当地改变。其他几点注意事项：恕我直言，动画最好在 XAML 中声明；而且，您不需要声明两个动画以在两个范围之间进行动画...只需在动画上设置 Repeat 属性以满足您的需要。
我想制作动画。保证金属性不能解决这个问题:(

标签： c# wpf

【解决方案1】：

使用此代码！

   <!-- 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>

开始：

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

停止：

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

参考： Advanced XAML Animation effects.

【讨论】：