/StoryBoard-Plus

StoryBoard++ for Cytoid

Primary LanguageJavaScript

StoryBoard-Plus

StoryBoard++ for Cytoid

Functions

The Compile Order:

  1. Tick as time
  2. State Inheritance
  3. Multi-state

Tick as time

Now you can use Tick as time

{
    "time": "tick:1920",
    //.....
}

State Inheritance

{
    //......
    "states": [
        {
            "time": 0,
            "x": 0
        },
        {
            "time": 5,
            "y": 0
        },
        {
            "time": 10,
            "x": 1
        },
        {
            "time": 15,
            "y": 1
        }
    ]
}
{
    //......
    "states": [
        {
            "time": 0,
            "x": 0
        },
        {
            "time": 5,
            "x": 0.5,
            "y": 0
        },
        {
            "time": 10,
            "x": 1,
            "y": 0.5
        },
        {
            "time": 15,
            "x": 1,
            "y": 1
        }
    ]
}

Multi-state

{
    //......
    "states": [
        [
            {
                "easing": "linear",
                "time": 0,
                "x": 0
            },
            {
                "time": 10,
                "x": 1
            }
        ],
        [
            {
                "easing": "easeOutQuad",
                "time": 5,
                "y": 0
            },
            {
                "time": 15,
                "y": 1
            }
        ]
    ]
}

will translate to:

{
    //......
    "id": "d9d53f76", // random string
    "states": [
        {
            "easing": "linear",
            "time": 0,
            "x": 0
        },
        {
            "time": 10,
            "x": 1
        }
    ]
},
{
    //......
    "target_id": "d28sg2u", // Same with the main one
    "states": [
        {
            "easing": "easeOutQuad",
            "time": 5,
            "y": 0
        },
        {
            "time": 15,
            "y": 1
        }
    ]
}