1
我在XAML中使用沿着圓形Path移動的ArcSegment構建了一個微調器圖標。過了一段時間，我希望我的微調體積增大以創造一個完整的圓圈。將旋轉ArcSegment旋轉成整圈
這是我的動畫看起來像，而它的運動（抖動現象是由於桌面捕獲）：
我會解釋我的思維過程。我們可以在旋轉隨機點看一看圖像，談談我們會如何成長爲一個完整的圓：
- 半徑：10
- 帆布：22×22
- 弧StartPoint可以： 18.071，3.929
- 弧終點：22,11
我相信，我只需要使用一個故事板w^ith 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>
請注意，一旦弧段覆蓋超過180°，這將變得困難。然後您將不得不切換IsLargeArc屬性。 – Clemens
是的，但我想可以使用'BooleanAnimationUsingKeyFrames'在故事板的中途切換'IsLargeArc'。 – JoshVarty