-
I need help with this Expression: linear(time, 0, thisComp.duration, 0, 100);
Hi Everyone,
I am animating the Stroke of a Rectangular Shape Layer applying this expression to the “End” property of a Trim Path:
linear(time, 0, thisComp.duration, 0, 100);
The expression makes the stroke automatically animating itself based on the duration of the composition.
It works flawlessly but I have a question:
is it possible to animate just one side of the shape layer modifying the expression?
Let me clarify…
I have a Rectangular Shape Layer with 4 vertices.
With the expression mentioned above, the stroke starts from a point (first vertex) and goes to the last point (4th vertex which “overlaps” the first one) passing through the second one and the third one.
Is there a way to make the stroke ending perfectly on the second vertex or on the third one?
I’ve tried to divide the expression by 2,3 and 4:
linear(time, 0, thisComp.duration, 0, 100)/4;
But it’s a nonsense solution for a rectangular shape because it works only on a squares and actually it’s not that smart.
Do you have any idea?
I would really appreciate your help =)
Thanks in advance
-
4 Replies
-
the distance around a rectangle is the (width + height) * 2. The proportion of the distance to the first vertex is (pseudocode):
(the distance from start to point 1)/total distance
and to the third point
(the distance from start to pt 1 + distance from pt 1 to pt 2)/total distance
if the rectangle goes clockwise from the top left the first distance is equal to the width, so to stop at the first vertex we multiply the expression you had by
width / ((width + height) * 2)
or for the whole thing
let w = <link to="" the="" shape's="" width,="" use="" pick-whip="">;
let h = <link to="" the="" shape's="" height,="" use="" pick-whip="">;
let prop = w / ((w + h) * 2); // proportion of distance
linear(time, 0, thisComp.duration, 0, 100) / prop;for the second point the proportion is going to be
(width + height) /((width + height)*2)
There’s no need to do anything complicated here, this will always equate to 1/2. so dividing your original expression by 2 should work here. The third point is going to be
(width * 2 + height) /((width + height)*2)
so the expression will be
let w = <link to="" the="" shape's="" width,="" use="" pick-whip="">;
let h = <link to="" the="" shape's="" height,="" use="" pick-whip="">;
let prop = (w * 2 + h)/ ((w + h) * 2); // proportion of distance
linear(time, 0, thisComp.duration, 0, 100) / prop;To go anti-clockwise swap w for h on the top of the fraction, e.g. for the third point:
let w = <link to="" the="" shape's="" width,="" use="" pick-whip="">;
let h = <link to="" the="" shape's="" height,="" use="" pick-whip="">;
let prop = (h * 2 + w)/ ((w + h) * 2); // h * 2 + w instead of w * 2 + h
linear(time, 0, thisComp.duration, 0, 100) / prop; -
Hi Stephen,
Thanks for your kind help !!!
I’ve tried one of the expression you provided me and I think I’m doing something wrong.
Here is a short video to show you what I did:
https://www.youtube.com/watch?v=mBq1Ce8946M
Could you please tell me what is wrong?
I need to tell you another thing:
This is part of a project where for necessity, the Shape Layer Path it’s converted to a Bezier Path which auto-resize itself due to the composition size via this expression:
cW = thisComp.width;
cH = thisComp.height;
corners = [[-cW/2,-cH/2], [-cW/2,cH/2],[cW/2,cH/2],[cW/2,-cH/2]];
startCorner = 2; // Link to Slider Control
p1 = corners.splice(0,startCorner-1);
corners = corners.concat(p1);
createPath(corners)You can also change the start point of the path using a slider control.
I’m telling you this because, as you know for sure, when you convert the Shape Layer Path to a Bezier Path, you don’t have direct access to the Width and Height properties anymore.
Is there another expression or a workaround to solve this problem always keeping in mind that I need to use also this expression on the “End” property of the Trim Path:
linear(time, 0, thisComp.duration, 0, 100);
THANKS IN ADVANCE !!!
Some contents or functionalities here are not available due to your cookie preferences!This happens because the functionality/content marked as “Google Youtube” uses cookies that you choosed to keep disabled. In order to view this content or use this functionality, please enable cookies: click here to open your cookie preferences.
-
And this to the End property of your trim paths. You have to also add a slider control named Stop Point in which you write at which point you want it to stop. In the shortPoints = [1, 4]; I wrote the point which start a height line.
function arrIncludes(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (element == arr[i]) return true
}
return false;
}
L = thisComp.width;
l = thisComp.height;
percentL = 50 * L / (L + l);
percentl = 50 * l / (L + l);
beginPoint = effect("Slider Control")("Slider").value;
stopPoint = effect("Stop Point")("Slider") % 4;
shortPoints = [1, 4];
firstLInstances = Math.ceil(stopPoint / 2);
if (arrIncludes(shortPoints, beginPoint)) {
theEnd = percentl * firstLInstances + percentL * (stopPoint - firstLInstances);
} else {
theEnd = percentL * firstLInstances + percentl * (stopPoint - firstLInstances);
}
theEnd = theEnd == 0 ? 100 : theEnd;
linear(time, 0, thisComp.duration, 0, theEnd)
-
Hey Andrei,
Thanks for your response, sorry for splitting the discussion in two parts, my fault.
Let’s try to stay on this one:
Thanks a bunch
Self – Resize a Bezier Path Shape Layer to Comp size and more
Reply to this Discussion! Login or Sign Up