👟Animation API

Every Ninja Can Be Programmed Via Straight-Forward Animation API

Ninja Animation API Demo, All Animation Can Be Saved as GIFs

For Ninjas, we aimed beyond merely incorporating a handful of animations for GIF exports. We developed a user-friendly animation API that enables the animation of each layer, frame by frame, with your chosen duration and style. Simply input your custom JSON code into the interface, and we even provide tailored error messages for guidance.

So, are you getting it now? Have you seen this on Ethereum PFP projects?😁

Ideas for v2

In our next version, we intend to enhance this API further, making it significantly more robust. Our goal is to introduce an intuitive graphical user interface, along with capabilities for resizing and rotate layers, as well as hide and show custom overlays.

Additionally, we'd like to offer more expressive options for defining nuanced and dynamic motions, such as:

1. Elastic Animation: This type of animation mimics an elastic material, stretching and bouncing back, ideal for creating playful and engaging UI elements.

2. Bounce Effect: Similar to elastic animation but with a more pronounced 'bounce' at the end of the movement, giving a lively feel to objects settling into place.

3. Ease-In and Ease-Out Transitions: These animations start slow, accelerate in the middle, and then slow down again towards the end. They are great for natural and smooth movements.

4. Spring Physics: This animation simulates the dynamics of a spring, providing a natural, physics-based interaction, often used for pull-to-refresh actions or interactive buttons.

5. Deceleration and Acceleration Curves: By manipulating the acceleration and deceleration of an animation, you can create a sense of momentum and weight, making UI interactions feel more realistic.

6. Path Animation: This involves moving an object along a complex predefined path, which could be curved, zigzagged, or any custom shape, offering creative ways to guide user attention.

7. Sequential Animations: Where one animation starts only after the previous one has finished, creating a coordinated sequence of movements.

These are just ideas at this stage, so we'd love to hear feedback from the community on what they'd like to see in the next version of our Animation API.

Sample Hello Animation for 4-Layer Ninja (v1)

IMPORTANT: All layers must be on the canvas for the first frame or they will lose their color. In this example, the first frame is the same as the last frame in the animation and the second frame is off the canvas starting the bouncing up animation.

Below you will see the animation only changes the X coordinates of each layer, starting with 0 in the first frame (matching the top to the top of the screen), 2000 in the second frame (completely off the current 2,000px canvas), and then slowly geometrically decreasing from 2000 back to 0 for a bounce up animation.

The final frame has a duration of 300ms, which gives it the equivalent duration of 6 frames (default is 50ms).

As of now, the API supports duration, layers, each layer number with an underscore, and an X and Y coordinate.

{
  "frame_1": {
    "layers": {
      "layer_1": {"x": 0},
      "layer_2": {"x": 0},
      "layer_3": {"x": 0},
      "layer_4": {"x": 0}
    }
  },
  "frame_2": {
    "layers": {
      "layer_1": {"x": 2000},
      "layer_2": {"x": 2000},
      "layer_3": {"x": 2000},
      "layer_4": {"x": 2000}
    }
  },
  "frame_3": {
    "layers": {
      "layer_1": {"x": 1500},
      "layer_2": {"x": 1500},
      "layer_3": {"x": 1500},
      "layer_4": {"x": 1500}
    }
  },
  "frame_4": {
    "layers": {
      "layer_1": {"x": 1000},
      "layer_2": {"x": 1000},
      "layer_3": {"x": 1000},
      "layer_4": {"x": 1000}
    }
  },
  "frame_5": {
    "layers": {
      "layer_1": {"x": 750},
      "layer_2": {"x": 750},
      "layer_3": {"x": 750},
      "layer_4": {"x": 750}
    }
  },
  "frame_6": {
    "layers": {
      "layer_1": {"x": 500},
      "layer_2": {"x": 500},
      "layer_3": {"x": 500},
      "layer_4": {"x": 500}
    }
  },
  "frame_7": {
    "layers": {
      "layer_1": {"x": 375},
      "layer_2": {"x": 375},
      "layer_3": {"x": 375},
      "layer_4": {"x": 375}
    }
  },
  "frame_8": {
    "layers": {
      "layer_1": {"x": 250},
      "layer_2": {"x": 250},
      "layer_3": {"x": 250},
      "layer_4": {"x": 250}
    }
  },
  "frame_9": {
    "layers": {
      "layer_1": {"x": 187},
      "layer_2": {"x": 187},
      "layer_3": {"x": 187},
      "layer_4": {"x": 187}
    }
  },
  "frame_10": {
    "layers": {
      "layer_1": {"x": 124},
      "layer_2": {"x": 124},
      "layer_3": {"x": 124},
      "layer_4": {"x": 124}
    }
  },
  "frame_11": {
    "layers": {
      "layer_1": {"x": 92},
      "layer_2": {"x": 92},
      "layer_3": {"x": 92},
      "layer_4": {"x": 92}
    }
  },
  "frame_12": {
    "layers": {
      "layer_1": {"x": 60},
      "layer_2": {"x": 60},
      "layer_3": {"x": 60},
      "layer_4": {"x": 60}
    }
  },
  "frame_13": {
    "layers": {
      "layer_1": {"x": 44},
      "layer_2": {"x": 44},
      "layer_3": {"x": 44},
      "layer_4": {"x": 44}
    }
  },
  "frame_14": {
    "layers": {
      "layer_1": {"x": 28},
      "layer_2": {"x": 28},
      "layer_3": {"x": 28},
      "layer_4": {"x": 28}
    }
  },
  "frame_15": {
    "layers": {
      "layer_1": {"x": 20},
      "layer_2": {"x": 20},
      "layer_3": {"x": 20},
      "layer_4": {"x": 20}
    }
  },
  "frame_16": {
    "layers": {
      "layer_1": {"x": 12},
      "layer_2": {"x": 12},
      "layer_3": {"x": 12},
      "layer_4": {"x": 12}
    }
  },
  "frame_17": {
    "layers": {
      "layer_1": {"x": 8},
      "layer_2": {"x": 8},
      "layer_3": {"x": 8},
      "layer_4": {"x": 8}
    }
  },
  "frame_18": {
    "layers": {
      "layer_1": {"x": 4},
      "layer_2": {"x": 4},
      "layer_3": {"x": 4},
      "layer_4": {"x": 4}
    }
  },
  "frame_19": {
    "layers": {
      "layer_1": {"x": 2},
      "layer_2": {"x": 2},
      "layer_3": {"x": 2},
      "layer_4": {"x": 2}
    }
  },
  "frame_20": {
    "duration": 300,
    "layers": {
      "layer_1": {"x": 0},
      "layer_2": {"x": 0},
      "layer_3": {"x": 0},
      "layer_4": {"x": 0}
    }
  },
}