Skip to content

Instantly share code, notes, and snippets.

@luigi-rosso
Last active August 27, 2019 05:17
Show Gist options
  • Save luigi-rosso/24e9c8c0a527373f44cb720744bf6963 to your computer and use it in GitHub Desktop.
Save luigi-rosso/24e9c8c0a527373f44cb720744bf6963 to your computer and use it in GitHub Desktop.
Example animation for Flare project file.
{
"artboards": {
"type": "artboards",
"id": 985,
"name": "Artboards",
"main": 0,
"children": [{
"type": "artboard",
"id": 986,
"name": "Artboard",
"translation": [0, 0],
"origin": [0.5, 0.5],
"width": 1024,
"height": 768,
"color": [0.364705890417099, 0.364705890417099, 0.364705890417099, 1],
"clipContents": true,
// artboards can have a list of animations
"animations": [{
"displayEnd": 10, // start of the visible area (this is an editor settings/optional)
"displayStart": 0, // end of the visible area (this is an editor settings/optional)
"duration": 10, // duration of the entire animation in seconds (defines the end in terms of what can be scrolled/zoomed to)
"fps": 60, // frame rate used only to round to the closest whole frame while placing keyframes
"id": 9000,
"isWorkAreaActive": true, // whether the work area is turned on
"loop": false, // whether the animation loops
"name": "Untitled", // name for this animation
"order": -1, // order in the animation list
"nodes": { // map from node id to map of animated properties
"987": { // node with id 987
"framePosX": // key is the property to animate (in this case x translation)
[ // value is a list of keyframes
{
"t": 0, // time
"v": 0, // value
"i": 2, // interpolation type cubic
"curve": [0.42, 0, 0.58, 1] // easing parameters for interpolation
}, {
"t": 1.0833333333333333, // time
"v": 300, // value
"i": 1 // linear
}
]
}
},
"position": 1.0833333333333333,
"workAreaEnd": 1.0833333333333333,
"workAreaStart": 0.3
}],
"children": [{
"type": "shape",
"id": 987,
"name": "Ellipse",
"blendMode": "srcOver",
"drawOrder": 1,
"children": [{
"type": "colorFill",
"id": 989,
"name": "Color",
"opacity": 1,
"color": [1, 0, 0, 1],
"fillRule": "nonzero"
}, {
"type": "ellipse",
"id": 990,
"name": "Ellipse Path",
"width": 100,
"height": 100
}]
}]
}]
},
"settings": {}
}
@luigi-rosso
Copy link
Author

Animatable properties:

// Node
framePosX
framePosY
frameScaleX
frameScaleY
frameRotation
frameOpacity
// Drawable
frameDrawOrder
// Bone
frameLength
// Image
frameImageVertices
// Constraint
frameStrength
// Event
frameTrigger
// Custom Properties
frameIntValue
frameFloatValue
frameStringValue
frameBooleanValue
// Solo
frameActiveChild
// Path
framePathVertices
// Fill
frameFillColor
frameFillGradient
frameFillRadial
// Stroke
frameStrokeColor
frameStrokeGradient
frameStrokeRadial
frameStrokeWidth
frameStrokeOpacity
frameFillOpacity
// Procedural Path
frameWidth
frameHeight
// Rectangle
frameCornerRadius
// Star
frameInnerRadius
// Trim
frameStrokeStart
frameStrokeEnd
frameStrokeOffset

@luigi-rosso
Copy link
Author

Interpolation types:

0 - Hold
1 - Linear
2 - Cubic

@luigi-rosso
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment