Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarifying gradient value #111

Merged
merged 3 commits into from
Nov 27, 2024
Merged

Clarifying gradient value #111

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ff761c
Add pucker/bloat modifier
mbasaglia Nov 11, 2024
5a8245e
Clarifying gradient value
b-wils Nov 15, 2024
c78a335
Revert "Add pucker/bloat modifier"
b-wils Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions docs/specs/shapes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -657,3 +657,26 @@ separately, $start$ and $end$ being applied to each shape.
* When `m` has a value of `2` (Sequential), all the shapes MUST be considered
as following each other in render order. $start$ and $end$ refer to the whole
length created by concatenating each shape.


<h3 id="pucker-bloat">Pucker / Bloat</h3>

{schema_string:shapes/pucker-bloat/description}

{schema_object:shapes/pucker-bloat}

When `a` is `0`, nothing changes.<br/>
When `a` is positive, the vertices are pulled towards the center, with `100` being at the center. And the tangents are pushed away.<br/>
When `a` is negative the vertices are pushed away from the center with `100` being twice far away from the center. And the tangents are pulled towards the center.<br/>

The center is defined as the mean of the bezier vertices.

<lottie-playground example="pucker_bloat.json">
<form>
<input title="Amount" type="range" min="-100" value="50" max="100"/>
</form>
<json>lottie.layers[0].shapes[0].it[1]</json>
<script>
lottie.layers[0].shapes[0].it[1].a.k = data["Amount"];
</script>
</lottie-playground>
4 changes: 2 additions & 2 deletions docs/specs/values.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,11 @@ RGB component.
<h2 id="gradient">Gradient</h2>

The gradient appearance is specified in terms of color stops and opacity stops.
Color stops are defined as `(position, color)` tuples, where the position is a normalized `[0..1]`value along the gradient axis `[startpoint -> endpoint]`, and the color is 3 floats representing the RGB components. Transparency (opacity) stops are defined as `(position, transparency)` tuples, where position is similar to color stops' position.
Color stops are defined as `(position, color)` tuples, where the position is a normalized `[0..1]`value along the gradient axis `[startpoint -> endpoint]`, and the color is 3 floats representing the RGB components. Transparency (opacity) stops are defined as `(position, transparency)` tuples, where the position is a normalized `[0..1]`value along the gradient axis `[startpoint -> endpoint]`, and transparency is a `[0..1]` value.

All color and opacity stops are stored sequentially by ascending offsets in a flattened float array (color stops followed by opacity stops), with 4 floats per color stop and 2 floats per opacity stops. Thus, given color stops and opacity stops, the expected size for the gradient data array is `4 * Nc + 2 * No`.

The color stop count is typically specified in a separate field from the gradient values, while the count of opacity stops can be inferred from the data array length: `No = (length - 4 * Nc)/2`.
The color stop count MUST be specified in a separate field from the gradient values, while the count of opacity stops can be inferred from the data array length: `No = (length - 4 * Nc)/2`.

<h3>Gradient without transparency</h3>

Expand Down
179 changes: 179 additions & 0 deletions docs/static/examples/pucker_bloat.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
{
"v": "5.5.7",
"ip": 0,
"op": 180,
"nm": "Animation",
"mn": "{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}",
"fr": 60,
"w": 512,
"h": 512,
"assets": [
],
"layers": [
{
"ddd": 0,
"ty": 4,
"ind": 0,
"st": 0,
"ip": 0,
"op": 180,
"nm": "Layer",
"mn": "{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}",
"ks": {
"a": {
"a": 0,
"k": [
256,
256
]
},
"p": {
"a": 0,
"k": [
256,
256
]
},
"s": {
"a": 0,
"k": [
100,
100
]
},
"r": {
"a": 0,
"k": 0
},
"o": {
"a": 0,
"k": 100
}
},
"shapes": [
{
"ty": "gr",
"nm": "PolyStar",
"mn": "{9199543e-3552-4e51-a802-623f2a4a2ca1}",
"it": [
{
"ty": "sr",
"nm": "PolyStar",
"mn": "{57cff206-c227-4a14-a679-195157be886b}",
"p": {
"a": 0,
"k": [
256,
256
]
},
"or": {
"a": 0,
"k": 160
},
"r": {
"a": 0,
"k": 0
},
"pt": {
"a": 0,
"k": 5
},
"sy": 2,
"os": {
"a": 0,
"k": 0
}
},
{
"ty": "pb",
"nm": "Pucker / Bloat",
"a": {
"a": 0,
"k": 50
}
},
{
"ty": "st",
"nm": "Stroke",
"mn": "{0930ce27-c8f9-4371-b0cf-111a859abfaf}",
"o": {
"a": 0,
"k": 100
},
"c": {
"a": 0,
"k": [
1,
0.9803921568627451,
0.2823529411764706
]
},
"lc": 2,
"lj": 2,
"ml": 0,
"w": {
"a": 0,
"k": 30
}
},
{
"ty": "fl",
"hd": true,
"nm": "Fill",
"mn": "{a1bcc159-6916-4718-841d-a99140c0e74b}",
"o": {
"a": 0,
"k": 100
},
"c": {
"a": 0,
"k": [
1,
0.9803921568627451,
0.2823529411764706
]
},
"r": 1
},
{
"ty": "tr",
"a": {
"a": 0,
"k": [
249.3134328358209,
254.47164179104476
]
},
"p": {
"a": 0,
"k": [
249.3134328358209,
254.47164179104476
]
},
"s": {
"a": 0,
"k": [
100,
100
]
},
"r": {
"a": 0,
"k": 0
},
"o": {
"a": 0,
"k": 100
}
}
]
}
]
}
],
"meta": {
"g": "Glaxnimate 0.4.6-26-g7b05e75c"
}
}
1 change: 1 addition & 0 deletions schema/shapes/all-graphic-elements.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
{"$ref": "#/$defs/shapes/stroke"},
{"$ref": "#/$defs/shapes/transform"},
{"$ref": "#/$defs/shapes/trim-path"},
{"$ref": "#/$defs/shapes/pucker-bloat"},
{"$ref": "#/$defs/shapes/unknown-shape"}
]
}
30 changes: 30 additions & 0 deletions schema/shapes/pucker-bloat.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"type": "object",
"title": "Pucker Bloat",
"description": "Interpolates bezier vertices towards the center of the shape, and tangent handles away from it (or vice-versa)",
"allOf": [
{
"$ref": "#/$defs/shapes/modifier"
},
{
"type": "object",
"properties": {
"ty": {
"title": "Shape Type",
"type": "string",
"const": "pb"
},
"a": {
"title": "Amount",
"description": "Amount as a percentage",
"$ref": "#/$defs/properties/scalar-property"
}
},
"required": [
"ty"
]
}
]
}