Как правильно контролировать положение трансляции трансляции после завершения doubleAnimation в c #

Question

У меня есть эллипс в середине холста с использованием этого кода:

var FixedCircle = new Ellipse
{
    Width = 25,
    Height = 25,
    Stroke = color,
    Fill = color,
    StrokeThickness = 3
};
var centerX = ActualWidth / 2;
var centerY = ActualHeight / 2;
FixedCircle.Margin = new Thickness(centerX, centerY, 1, 1);
Children.Add(FixedCircle);
InvalidateVisual();

Я хочу оживить эллипс, заставив его пройти слева и обратно к центру (начальная средняя точка).

Я устанавливаю координаты (centerX,centerY) и (0,centerY) в качестве начальной и конечной точек, также я использую линии

Point oldPoint = FixedCircle.TransformToAncestor(this).Transform(new Point(centerX,centerY));
Point newPoint = FixedCircle.TransformToAncestor(this).Transform(new Point(0,centerY));

чтобы указать, что преобразование должно быть установлено в начальную точку, я попытался удалить это, но движение ухудшается и начинается с основания, или координата (0,0) отображается как середина вместо (ActualWidth / 2, ActualHeight / 2), что мне не нужно.

TranslateTransform trans = new TranslateTransform();
FixedCircle.RenderTransform = trans;
Point oldPoint = FixedCircle.TransformToAncestor(this).Transform(new Point(centerX,centerY));
Point newPoint = FixedCircle.TransformToAncestor(this).Transform(new Point(0,centerY));
var EndX = FixedCircle.Width / 2 + newPoint.X - oldPoint.X - (FixedCircle.Width);
var EndY = FixedCircle.Height / 2 + newPoint.Y - oldPoint.Y - (FixedCircle.Height);
var a1X = new DoubleAnimation(0, EndX, TimeSpan.FromSeconds(3));

a1X.Completed += (s, e) =>
{
    oldPoint = FixedCircle.TransformToAncestor(this).Transform(new Point(0, centerY));
    newPoint = FixedCircle.TransformToAncestor(this).Transform(new Point(centerX, centerY));
    EndX = FixedCircle.Width / 2 + newPoint.X - oldPoint.X - (FixedCircle.Width);
    EndY = FixedCircle.Height / 2 + newPoint.Y - oldPoint.Y - (FixedCircle.Height);
    var a2X = new DoubleAnimation(0, EndX, TimeSpan.FromSeconds(3));
    trans.BeginAnimation(TranslateTransform.XProperty, a2X);
};
trans.BeginAnimation(TranslateTransform.XProperty, a1X);

Эффект, который я получаю - эллипс

тогда проблема моей проблемы , начинается с середины и направо , когда мне нужно, чтобы эллипс переместился с слева на середину, а не на середину направо :

Чего мне не хватает?

Answer 1

Следующий код запускает повторную анимацию с середины влево и назад.Он использует Path с EllipseGeometry, потому что он центрирован (вместо выравнивания по верхнему / левому краю как Ellipse).Он также не рисует обводки, а просто добавляет толщину обводки к радиусу эллипса.

var transform = new TranslateTransform(canvas.ActualWidth / 2, canvas.ActualHeight / 2);

var radius = 14;

var circle = new Path
{
    Data = new EllipseGeometry(new Point(), radius, radius),
    Fill = Brushes.White,
    RenderTransform = transform
};

canvas.Children.Add(circle);

var animation = new DoubleAnimation
{
    To = radius,
    Duration = TimeSpan.FromSeconds(3),
    AutoReverse = true,
    RepeatBehavior = RepeatBehavior.Forever
};

transform.BeginAnimation(TranslateTransform.XProperty, animation);

Для повторяющейся анимации справа налево и обратно, которая начинается в центральной точке, используйте отрицательный BeginTime:

var transform = new TranslateTransform(
    canvas.ActualWidth - radius, canvas.ActualHeight / 2);

var animation = new DoubleAnimation
{
    To = radius,
    Duration = TimeSpan.FromSeconds(6),
    AutoReverse = true,
    RepeatBehavior = RepeatBehavior.Forever,
    BeginTime = TimeSpan.FromSeconds(-3)
};