CSS cubic-bezier to Spine 4.2 curve
Pick a CSS easing or type the four cubic-bezier numbers, set the two keys, and get the "curve" array for a Spine 4.2 timeline — with a plot and a copy button. It works the other way too: paste a curve from a Spine file and get the CSS easing back.
Convert a curve
Keys the curve runs between
[
{ "time": 0, "value": 0, "curve": [0.125, 9, 0.125, 90] },
{ "time": 0.5, "value": 90 }
]Paste it into a rotate, alpha or any one-value timeline. Two-value timelines (translate, scale) take four numbers per value: eight in one array.
Or back: a curve from a Spine file, between the same keys
cubic-bezier(0.2, 0, 0.8, 1)
Why the numbers change
CSS cubic-bezier(x1, y1, x2, y2) is normalized: time and value both run from 0 to 1. Spine 4.x stores absolute numbers instead: cx1 and cx2 are seconds between the two keys, cy1 and cy2 are values in the timeline's own units — degrees for rotate, pixels for translate. So cx = time1 + x·(time2 − time1) and cy = value1 + y·(value2 − value1).
The curve sits on the first of the two keys and shapes the way to the next one; a curve on the last key is ignored. No curve means linear, and "stepped" holds the value until the next key.
The official JSON format page in places still describes Spine 3.8, where all four numbers were normalized — exactly like CSS. Paste normalized numbers into a 4.x file and they are read as seconds and degrees: the animation blows up without an error. More in Spine 4.2 Bezier curves in JSON, explained.
More tools
Check the whole file with the Spine JSON validator: it flags curve handles outside the time between keys. Riggy takes exact curves from your spec as is when it rigs and animates a layered PSD.
Try Riggy