animl-cli 0.0.0-stage → 0.1.1

package/examples/photo.ani

@@ -0,0 +1,29 @@
+{
+  "anima": "0.1",
+  "name": "photo",
+  "grid": 24,
+  "requires": ["paint", "assets"],
+  "nodes": [
+    {
+      "id": "photo",
+      "type": "image",
+      "x0": 2,
+      "y0": 2,
+      "asset": "photo",
+      "fit": "contain",
+      "align": "center",
+      "sampling": "nearest",
+      "width": 20,
+      "height": 20
+    }
+  ],
+  "assets": {
+    "photo": {
+      "type": "image",
+      "source": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAG0lEQVR4AWP8r8HwnwEPYGIgAJgYCAAmBgIAABjwAi5tDXySAAAAAElFTkSuQmCC",
+      "storage": "embedded",
+      "width": 8,
+      "height": 4
+    }
+  }
+}

package/examples/photo.animl

@@ -0,0 +1,6 @@
+<anima version="0.1" name="photo" grid="24" requires="paint assets">
+  <asset name="photo" type="image"
+      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAAG0lEQVR4AWP8r8HwnwEPYGIgAJgYCAAmBgIAABjwAi5tDXySAAAAAElFTkSuQmCC"
+      storage="embedded" width="8" height="4"/>
+  <image id="photo" asset="photo" x0="2" y0="2" fit="contain" align="center" sampling="nearest" width="20" height="20"/>
+</anima>

package/examples/progress.ani

@@ -0,0 +1,43 @@
+{
+  "anima": "0.1",
+  "name": "progress",
+  "grid": 20,
+  "requires": ["bind"],
+  "inputs": {
+    "progress": {
+      "type": "number",
+      "default": 0,
+      "min": 0,
+      "max": 1
+    }
+  },
+  "nodes": [
+    {
+      "id": "track",
+      "type": "circle",
+      "center": [10, 10],
+      "r": 8,
+      "opacity": 0.25,
+      "stroke": {
+        "color": "#141413",
+        "width": 1.5
+      }
+    },
+    {
+      "id": "ring",
+      "type": "circle",
+      "center": [10, 10],
+      "r": 8,
+      "pivot": [10, 10],
+      "rotate": -90,
+      "stroke": {
+        "color": "#d97757",
+        "width": 1.5,
+        "trimEnd": 0
+      }
+    }
+  ],
+  "bind": {
+    "ring.stroke.trimEnd": "progress"
+  }
+}

package/examples/progress.animl

@@ -0,0 +1,6 @@
+<anima version="0.1" name="progress" grid="20" requires="bind">
+  <number name="progress" default="0" min="0" max="1"/>
+  <circle id="track" cx="10" cy="10" r="8" opacity="0.25" stroke="#141413" stroke-width="1.5"/>
+  <circle id="ring" cx="10" cy="10" r="8" pivot="10 10" rotate="-90" stroke="#d97757" stroke-width="1.5" trimEnd="0"/>
+  <bind target="ring.trimEnd" value="progress"/>
+</anima>

package/examples/shapes.ani

