|
1 | | -<!-- Links --> |
| 1 | +# 🛠 aeFunctions |
2 | 2 |
|
3 | | -[back to top ↑]: #aefunctions |
4 | | - |
5 | | -<div align="center"> |
6 | | - |
7 | | -# aefunctions |
8 | | - |
9 | | -Speed up your After Effects expression writing with a library of useful functions. |
10 | | - |
11 | | -**[Usage](#usage) | [Example](#example) | [Contact](#contact) | [Function List](#function-list)** |
| 3 | +**A library of our most used expressions** |
12 | 4 |
|
13 | 5 | --- |
14 | 6 |
|
15 | | -### [✨ Download aeFunctions ✨](https://github.com/motiondeveloper/aefunctions/releases)<!-- omit in toc --> |
| 7 | +✨ View more details on our website: **[motiondeveloper.com/tools/aefunctions](www.motiondeveloper.com/tools/aefunctions)** |
16 | 8 |
|
17 | 9 | --- |
18 | 10 |
|
19 | | -</div> |
| 11 | +- Functions for commonly used expressions |
| 12 | +- Share code across projects and properties |
20 | 13 |
|
21 | | -## Overview |
| 14 | +--- |
22 | 15 |
|
23 | | -**aeFunctions** is a library of useful functions use in for Adobe After Effects expressions, in the form of an importable JSON file. This saves copy-pasting large amounts of code, allowing each function to be used multiple times in a project while only having the one source. |
| 16 | +🏗 This project was created with [create-expression-lib](https://github.com/motiondeveloper/create-expression-lib) - our utility for creating and managing After Effects `.jsx` libraries. |
24 | 17 |
|
25 | | -> **eKeys is written in TypeScript using our [Expression Library Template](https://github.com/motiondeveloper/expressions-library-template)** |
| 18 | +--- |
26 | 19 |
|
27 | | -## Compatibility |
| 20 | +## Setup |
28 | 21 |
|
29 | | -This version of `aefunctions` is compatible with After Effects versions >= 16.0.1 (CC2019) which uses the new [Javascript engine](https://helpx.adobe.com/after-effects/using/expression-language-reference.html). |
| 22 | +1. Download the latest version from the [releases](https://github.com/motiondeveloper/releases) page. |
| 23 | +2. Import it into After Effects |
30 | 24 |
|
31 | | -For a legacy version that works in the ExtendScript engine, view the [Extendscript Branch](https://github.com/motiondeveloper/aefunctions/tree/extendscript). Please note, this version of `aefunctions` is not actively maintained. |
| 25 | +## Expression |
32 | 26 |
|
33 | | -[Back To Top ↑] |
| 27 | +Usage: |
34 | 28 |
|
35 | | -## Usage |
| 29 | +```js |
| 30 | +const { functionName } = footage('aeFunctions.jsx').sourceData.getFunctions(); |
| 31 | +functionName(params); |
| 32 | +``` |
36 | 33 |
|
37 | | -1. **Download the latest [aefunctions.jsx](https://github.com/motiondeveloper/aefunctions/releases) from the releases page file and import it into your After Effects project.** |
| 34 | +## Development |
38 | 35 |
|
39 | | -2. **Create a reference to the library in an expression:** |
| 36 | +1. **Clone project locally** |
40 | 37 |
|
41 | | - ```javascript |
42 | | - const funcLib = footage('aefunctions.jsx').sourceData.getFunctions(); |
| 38 | + ```sh |
| 39 | + git clone https://github.com/motiondeveloper/aeFunctions.git |
| 40 | + cd aeFunctions |
43 | 41 | ``` |
44 | 42 |
|
45 | | - (You can name the library variable whatever you'd like). |
| 43 | +2. **Start Rollup** |
46 | 44 |
|
47 | | -3. **Access the functions in your expression:** |
| 45 | + Start Rollup in watch mode to automatically refresh your code as you make changes, by running: |
48 | 46 |
|
49 | | - ```javascript |
50 | | - funcLib.functionName(inputParameters); |
| 47 | + ```sh |
| 48 | + npm run watch |
51 | 49 | ``` |
52 | 50 |
|
53 | | - `functionName` and `inputParameters` must be replaced with the correct name and arguments of the function you wish to use, as listed below. |
54 | | - |
55 | | -[Back To Top ↑] |
56 | | - |
57 | | -## Example |
58 | | - |
59 | | -An example expression that uses the library is: |
60 | | - |
61 | | -```javascript |
62 | | -const ae = footage('aefunctions.jsx').sourceData.getFunctions(); |
63 | | -ae.attachKeys(2, 2); |
64 | | -``` |
65 | | - |
66 | | -You can also [destructure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) any required functions: |
67 | | - |
68 | | -```javascript |
69 | | -const { attachKeys, countLines } = footage( |
70 | | - 'aefunctions.jsx' |
71 | | -).sourceData.getFunctions(); |
72 | | -``` |
73 | | - |
74 | | -[Back To Top ↑] |
75 | | - |
76 | | -## License |
77 | | - |
78 | | -This project is licensed under the terms of the MIT license. |
79 | | - |
80 | | -[Back To Top ↑] |
81 | | - |
82 | | -## Contact |
83 | | - |
84 | | -Bugs, issues and feature requests can be submitted by filing an [issue](https://github.com/motiondeveloper/ekeys/issues) on Github. For everything else, feel free to reach out to [@modeveloper](https://twitter.com/modeveloper) on twitter. |
85 | | - |
86 | | -[Back To Top ↑] |
87 | | - |
88 | | ---- |
89 | | - |
90 | | -## Function List |
91 | | - |
92 | | -You can read a brief description of each function below, as well its input parameters. The full code for each function can be found in the `aefunctions.jsx` file. |
93 | | - |
94 | | -**<details><summary>✍️ Strings</summary>** |
95 | | - |
96 | | -- **breakWithoutOrphans** |
97 | | - |
98 | | - ```javascript |
99 | | - breakWithoutOrphans(string, maxCharacters, minWords); |
100 | | - ``` |
101 | | - |
102 | | - Inserts line breaks in a given `string` as per the `maxCharacters` per line, while avoiding the last line having less than the `minWords`. |
103 | | - |
104 | | -- **textCount** |
105 | | - |
106 | | - ```javascript |
107 | | - textCount(sourceText, type); |
108 | | - ``` |
109 | | - |
110 | | - Returns the number of words, lines or characters in a string. Takes a string and the type of count, either `"word"`,`"line"` or `"char"`. If no count type is specified, a default of `"word"` is used. |
111 | | - |
112 | | -- **cleanLines** |
113 | | - |
114 | | - ```javascript |
115 | | - cleanLines(string, maxLines, maxCharacters); |
116 | | - ``` |
117 | | - |
118 | | - Limits the maximum number of lines, as well as performing the following actions on each line: |
119 | | - |
120 | | - - Limiting the number of characters |
121 | | - - Removing leading and trailing whitespace |
122 | | - |
123 | | -</details> |
124 | | - |
125 | | -**<details><summary>📊 Numbers</summary>** |
126 | | - |
127 | | -- **padNumber** |
128 | | - |
129 | | - ```javascript |
130 | | - padNumber(number, length); |
131 | | - ``` |
132 | | - |
133 | | - Adds leading zeros to a number, up to a specified total length. |
134 | | - |
135 | | -- **commaNum** |
136 | | - |
137 | | - ```javascript |
138 | | - commaNum(number); |
139 | | - ``` |
140 | | - |
141 | | - Rounds and adds commas to a number (e.g. "100,000,000). Original function courtesy of Dan Ebberts. |
142 | | - |
143 | | -- **countdown** |
144 | | - |
145 | | - ```javascript |
146 | | - countdown(length, speed); |
147 | | - ``` |
148 | | - |
149 | | - Returns an string in the format `minutes:seconds`, counting down to zero from a specified number of seconds. An optional `speed` value can be given to mofify the countdown rate (defaults to `1`). |
150 | | - |
151 | | -</details> |
152 | | - |
153 | | -**<details><summary>🔹 Keyframes</summary>** |
154 | | - |
155 | | -- **attachKeys** |
156 | | - |
157 | | - ```javascript |
158 | | - attachKeys(inKeys, outKeys); |
159 | | - ``` |
160 | | - |
161 | | - Attaches a specified number of keyframes to the in and out point of a layer, so you can trim the layer and your keyframed animation will follow. Takes the number of in and out keyframes to attach as input. |
162 | | - |
163 | | -- **bounceKeys** |
| 51 | + _You can run also run a once off build:_ `npm run build` |
164 | 52 |
|
165 | | - ```javascript |
166 | | - bounceKeys(amp, freq, decay, keyMin, keyMax); |
167 | | - ``` |
| 53 | +3. **Edit the `src` files** |
168 | 54 |
|
169 | | - Adds a bounce effect to the keyframes within a specified range. Somewhat untested. |
170 | | - Adapted from [Danny Jenkins' bounce script](http://dannyjenkins.com.au/After-Effects-Expressions). |
| 55 | + _The `index.ts` contains an example expression setup._ |
171 | 56 |
|
172 | | -- **keyframesToArray** |
| 57 | + Any values exported from this file will be included in your library, for example: |
173 | 58 |
|
174 | | - ```javascript |
175 | | - getKeyframesAsArray(); |
176 | | - ``` |
177 | | - |
178 | | - Returns an array of keyframes, where each element is an object with `.time` and `.value` properties. Takes no inputs. |
179 | | - |
180 | | -</details> |
181 | | - |
182 | | -**<details><summary>📌 Transform</summary>** |
183 | | - |
184 | | -- **offsetFromAnchor** |
185 | | - |
186 | | - ```javascript |
187 | | - offsetFromAnchor(value, offset, anchor); |
188 | | - ``` |
189 | | - |
190 | | - Offsets a position by an amount, away from a given anchor. |
191 | | - |
192 | | - - `value`: The original position to offset |
193 | | - - `offset`: The amount to offset |
194 | | - - `anchor`: The direction to offset as an anchor point, either `'topLeft'`, `'topRight'`, `'bottomRight'` or `'bottomLeft'` |
195 | | - |
196 | | -- **maintainScale** |
197 | | - |
198 | | - ```javascript |
199 | | - maintainScale((parentLayer = thisLayer.parent)); |
200 | | - ``` |
201 | | - |
202 | | - Will maintain the current scale value independent of the parent layers scale. |
203 | | - |
204 | | -- **isometricPosition** |
205 | | - |
206 | | - ```javascript |
207 | | - getIsometricPosition(pointControl, offset); |
208 | | - ``` |
209 | | - |
210 | | - Takes a set of 2D coordinates from a point control effect and returns isometric positions. Takes the name of the point control and an offset array as input. |
211 | | - |
212 | | -- **circularMotion** |
213 | | - |
214 | | - ```javascript |
215 | | - circularMotion(radius, revolutionTime, startAngle); |
216 | | - ``` |
217 | | - |
218 | | - Returns an animated, 2 dimensional value that moves in a circle according to a given `radius`, `revolutionTime` (time to complete one revolution), and `startAngle`. |
219 | | - |
220 | | -- **circularPosition** |
221 | | - |
222 | | - ```javascript |
223 | | - circularPosition(radius, angle); |
224 | | - ``` |
225 | | - |
226 | | - Returns a position along a circle according to a given `radius` and `angle`. |
227 | | - |
228 | | -- **scaleToFit** |
229 | | - |
230 | | - ```javascript |
231 | | - scaleToFit(inputSize, maxSize, toggles); |
232 | | - ``` |
233 | | - |
234 | | - Returns a scale (`[###, ###]`) that will fit a given size. `inputSize` and `maxSize` are 2D arrays, and `toggles` is an optional object with the properties `{onlyScaleUp: bool, onlyScaleDown: bool, uniform: true}`. |
235 | | - |
236 | | -</details> |
237 | | - |
238 | | -**<details><summary>🥞 Layer</summary>** |
239 | | - |
240 | | -- **layerBoundsPath** |
241 | | - |
242 | | - ```javascript |
243 | | - getLayerBoundsPath(buffer, sourceLayer, extend, sampleTime); |
244 | | - ``` |
245 | | - |
246 | | - Returns a path that is a rectangle the size of the specified layer, plus a given buffer. Takes the buffer amount, source layer, whether to include extents, and a sample time as optional inputs. If no inputs a given, it defaults to `0`, `thisLayer`, `false` and `time`. |
247 | | - |
248 | | -- **layerRect** |
249 | | - |
250 | | - ```javascript |
251 | | - layerRect({ |
252 | | - layer = thisLayer, |
253 | | - sampleTime = time, |
254 | | - anchor = 'center', |
255 | | - xHeight = true, |
256 | | - }); |
257 | | - ``` |
258 | | - |
259 | | - An abstraction over the `sourceRectAtTime` method that takes an object based input. If `layer` is a text layer, the `size` and `position` returned will ignore ascenders and descenders (unless `xHeight` is set to `false`). |
260 | | - |
261 | | - Valid `anchor` values are: |
262 | | - |
263 | | - ```js |
264 | | - | 'center' |
265 | | - | 'topLeft' |
266 | | - | 'topRight' |
267 | | - | 'bottomRight' |
268 | | - | 'bottomLeft' |
269 | | - | 'topCenter' |
270 | | - | 'rightCenter' |
271 | | - | 'bottomCenter' |
272 | | - | 'leftCenter'; |
273 | | - ``` |
274 | | - |
275 | | - Returns an object of the format: |
276 | | - |
277 | | - ```js |
278 | | - { |
279 | | - size: [], |
280 | | - position: [], |
281 | | - sourceRect, |
282 | | - } |
283 | | - ``` |
284 | | - |
285 | | - Where `size` is the layer width and height as an array, and `position` is the position of the given `anchor` in composition space. `sourceRect` is the full `sourceRectAtTime()` object. |
286 | | - |
287 | | -</details> |
288 | | - |
289 | | -**<details><summary>📐 Points</summary>** |
290 | | - |
291 | | -- **pointsToPath** |
292 | | - |
293 | | - ```javascript |
294 | | - getPathFromPoints(points, closed); |
295 | | - ``` |
296 | | - |
297 | | - Returns a path containing the given array of points. `closed` defaults to true. Points are assumed to be in composition space. |
298 | | - |
299 | | -- **gridPoints** |
300 | | - |
301 | | - ```javascript |
302 | | - gridPoints({ rows, columns, rowNum, columnNum, gridSize }); |
303 | | - ``` |
304 | | - |
305 | | - Returns a rectangular path that is a cell of a grid. |
306 | | - |
307 | | - - `rows`: The number of rows in the grid |
308 | | - - `columns`: The number of columns in the grid |
309 | | - - `rowNum`: The row number of the cell |
310 | | - - `columnNum`: The column number of the cell |
311 | | - - `gridSize`: The total size of the grid as a 2D array. Defaults to the composition size. |
312 | | - |
313 | | -</details> |
314 | | - |
315 | | -**<details><summary>✨ Other</summary>** |
316 | | - |
317 | | -- **effectSearch** |
318 | | - |
319 | | - ```javascript |
320 | | - effectSearch(effectName); |
321 | | - ``` |
322 | | - |
323 | | - Returns the number of effects with a certain name, or the total number of effects if no name is given. Takes the effect name to search for as input. |
324 | | - |
325 | | -- **hideLayerWhenBelow** |
326 | | - |
327 | | - ```javascript |
328 | | - hideLayerWhenBelow(layerIndex); |
329 | | - ``` |
330 | | - |
331 | | - Returns an opacity of 0 if the specified layer has started, otherwise returns 100. Useful for quickly working with lots of stacked layers in After Effects. Takes the layer index (integer) or layer name (string) as input. |
332 | | - |
333 | | -</details> |
| 59 | + ```js |
| 60 | + export { someValue }; |
| 61 | + ``` |
334 | 62 |
|
335 | | -<br> |
| 63 | +4. **Import the `dist` file into After Effects** |
336 | 64 |
|
337 | | -[Back To Top ↑] |
| 65 | + Use the compiled output file as you would any other `.jsx` library. Any changes to the `src` files will be live updated, and After Effects will update the result of your expression. |
0 commit comments