Shape
Mọi phần tử trong một group vẽ cùng một shape, đặt giữa phần tử và lấp đầy chiều rộng, chiều cao của nó. Mỗi part có đúng một shape. Muốn trộn nhiều shape thì dùng part.
| Shape | Field (mặc định) | Vẽ ra |
|---|---|---|
circle | startAngle (-π/2), sweep (2π) | một hình elip đặc, hoặc một lát của nó |
rect | cornerRadius (0) | một hình chữ nhật đặc |
ring | strokeWidth, startAngle (-π/2), sweep (2π), segments (1) | một đường tròn có stroke, hoặc các cung của nó |
triangle | không có | một tam giác đặc, đỉnh hướng lên |
line | không có | một thanh có hai đầu bo tròn hoàn toàn |
Góc tính bằng radian. -π/2 (khoảng -1.5708) là phía trên, 0 là bên phải, và cung đi theo chiều kim đồng hồ.
circle
Một hình elip đặc nội tiếp trong phần tử. Nếu phần tử vuông thì đó là hình tròn.
Với sweep nhỏ hơn 2π, chỉ một phần của hình tròn được vẽ: vùng nằm giữa cung tròn (từ startAngle đến startAngle + sweep) và đoạn thẳng nối hai đầu cung. sweep = π cho ra nửa hình tròn. Với 3π/2 là hình tròn bị dây cung cắt mất một bên.
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "ShapeCircleArc",
"duration": 0.8,
"layout": { "type": "single", "size": 0.8 },
"shape": { "type": "circle", "startAngle": 0, "sweep": 4.71238898 },
"tracks": [
{ "property": "rotate", "keyTimes": [0, 1], "values": [0, 6.283185307] }
]
}ShapeCircleArcMở trong playground rect
Một hình chữ nhật đặc. cornerRadius là tỉ lệ so với cạnh ngắn hơn của phần tử, từ 0 (góc vuông) đến 0.5 (hai đầu bo tròn hoàn toàn).
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "ShapeRect",
"duration": 1.6,
"layout": { "type": "single", "size": 0.55 },
"shape": { "type": "rect", "cornerRadius": 0.25 },
"tracks": [
{ "property": "rotate", "keyTimes": [0, 0.5, 1], "values": [0, 1.570796327, 3.141592654], "easing": "easeInOut" },
{ "property": "scale", "keyTimes": [0, 0.25, 0.5, 0.75, 1], "values": [1, 0.7, 1, 0.7, 1], "easing": "easeInOut" }
]
}ShapeRectMở trong playground ring
Một đường tròn có stroke. strokeWidth là tỉ lệ so với cạnh ngắn hơn của phần tử. Mép ngoài của stroke chạm vào phần tử, nên ring không bao giờ tràn ra ngoài. Hai đầu stroke là đầu bằng.
sweep chỉ vẽ một cung của đường tròn:
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "ShapeRing",
"duration": 0.75,
"layout": { "type": "single", "size": 0.9 },
"shape": { "type": "ring", "strokeWidth": 0.1, "sweep": 4.71238898 },
"tracks": [
{ "property": "rotate", "keyTimes": [0, 1], "values": [0, 6.283185307] }
]
}ShapeRingMở trong playground Segment
segments chia ring thành từng ấy cung, cách đều nhau. Mỗi cung bắt đầu tại startAngle + k × 2π / segments và dài sweep.
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "ShapeRingSegments",
"duration": 1.4,
"layout": { "type": "single", "size": 0.9 },
"shape": { "type": "ring", "strokeWidth": 0.12, "segments": 3, "sweep": 1.5 },
"tracks": [
{ "property": "rotate", "keyTimes": [0, 1], "values": [0, 6.283185307] },
{ "property": "strokeEnd", "keyTimes": [0, 0.5, 1], "values": [0.2, 1, 0.2], "easing": "easeInOut" }
]
}ShapeRingSegmentsMở trong playground Trim bằng strokeStart và strokeEnd
Ring có thêm hai thuộc tính mà track có thể animate: strokeStart (rest value 0) và strokeEnd (rest value 1). Chúng trim mọi cung, tính theo tỉ lệ của cung, giống strokeStart và strokeEnd trong Core Animation. Khi strokeEnd nhỏ hơn hoặc bằng strokeStart thì không có gì được vẽ.
Ở đây đầu cuối dài ra từ 0 đến 1 trong nửa đầu chu kỳ, rồi đầu bắt đầu đuổi theo trong nửa sau:
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "ShapeRingTrim",
"duration": 1.5,
"layout": { "type": "single", "size": 0.9 },
"shape": { "type": "ring", "strokeWidth": 0.1 },
"tracks": [
{ "property": "strokeStart", "keyTimes": [0, 0.5, 1], "values": [0, 0, 1], "easing": "easeInOut" },
{ "property": "strokeEnd", "keyTimes": [0, 0.5, 1], "values": [0, 1, 1], "easing": "easeInOut" },
{ "property": "rotate", "keyTimes": [0, 1], "values": [0, 3.141592654] }
]
}ShapeRingTrimMở trong playground Chỉ dành cho ring
Track và rest value của strokeStart, strokeEnd cần shape ring. Dùng với shape khác thì validate() sẽ báo lỗi.
Hình tròn há ra như cái miệng
Một ring có strokeWidth bằng 0.5 chính là một hình tròn đặc. Trim nó sẽ mở ra một lát cắt. Indicator có sẵn Pacman hoạt động theo cách này.
triangle
Một tam giác cân đặc: đỉnh ở giữa phía trên, hai góc ở dưới bên phải và dưới bên trái.
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "ShapeTriangle",
"duration": 1.5,
"layout": { "type": "single", "size": 0.7 },
"shape": { "type": "triangle" },
"tracks": [
{ "property": "rotate", "keyTimes": [0, 1], "values": [0, 2.094395102], "easing": "easeInOut" }
]
}ShapeTriangleMở trong playground line
Một hình chữ nhật đặc có bán kính góc bằng một nửa cạnh ngắn hơn: một thanh có hai đầu tròn. Dùng nó trong row để làm các thanh equalizer, hoặc trong ring có định hướng để làm spinner.
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "ShapeLine",
"duration": 0.9,
"layout": { "type": "row", "count": 4, "gap": 0.12, "itemHeight": 0.8 },
"shape": { "type": "line" },
"stagger": [0, 0.3, 0.15, 0.45],
"tracks": [
{ "property": "scaleY", "keyTimes": [0, 0.5, 1], "values": [0.3, 1, 0.3], "easing": "easeInOut" }
]
}ShapeLineMở trong playground Quy tắc chính xác
Bản đặc tả định nghĩa chính xác từng shape, kể cả cách đo các cung trên hình elip.