@@ -0,0 +1,109 @@
+{
+  "anima": "0.1",
+  "name": "shapes",
+  "grid": 20,
+  "requires": ["paint"],
+  "nodes": [
+    {
+      "id": "oval",
+      "type": "ellipse",
+      "rx": 3,
+      "fill": {
+        "color": "#d97757"
+      },
+      "cx": 5,
+      "cy": 5,
+      "ry": 2
+    },
+    {
+      "id": "pentagon",
+      "type": "polygon",
+      "fill": {
+        "color": "#5577aa"
+      },
+      "cx": 14,
+      "cy": 5,
+      "sides": 5,
+      "radius": 3,
+      "rotation": 15,
+      "cornerRadius": 0.5
+    },
+    {
+      "id": "spark",
+      "type": "star",
+      "fill": {
+        "color": "#d97757"
+      },
+      "cx": 5,
+      "cy": 14,
+      "points": 5,
+      "radius": 3,
+      "innerRadius": 1.5,
+      "cornerRadius": 0.3
+    },
+    {
+      "id": "peak",
+      "type": "triangle",
+      "x0": 11,
+      "y0": 11,
+      "stroke": {
+        "color": "#5577aa",
+        "scale": "fixed"
+      },
+      "width": 6,
+      "height": 6
+    },
+    {
+      "id": "tile",
+      "type": "rect",
+      "x0": 8,
+      "y0": 8,
+      "w": 4,
+      "h": 4,
+      "fill": {
+        "color": "#5577aa"
+      },
+      "corners": [1, 1, 0, 0]
+    },
+    {
+      "id": "morph",
+      "type": "path",
+      "d": "M1 19L5 19",
+      "stroke": {
+        "color": "#d97757"
+      }
+    }
+  ],
+  "timelines": {
+    "t": {
+      "duration": 1,
+      "loop": "pingpong",
+      "tracks": {
+        "morph.d": [
+          [0, "M1 19L5 19"],
+          [1, "M1 18L7 18"]
+        ],
+        "tile.corners.0": [
+          [0, 1],
+          [1, 0]
+        ],
+        "oval.rx": [
+          [0, 3],
+          [1, 2]
+        ]
+      }
+    }
+  },
+  "machine": {
+    "layers": {
+      "l": {
+        "initial": "s",
+        "states": {
+          "s": {
+            "play": "t"
+          }
+        }
+      }
+    }
+  }
+}

package/examples/shapes.animl

@@ -0,0 +1,16 @@
+<anima version="0.1" name="shapes" grid="20" requires="paint">
+  <ellipse id="oval" cx="5" cy="5" rx="3" ry="2" fill="#d97757"/>
+  <polygon id="pentagon" cx="14" cy="5" sides="5" radius="3" rotation="15" cornerRadius="0.5" fill="#5577aa"/>
+  <star id="spark" cx="5" cy="14" points="5" radius="3" innerRadius="1.5" cornerRadius="0.3" fill="#d97757"/>
+  <triangle id="peak" x0="11" y0="11" width="6" height="6" stroke="#5577aa" stroke-scale="fixed"/>
+  <rect id="tile" x0="8" y0="8" corners="1 1 0 0" width="4" height="4" fill="#5577aa"/>
+  <path id="morph" d="M1 19L5 19" stroke="#d97757"/>
+  <timeline name="t" duration="1" loop="pingpong">
+    <track target="morph.d">0 "M1 19L5 19"; 1 "M1 18L7 18"</track>
+    <track target="tile.corners.0">0 1; 1 0</track>
+    <track target="oval.rx">0 3; 1 2</track>
+  </timeline>
+  <layer name="l" initial="s">
+    <state name="s" play="t"/>
+  </layer>
+</anima>

package/examples/slice.ani

@@ -0,0 +1,32 @@
+{
+  "anima": "0.1",
+  "name": "slice",
+  "grid": 24,
+  "requires": ["paint", "assets", "surface"],
+  "nodes": [
+    {
+      "id": "tile",
+      "type": "image",
+      "x0": 4,
+      "y0": 4,
+      "asset": "tile",
+      "width": 16,
+      "height": 16,
+      "slice": {
+        "x": [0, 2, 6, 8],
+        "y": [0, 2, 6, 8],
+        "width": 16,
+        "height": 16,
+        "modes": ["stretch", "repeat", "stretch", "stretch", "hidden", "stretch", "stretch", "stretch", "stretch"]
+      }
+    }
+  ],
+  "assets": {
+    "tile": {
+      "type": "image",
+      "source": "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath%20fill='%23ff0000'%20d='M0%200h4v8H0z'/%3E%3Cpath%20fill='%230000ff'%20d='M4%200h4v8H4z'/%3E%3C/svg%3E",
+      "width": 8,
+      "height": 8
+    }
+  }
+}

package/examples/slice.animl

