Answers.Body: <p>Use masks. Make a mask with 5 points, one in the centre of the circle two on either side in line with the first and two far enough away so that the mask covers half the circle. Then animate the second two points to travel together and meet in the centre.</p>
  
  <p>Actually do the above, but reverse the order.</p>
  
  <p>Here it is with a matte layer to show you the shape of the mask I'm talking about.</p>
  
  <p><a href="https://i.sstatic.net/TCkwy.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/TCkwy.gif" alt="enter image description here"></a></p>
  
  <p>and the end result</p>
  
  <p><a href="https://i.sstatic.net/jM1HL.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/jM1HL.gif" alt="enter image description here"></a></p>
  
  <p>Remember that the points on animated masks travel in <strong>straight lines</strong> between keyframes. So the beginning and end positions of the moving points have to be far enough out that they don't go inside the circle.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Here's an expression to create a circle, and a line and interpolate between the two. The intermediate frames are kinda ugly, I'd probably convert the expression to keyframes and delete all but the first and last frames, then manually animate the in-between.</p>
  
  <p><a href="https://i.sstatic.net/i9XfS.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/i9XfS.gif" alt="circle turning into a line"></a></p>
  
  <pre class="lang-js prettyprint-override"><code>var radius = 100;
  var animationDuration = 2;
  //You can't draw a perfect circle with Beziers, but this is a good approximation
  var handleLength = radius * 4 * (Math.sqrt(2)-1)/3; //Because maths. 
  var circlePoints = [];
  var outHandles = [];
  var inHandles =[];
  var Tau = 2* Math.PI;
  for (i = 0; i &lt; 5; i++){
      circlePoints[i] = [Math.sin(Tau * i/4) * radius, Math.cos(Tau * i/4) * radius];
      outHandles[i] = [Math.sin(Tau * (i+1)/4) * handleLength, Math.cos(Tau * (i+1)/4) * handleLength];
      inHandles[i] = [0,0] - outHandles[i];
  }
  
  var linePoints = [];
  var lineInHandles = [];
  var lineOutHandles = [];
  
  for (i = 0; i &lt; 5; i++){
      linePoints[i] = [radius * (1 - i / 2), 0];
  }
  var thePoints = [];
  var theinTangents = [];
  var theOutTangents =  [];
  
  var t = Math.min(time / animationDuration, 1);
  for (i = 0; i &lt; 5; i++){
      thePoints[i] = circlePoints[i] * (1-t) + linePoints[i] * t;
      theinTangents[i] = inHandles[i] * (1-t);
      theOutTangents[i] =  outHandles[i] * (1-t);
  }
  
  createPath(points = thePoints, inTangents = theinTangents, outTangents = theOutTangents, isClosed = false);
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-08-22T09:38:23.463Z
Answers.Text: I think he's asking how to change the circumference of the circle into a straight line - ie unbend the shape of a circle into a line
Answers.UserDisplayName: tomh
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-08-22T10:07:10.847Z
Answers.Text: You can freehand draw a circle using the pen tool, then freehand draw a line with four points, set a keyframe for the path of the circle, copy the path attribute from the line and paste it onto the circle path further down the timeline. But the intermediate shape will be messy. Otherwise you can just scale a circle down on the y axis until it's completely flat. Depends what you want the intermeiate shapes to look like.
Answers.UserDisplayName: stib
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-08-22T10:47:37.743Z
Answers.Text: Is there a sensible way to do it programmatically?
Answers.UserDisplayName: tomh
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-08-23T02:22:03.840Z
Answers.Text: See my edit above
Answers.UserDisplayName: stib
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-08-24T15:15:02.937Z
Answers.Text: UV'd (drive-by), great answer. Still don't get the general voting mentality here...
Answers.UserDisplayName: p2or
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-08-25T02:58:01.663Z
Answers.Text: It's a fairly low volume site, things don't get the kind of upvotes they do on SO or Superuser, even if they're as brilliant as my answers always are.
Answers.UserDisplayName: stib
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-07-23T06:42:21.827Z
Answers.LastActivityDate: 2019-08-23T02:17:59.657Z
Answers.LastEditDate: 2019-08-23T02:17:59.657Z
Answers.UserDisplayName: stib
Answers.Body: <p>See <a href="https://forums.adobe.com/thread/1601711" rel="nofollow noreferrer">How to transform a Circle into a Straight line?</a>  </p>
  
  <p>Here, Rick Gerard gives a few suggestions how you could do it.</p>
  
  <p>I guess the best way would be to make a line and bend it like a circle, zoom really far in and put the end points near each other, but don't connect them.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-21T20:38:10.093Z
Answers.LastActivityDate: 2019-08-24T12:17:06.057Z
Answers.LastEditDate: 2019-08-24T12:17:06.057Z
Answers.UserDisplayName: Timothy Lukas H.
Body: <p>I would like to create an animation to open circumference of a circle as a straight line exactly. I am currently learning After Effects and i have some idea about it but i could not do it. </p>
  
  <p>It is very important to me. Can anyone help me to do it?</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-02-21T09:16:02.683Z
