creator-plugin-examples/animating-transforms/plugin.ts at main · LottieFiles/creator-plugin-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
creator.ui.show({ width: 300, height: 340 });

interface Message {
  type:
    | "animate-position"
    | "animate-rotation"
    | "animate-scale"
    | "animate-opacity"
    | "animate-combined";
}

const sceneCenter = {
  x: creator.activeScene.size.width / 2,
  y: creator.activeScene.size.height / 2,
};

creator.ui.onMessage((msg: Message) => {
  const scene = creator.activeScene;

  const createRectangleLayer = () => {
    const layer = scene.createShapeLayer({ position: sceneCenter });
    layer.createRectangle({ size: { width: 100, height: 100 } });
    layer.createFill({ type: "SOLID", color: { r: 128, g: 128, b: 128 } });
    return layer;
  };

  switch (msg.type) {
    case "animate-position": {
      const layer = createRectangleLayer();

      // Animate position: move from left to right
      layer.position.addKeyframes([
        { frame: 0, value: { x: 50, y: 150 } },
        { frame: 30, value: { x: 300, y: 150 } },
        { frame: 60, value: { x: 50, y: 150 } },
      ]);
      break;
    }

    case "animate-rotation": {
      const layer = createRectangleLayer();

      // Animate rotation: full 360 degree spin
      layer.rotation.addKeyframes([
        { frame: 0, value: 0 },
        { frame: 60, value: 360 },
      ]);
      break;
    }

    case "animate-scale": {
      const layer = createRectangleLayer();

      // Animate scale: pulse effect
      layer.scale.addKeyframes([
        { frame: 0, value: { x: 100, y: 100 } },
        { frame: 30, value: { x: 150, y: 150 } },
        { frame: 60, value: { x: 100, y: 100 } },
      ]);
      break;
    }

    case "animate-opacity": {
      const layer = createRectangleLayer();

      // Animate opacity: fade in and out
      layer.opacity.addKeyframes([
        { frame: 0, value: 100 },
        { frame: 30, value: 20 },
        { frame: 60, value: 100 },
      ]);
      break;
    }

    case "animate-combined": {
      const layer = createRectangleLayer();

      // Combine multiple animations
      layer.position.addKeyframes([
        { frame: 0, value: { x: 50, y: 200 } },
        { frame: 60, value: { x: 300, y: 100 } },
      ]);

      layer.rotation.addKeyframes([
        { frame: 0, value: 0 },
        { frame: 60, value: 180 },
      ]);

      layer.scale.addKeyframes([
        { frame: 0, value: { x: 50, y: 50 } },
        { frame: 30, value: { x: 120, y: 120 } },
        { frame: 60, value: { x: 100, y: 100 } },
      ]);

      layer.opacity.addKeyframes([
        { frame: 0, value: 50 },
        { frame: 30, value: 100 },
        { frame: 60, value: 80 },
      ]);
      break;
    }
  }
});