@effing/annie 0.23.1 → 0.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -4
- package/package.json +3 -4
package/README.md
CHANGED
|
@@ -51,14 +51,17 @@ const stream = annieStream(frames);
|
|
|
51
51
|
|
|
52
52
|
```typescript
|
|
53
53
|
import { annieStream, annieBuffer } from "@effing/annie";
|
|
54
|
-
import {
|
|
54
|
+
import { createCanvas, renderReactElement } from "@effing/canvas";
|
|
55
55
|
import { tween, easeOutQuad } from "@effing/tween";
|
|
56
56
|
|
|
57
57
|
// Define a frame generator
|
|
58
58
|
async function* generateFrames() {
|
|
59
59
|
yield* tween(90, async ({ lower: progress }) => {
|
|
60
60
|
const scale = 1 + 0.3 * easeOutQuad(progress);
|
|
61
|
-
|
|
61
|
+
const canvas = createCanvas(1080, 1920);
|
|
62
|
+
const ctx = canvas.getContext("2d");
|
|
63
|
+
await renderReactElement(
|
|
64
|
+
ctx,
|
|
62
65
|
<div style={{
|
|
63
66
|
width: 1080,
|
|
64
67
|
height: 1920,
|
|
@@ -70,8 +73,9 @@ async function* generateFrames() {
|
|
|
70
73
|
}}>
|
|
71
74
|
Hello World!
|
|
72
75
|
</div>,
|
|
73
|
-
{
|
|
76
|
+
{ fonts: myFonts }
|
|
74
77
|
);
|
|
78
|
+
return canvas.encode("png");
|
|
75
79
|
});
|
|
76
80
|
}
|
|
77
81
|
|
|
@@ -177,6 +181,6 @@ tar -xO < animation.tar | ffmpeg -f image2pipe -framerate 30 -i - output.gif
|
|
|
177
181
|
## Related Packages
|
|
178
182
|
|
|
179
183
|
- [`@effing/tween`](../tween) — Step iteration and easing functions for frame generation
|
|
180
|
-
- [`@effing/
|
|
184
|
+
- [`@effing/canvas`](../canvas) — Render JSX to PNG for each frame
|
|
181
185
|
- [`@effing/annie-player`](../annie-player) — Play Annies in the browser
|
|
182
186
|
- [`@effing/effie`](../effie) — Use Annies as layers in video compositions
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@effing/annie",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.24.0",
|
|
4
4
|
"description": "Annie animation frame generator utilities",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"dist"
|
|
14
14
|
],
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@effing/serde": "0.
|
|
16
|
+
"@effing/serde": "0.24.0"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"tsup": "^8.0.0",
|
|
@@ -31,8 +31,7 @@
|
|
|
31
31
|
"keywords": [
|
|
32
32
|
"animation",
|
|
33
33
|
"frames",
|
|
34
|
-
"video"
|
|
35
|
-
"satori"
|
|
34
|
+
"video"
|
|
36
35
|
],
|
|
37
36
|
"license": "O'Saasy",
|
|
38
37
|
"publishConfig": {
|