动画图像上的缩小圆圈

Question

我有一个 WPF 应用程序，窗口中有一个图像。 当某个事件被触发时，我想通过动画一个圆圈来吸引用户的注意力到图像上的一个点上，这个圆圈在感兴趣的点上缩小到没有。 实际上，我希望这个动画重复 3 次，以确保用户看到缩小的圆圈并且他的眼睛被吸引到兴趣点。

您如何建议我在 WPF 中执行此操作？

Answer 1

以下代码将使您的动画正常工作。 您需要做一些工作才能找到要放置圆的位置（点）。

  <Canvas Height="40" Width="40" >

                <Path Fill="Red" Stroke="Black" StrokeThickness="1">
                    <Path.Data>
                        <EllipseGeometry x:Name="circleGeometry" Center="100,100" RadiusX="40" RadiusY="40" />
                    </Path.Data>
                    <Path.Triggers>
                        <EventTrigger RoutedEvent="Path.Loaded">
                            <BeginStoryboard>
                                <Storyboard>                                   
                                    <DoubleAnimation 
                                            Storyboard.TargetName="circleGeometry" 
                                            Storyboard.TargetProperty="RadiusX" AutoReverse="True"
                                            Duration="0:0:3" To="5" RepeatBehavior="0:0:18"/>
                                    <DoubleAnimation 
                                            Storyboard.TargetName="circleGeometry" 
                                            Storyboard.TargetProperty="RadiusY" AutoReverse="True" 
                                            Duration="0:0:3" To="5" RepeatBehavior="0:0:18"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Path.Triggers>
                </Path>
            </Canvas>

Answer 2

要为 Center 属性设置动画，请使用PointAnimation而不是DoubleAnimation 。 然而， DoubleAnimation仍应用于RadiusX和RadiusY 。