wpf - 将旋转的 ArcSegment 增长为完整的圆

Question

我使用沿圆形Path 移动的ArcSegment 在XAML 中构建了一个小微调器图标。一段时间后，我希望我的旋转器变大以形成一个完整的圆圈。

这就是我的动画在移动时的样子(不稳定是由于桌面捕获造成的):

我将解释我的思考过程。我们可以在旋转时的随机点看一下图像，并讨论如何将其变成一个完整的圆圈:

• 半径:10
• Canvas :22x22
• 弧起点:18.071、3.929
• 弧端点:22,11

我相信我只需要使用一个 Storyboard，其PointAnimationUsingPath从(22,11)到(18.071, 3.929)顺时针方向。

我的问题是:如何创建一个基于 ArcSegment 的当前值创建的 PointAnimationUsingPath？

我已经包含了 XAML。如果有任何需要澄清的地方，请告诉我。

<UserControl x:Class="TestingIcons.icons.Processing"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:TestingIcons.icons"
             xmlns:sysWin="clr-namespace:System.Windows;assembly=WindowsBase"
             mc:Ignorable="d" 
             Background="White"
             d:DesignHeight="22" d:DesignWidth="22">

    <UserControl.Resources>
        <sysWin:Point x:Key="topCenterPoint">11 1</sysWin:Point>
        <sysWin:Point x:Key="topRightPoint">18.071 3.929</sysWin:Point>
        <sysWin:Point x:Key="bottomCenterPoint">11 21</sysWin:Point>
        <sysWin:Point x:Key="bottomLeftPoint">3.929 18.071</sysWin:Point>
        <sysWin:Size x:Key="circleSize">10 10</sysWin:Size>

        <Storyboard x:Key="SpinningAnimation">
            <DoubleAnimation 
                Storyboard.TargetName="outerPath"
                Storyboard.TargetProperty="Opacity"
                From="1" To="0" Duration="0:0:0.5"/>

            <!--Reset the arc to a single point-->
            <PointAnimationUsingKeyFrames
                Storyboard.TargetName="startArc"
                Storyboard.TargetProperty="StartPoint"
                >
                <!--Always grow the arc from its starting position-->
                <DiscretePointKeyFrame KeyTime="0:0:0" Value="{StaticResource topCenterPoint}"/>
            </PointAnimationUsingKeyFrames>
            <!-- Grow the arc from a point -->
            <PointAnimationUsingPath
                Storyboard.TargetName="endArc"
                Storyboard.TargetProperty="Point"
                Duration="0:0:0.2"
                AccelerationRatio="0.5">
                <PointAnimationUsingPath.PathGeometry>
                    <PathGeometry>
                        <PathFigure StartPoint="{StaticResource topCenterPoint}" IsClosed="False">
                            <ArcSegment
                                Point="{StaticResource topRightPoint}"
                                Size="{StaticResource circleSize}" 
                                IsLargeArc="False"
                                SweepDirection="Clockwise" />
                        </PathFigure>
                    </PathGeometry>
                </PointAnimationUsingPath.PathGeometry>
            </PointAnimationUsingPath>

            <!--Animate the start of the arc in a circle-->
            <PointAnimationUsingPath 
                Storyboard.TargetName="startArc"
                Storyboard.TargetProperty="StartPoint"
                Duration="0:0:0.8"
                BeginTime="0:0:0.2"
                AccelerationRatio="0.4"
                >
                <PointAnimationUsingPath.PathGeometry>
                    <PathGeometry>
                        <PathFigure StartPoint="{StaticResource topCenterPoint}">
                            <ArcSegment Size="{StaticResource circleSize}" Point="{StaticResource bottomCenterPoint}"
                                            SweepDirection="Clockwise" />
                            <ArcSegment Size="{StaticResource circleSize}" Point="{StaticResource topCenterPoint}"
                                            SweepDirection="Clockwise" />
                        </PathFigure>
                    </PathGeometry>
                </PointAnimationUsingPath.PathGeometry>
            </PointAnimationUsingPath>

            <!-- Animate the end of the arc in a circle-->
            <PointAnimationUsingPath 
                    Storyboard.TargetName="endArc"
                    Storyboard.TargetProperty="Point"
                    Duration="0:0:0.8"
                    BeginTime="0:0:0.2"
                    AccelerationRatio="0.4"
                    >
                <PointAnimationUsingPath.PathGeometry>
                    <PathGeometry>
                        <PathFigure StartPoint="{StaticResource topRightPoint}">
                            <ArcSegment Size="{StaticResource circleSize}" Point="{StaticResource bottomLeftPoint}"
                                                SweepDirection="Clockwise" />
                            <ArcSegment Size="{StaticResource circleSize}" Point="{StaticResource topRightPoint}"
                                                SweepDirection="Clockwise" />
                        </PathFigure>
                    </PathGeometry>
                </PointAnimationUsingPath.PathGeometry>
            </PointAnimationUsingPath>
        </Storyboard>
    </UserControl.Resources>

    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Window.MouseEnter">
            <BeginStoryboard Storyboard="{StaticResource SpinningAnimation}"/>
        </EventTrigger>
    </UserControl.Triggers>

    <Canvas>
        <Path x:Name="outerPath" Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="{StaticResource topCenterPoint}">
                        <ArcSegment Size="{StaticResource circleSize}" Point="{StaticResource bottomCenterPoint}" SweepDirection="Clockwise"/>
                        <ArcSegment Size="{StaticResource circleSize}" Point="{StaticResource topCenterPoint}" SweepDirection="Clockwise"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>

        <Path x:Name="eighthOfCircle" Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <PathGeometry>
                    <PathFigure x:Name="startArc" StartPoint="{StaticResource topCenterPoint}" IsClosed="False">
                        <ArcSegment x:Name="endArc"
                                Point="{StaticResource topRightPoint}"
                                Size="{StaticResource circleSize}" 
                                IsLargeArc="False"
                                SweepDirection="Clockwise" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</UserControl>

