How can i open circumference of circle as straight line in After Effects?

Question

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?

Answer 1

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.

and the end result

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.

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);

Answer 2

See How to transform a Circle into a Straight line?

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.