Comments.Text: I'd be interested in knowing this too.. Initially I thought you could turn a circle path into a bezier, but this doesn't work as the bezier is joined up, and also the paths are "stretchy".  I'm guessing you need to do it as an expression somehow, maybe with beams?
Comments.UserDisplayName: tomh
Tags: <after-effects><animation>
Title: How can i open circumference of circle as straight line in After Effects?
UserDisplayName: Math Doubts
ThreadText: # How can i open circumference of circle as straight line in After Effects?
  
  (Asked by: username_0 on 2019-02-21)
  
  I would like to create an animation to open circumference of a circle as a straight line exactly. I am currently learning After Effects and i have some idea about it but i could not do it.
  
  It is very important to me. Can anyone help me to do it?
  
  **Tags:** after-effects, animation
  
  > **Comments:**
  > **username_1**: I'd be interested in knowing this too.. Initially I thought you could turn a circle path into a bezier, but this doesn't work as the bezier is joined up, and also the paths are "stretchy".  I'm guessing you need to do it as an expression somehow, maybe with beams?  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2019-07-23. Score: 2
  
  Use masks. Make a mask with 5 points, one in the centre of the circle two on either side in line with the first and two far enough away so that the mask covers half the circle. Then animate the second two points to travel together and meet in the centre.
  
  Actually do the above, but reverse the order.
  
  Here it is with a matte layer to show you the shape of the mask I'm talking about.
  
  [![enter image description here](https://i.sstatic.net/TCkwy.gif)](https://i.sstatic.net/TCkwy.gif)
  
  and the end result
  
  [![enter image description here](https://i.sstatic.net/jM1HL.gif)](https://i.sstatic.net/jM1HL.gif)
  
  Remember that the points on animated masks travel in **straight lines** between keyframes. So the beginning and end positions of the moving points have to be far enough out that they don't go inside the circle.
  
  **Edit**
  
  Here's an expression to create a circle, and a line and interpolate between the two. The intermediate frames are kinda ugly, I'd probably convert the expression to keyframes and delete all but the first and last frames, then manually animate the in-between.
  
  [![circle turning into a line](https://i.sstatic.net/i9XfS.gif)](https://i.sstatic.net/i9XfS.gif)
  
  ```js
  var radius = 100;
  var animationDuration = 2;
  //You can't draw a perfect circle with Beziers, but this is a good approximation
  var handleLength = radius * 4 * (Math.sqrt(2)-1)/3; //Because maths. 
  var circlePoints = [];
  var outHandles = [];
  var inHandles =[];
  var Tau = 2* Math.PI;
  for (i = 0; i < 5; i++){
      circlePoints[i] = [Math.sin(Tau * i/4) * radius, Math.cos(Tau * i/4) * radius];
      outHandles[i] = [Math.sin(Tau * (i+1)/4) * handleLength, Math.cos(Tau * (i+1)/4) * handleLength];
      inHandles[i] = [0,0] - outHandles[i];
  }
  
  var linePoints = [];
  var lineInHandles = [];
  var lineOutHandles = [];
  
  for (i = 0; i < 5; i++){
      linePoints[i] = [radius * (1 - i / 2), 0];
  }
  var thePoints = [];
  var theinTangents = [];
  var theOutTangents =  [];
  
  var t = Math.min(time / animationDuration, 1);
  for (i = 0; i < 5; i++){
      thePoints[i] = circlePoints[i] * (1-t) + linePoints[i] * t;
      theinTangents[i] = inHandles[i] * (1-t);
      theOutTangents[i] =  outHandles[i] * (1-t);
  }
  
  createPath(points = thePoints, inTangents = theinTangents, outTangents = theOutTangents, isClosed = false);
  
  ```
  
  > **Comments:**
  > **username_1**: I think he's asking how to change the circumference of the circle into a straight line - ie unbend the shape of a circle into a line  
  > **username_2**: You can freehand draw a circle using the pen tool, then freehand draw a line with four points, set a keyframe for the path of the circle, copy the path attribute from the line and paste it onto the circle path further down the timeline. But the intermediate shape will be messy. Otherwise you can just scale a circle down on the y axis until it's completely flat. Depends what you want the intermeiate shapes to look like.  
  > **username_1**: Is there a sensible way to do it programmatically?  
  > **username_2**: See my edit above  
  > **username_3**: UV'd (drive-by), great answer. Still don't get the general voting mentality here...  
  > **username_2**: It's a fairly low volume site, things don't get the kind of upvotes they do on SO or Superuser, even if they're as brilliant as my answers always are.  
  
  ---
  
  ### Answer by username_4 on 2019-02-21. Score: 0
  
  See [How to transform a Circle into a Straight line?](https://forums.adobe.com/thread/1601711)
  
  Here, Rick Gerard gives a few suggestions how you could do it.
  
  I guess the best way would be to make a line and bend it like a circle, zoom really far in and put the end points near each other, but don't connect them.
  
  
  ---
  
  