Question

我使用ArcSegment在XAML中构建了一个小的微调器图标，该图标沿圆形Path移动。过了一段时间，我希望我的旋转器的尺寸增大，以创造一个完整的圆圈。

这就是我的动画在移动时的样子（不稳定是由于桌面捕捉）： enter image description here

我会解释我的思考过程。我们可以在旋转的随机点看一下图像，并谈谈我们如何将它变成一个完整的圆圈：

半径：10
画布：22x22
Arc StartPoint：18.071,3.929
Arc EndPoint：22,11

Sample Circle

我相信我只需要使用一个PointAnimationUsingPath的故事板，顺时针方向从（22,11）到（18.071,3.992）方向。

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

我已经加入了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，请在那里打开您的项目，您将看到有更多的形状选项。例如：

provider.WhenForAnyArgs(x => x.SetValuesAsync(null))
        .Do(x => receivedArgs = x.Args<IEnumerable<KeyValuePair<string,object>>>());

blend引入的命名空间是：

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

它增加了一个参考：

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

使用该形状，您可以设置起始角和结束角的动画，以使弧变大。这是一个例子：

Microsoft.Expression.Drawing

将旋转的ArcSegment旋转成一个完整的圆圈

1 个答案: