Question

我试图用一个正在扩大和消失的圆形做一个简单的动画，我遇到的问题是它从左上角扩展，我希望它从中心扩展，iv＆＃39 ; e尝试将RenderTransformOrigin设置为（0.5,0.5），但它仍然不起作用。

这是我的代码：

Ellipse impact = new Ellipse();   

impact.Width = 50;   
impact.Height = 50;
impact.StrokeThickness = 1.5f;

impact.RenderTransformOrigin = new Point(0.5, 0.5);
MainCanvas.Children.Add(impact);


Storyboard story = new Storyboard();
DoubleAnimation anim = new DoubleAnimation(0, 60, TimeSpan.FromSeconds(0.9));
DoubleAnimation anim2 = new DoubleAnimation(0, 60, TimeSpan.FromSeconds(0.9));
DoubleAnimation anim3 = new DoubleAnimation(1, 0, TimeSpan.FromSeconds(0.9));


Storyboard.SetTargetProperty(anim, new PropertyPath("(Ellipse.Height)"));
Storyboard.SetTargetProperty(anim2, new PropertyPath("(Ellipse.Width)"));
Storyboard.SetTargetProperty(anim3, new PropertyPath("(Ellipse.Opacity)"));

story.Children.Add(anim);
story.Children.Add(anim2);
story.Children.Add(anim3);

impact.BeginStoryboard(story);

Answer 1

设置RenderTransformOrigin属性而不设置RenderTransform无效。

您可能想要做的是使用EllipseGeometry而不是椭圆来设置路径动画：

var impact = new Path
{
    Data = new EllipseGeometry(new Point(25, 25), 25, 25),
    StrokeThickness = 1.5,
    Stroke = Brushes.Black
};

MainCanvas.Children.Add(impact);

Storyboard story = new Storyboard();
DoubleAnimation anim1 = new DoubleAnimation(0, 30, TimeSpan.FromSeconds(0.9));
DoubleAnimation anim2 = new DoubleAnimation(0, 30, TimeSpan.FromSeconds(0.9));
DoubleAnimation anim3 = new DoubleAnimation(1, 0, TimeSpan.FromSeconds(0.9));

Storyboard.SetTargetProperty(anim1, new PropertyPath("Data.RadiusX"));
Storyboard.SetTargetProperty(anim2, new PropertyPath("Data.RadiusY"));
Storyboard.SetTargetProperty(anim3, new PropertyPath("Opacity"));

story.Children.Add(anim1);
story.Children.Add(anim2);
story.Children.Add(anim3);

impact.BeginStoryboard(story);

您现在可以调整EllipseGoemetry的中心和半径以获得所需的效果。还不清楚为什么你的圆圈以半径25开始，只是立即从0到30动画。

中心绘制椭圆原点

1 个答案: