title: How to correctly control translation transformation position after doubleAnimation completes in c#
body: <p>I have an <strong>ellipse</strong> in the <strong>middle of a Canvas</strong> using this code:</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>I want to animate the ellipse, making it <strong>go from  left and back to center</strong> (starting middle point).</p>
  
  <p>I am setting coordinates <code>(centerX,centerY)</code> and <code>(0,centerY)</code> as starting and end points, also I am using the lines </p>
  
  <pre><code>Point oldPoint = FixedCircle.TransformToAncestor(this).Transform(new Point(centerX,centerY));
  Point newPoint = FixedCircle.TransformToAncestor(this).Transform(new Point(0,centerY));
  </code></pre>
  
  <p>to indicate that transform must be set to starting pointg, I tried deleting this but the movement gets worse and starts from botton, or coordinate <code>(0,0)</code> is seen as the middle instead of <code>(ActualWidth / 2, ActualHeight / 2)</code> which is something I dont want.</p>
  
  <pre><code>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) =&gt;
  {
      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);
  </code></pre>
  
  <p>The effect I get is ellipse <strong>correctly go from middle to left</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/RFWuw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RFWuw.png" alt="enter image description here"></a></p>
  
  <p>then the issue of my <strong>problem</strong>, <strong>it starts in the middle and go to the right</strong>, when I need the ellipse to go from <strong>left to middle, not middle to right</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/v67Kr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v67Kr.png" alt="enter image description here"></a></p>
  
  <p>What am I missing?</p>