円(楕円)をスムーズに描けるようにして、画面に描いている様子が見えるようにしたいです。
DoubleAnimation を使用してこれを行うことは可能ですか? そうでない場合、代替方法は何ですか?
私が持っているものの例:
- 1 つの外側の楕円 (黒)
- 内側の楕円 (白) - これは私がアニメートしたいものです
コード:
<Ellipse Width="200" Height="200" Stroke="Black" StrokeThickness="20"/>
<Ellipse Width="190" Height="190" Stroke="White" StrokeThickness="10" Canvas.Left="5" Canvas.Top="5" x:Name="animatedEllipse">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
たとえば、いくつかの例を見てきました。
- http://elegantcode.com/2009/08/21/a-simple-wpf-loading-animation/
- http://www.charlespetzold.com/blog/2012/03/The-Animated-Pie-Slice-in-Windows-8.html
- 楕円描画 WPF アニメーション
最初の 2 つは、WPF アニメーションが初めての私にとっては少し混乱しています。後者には「正解」として7票がありますが、「コレクション要素StrokeDashArray [0]は依存関係プロパティではありません」というエラーが発生するため、うまくいきません(また、ダッシュは必要ありません。上記の記事に従ってダッシュ付きの楕円で、それでもこのエラーで失敗しました。
アップデート:
コードを使用して動作する方法は次のとおりです。
public static class ExtensionMethods
{
private static Action EmptyDelegate = delegate() { };
public static void Refresh(this UIElement uiElement)
{
uiElement.Dispatcher.Invoke(DispatcherPriority.Render, EmptyDelegate);
}
}
public partial class Page1 : Page
{
private void Page_Loaded_1(object sender, RoutedEventArgs e)
{
path = new Path();
group = new GeometryGroup();
path.Data = group;
path.Stroke = new SolidColorBrush(Colors.White);
path.StrokeThickness = 3;
canvas.Children.Add(path);
BackgroundWorker worker = new BackgroundWorker();
worker.DoWork += worker_DoWork;
worker.RunWorkerAsync();
}
void worker_DoWork(object sender, DoWorkEventArgs e)
{
int radius = 90;
for (double i = 0.0; i < 360.0; i += 1)
{
double angle = i * System.Math.PI / 180;
double x = (int)(100 + radius * System.Math.Cos(angle));
double y = (int)(100 + radius * System.Math.Sin(angle));
canvas.Dispatcher.Invoke(new Action(delegate
{
group.Children.Add(new EllipseGeometry(new Point(x, y), 5, 5));
}));
canvas.Refresh();
System.Threading.Thread.Sleep(1);
}
}