Answer 1

如果您安装了 Blend for Visual Studio，请在其中打开您的项目，您将看到有更多形状选项。例如:

    <ed:Arc ArcThickness="20"
        ArcThicknessUnit="Pixel"
        EndAngle="270"
        Fill="#FFF4F4F5"
        HorizontalAlignment="Left"
        Height="100"
        Stretch="None"
        Stroke="Black"
        StartAngle="0"
        VerticalAlignment="Top"
        Width="100"/>

blend引入的命名空间是:

xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"

它添加了对以下内容的引用:

Microsoft.Expression.Drawing

使用该形状，您可以设置起始角度和结束角度的动画，以使弧线增长。 这是一个例子:

<ContentControl>
    <ContentControl.Template>
        <ControlTemplate
            TargetType = "{x:Type ContentControl}">
            <ControlTemplate.Resources>
                <Storyboard
                    x:Key = "TheAnimation">
                    <DoubleAnimation
                        Storyboard.TargetName = "TheArc"
                        Storyboard.TargetProperty = "EndAngle"
                        From = "0"
                        To = "360"
                        RepeatBehavior = "Forever"
                        Duration = "0:0:1"/>
                    <DoubleAnimation
                        Storyboard.TargetName = "TheRotationTransform"
                        Storyboard.TargetProperty = "Angle"
                        From = "0"
                        To = "360"
                        RepeatBehavior = "Forever"
                        Duration = "0:0:1"/>
                </Storyboard>
            </ControlTemplate.Resources>
            <ControlTemplate.Triggers>
                <Trigger
                    Property = "Visibility"
                    Value = "Visible">
                    <Trigger.ExitActions>
                        <StopStoryboard
                            BeginStoryboardName = "TheAnimation_BeginStoryboard"/>
                    </Trigger.ExitActions>
                    <Trigger.EnterActions>
                        <BeginStoryboard
                            x:Name = "TheAnimation_BeginStoryboard"
                            Storyboard = "{StaticResource TheAnimation}"/>
                    </Trigger.EnterActions>
                </Trigger>
            </ControlTemplate.Triggers>
            <Border
                Height = "100"
                Width = "100"
                RenderTransformOrigin = "0.5,0.5">
                <ed:Arc
                    x:Name = "TheArc"
                    ArcThickness = "10"
                    ArcThicknessUnit = "Pixel"
                    Fill = "Blue"
                    EndAngle = "90"
                    Height = "100"
                    HorizontalAlignment = "Right"
                    StartAngle = "0"
                    Stretch = "None"
                    VerticalAlignment = "Top"
                    Width = "100"/>
                <Border.RenderTransform>
                    <TransformGroup>
                        <RotateTransform
                            x:Name = "TheRotationTransform"
                            Angle = "0"/>
                    </TransformGroup>
                </Border.RenderTransform>
            </Border>
        </ControlTemplate>
    </ContentControl.Template>
</ContentControl>