动画椭圆大小

时间:2017-10-29 10:36:58

标签: c# wpf

如何将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事件。

1 个答案:

答案 0 :(得分:0)

使用此代码!

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