@@ -0,0 +1,9 @@
+<anima version="0.1" name="slice" grid="24" requires="paint assets surface">
+  <asset name="tile" type="image"
+      src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath%20fill='%23ff0000'%20d='M0%200h4v8H0z'/%3E%3Cpath%20fill='%230000ff'%20d='M4%200h4v8H4z'/%3E%3C/svg%3E"
+      width="8" height="8"/>
+
+  <image id="tile" asset="tile" x0="4" y0="4" width="16" height="16">
+    <slice x="0 2 6 8" y="0 2 6 8" width="16" height="16" modes="stretch repeat stretch stretch hidden stretch stretch stretch stretch"/>
+  </image>
+</anima>

package/examples/switch.ani

@@ -0,0 +1,91 @@
+{
+  "anima": "0.1",
+  "name": "switch",
+  "title": "Switch",
+  "grid": 24,
+  "viewBox": [0, 0, 24, 14],
+  "colors": {
+    "track": "#c9c7bd",
+    "accent": "#d97757",
+    "knob": "#ffffff"
+  },
+  "a11y": {
+    "role": "switch",
+    "label": "Notifications",
+    "activate": "on",
+    "pressed": "on"
+  },
+  "inputs": {
+    "on": {
+      "type": "bool"
+    }
+  },
+  "nodes": [
+    {
+      "id": "bg",
+      "type": "path",
+      "d": "M7 1H17A6 6 0 0 1 17 13H7A6 6 0 0 1 7 1Z",
+      "fill": {
+        "color": "track"
+      }
+    },
+    {
+      "id": "lit",
+      "type": "path",
+      "d": "M7 1H17A6 6 0 0 1 17 13H7A6 6 0 0 1 7 1Z",
+      "opacity": 0,
+      "fill": {
+        "color": "accent"
+      }
+    },
+    {
+      "id": "thumb",
+      "type": "circle",
+      "center": [7, 7],
+      "r": 5,
+      "fill": {
+        "color": "knob"
+      }
+    }
+  ],
+  "machine": {
+    "layers": {
+      "switch": {
+        "initial": "off",
+        "states": {
+          "off": {
+            "pose": {},
+            "on": [
+              {
+                "when": "on",
+                "to": "on",
+                "blend": 0.2,
+                "ease": "out"
+              }
+            ]
+          },
+          "on": {
+            "pose": {
+              "thumb.x": 10,
+              "lit.opacity": 1
+            },
+            "on": [
+              {
+                "when": "!on",
+                "to": "off",
+                "blend": 0.2,
+                "ease": "out"
+              }
+            ]
+          }
+        }
+      }
+    }
+  },
+  "listeners": [
+    {
+      "on": "click",
+      "toggle": "on"
+    }
+  ]
+}

package/examples/switch.animl

@@ -0,0 +1,22 @@
+<anima version="0.1" name="switch" title="Switch" grid="24" viewBox="0 0 24 14">
+  <color name="track" value="#c9c7bd"/>
+  <color name="accent" value="#d97757"/>
+  <color name="knob" value="#ffffff"/>
+  <bool name="on"/>
+  <a11y role="switch" label="Notifications" activate="on" pressed="on"/>
+
+  <path id="bg" d="M7 1H17A6 6 0 0 1 17 13H7A6 6 0 0 1 7 1Z" fill="track"/>
+  <path id="lit" d="M7 1H17A6 6 0 0 1 17 13H7A6 6 0 0 1 7 1Z" opacity="0" fill="accent"/>
+  <circle id="thumb" cx="7" cy="7" r="5" fill="knob"/>
+
+  <layer name="switch" initial="off">
+    <state name="off">
+      <on when="on" to="on" blend="0.2" ease="out"/>
+    </state>
+    <state name="on">
+      <pose thumb.x="10" lit.opacity="1"/>
+      <on when="!on" to="off" blend="0.2" ease="out"/>
+    </state>
+  </layer>
+  <listener on="click" toggle="on"/>
+</anima>