Layout
Layout đặt các phần tử vào box. Nó cho mỗi phần tử một tâm, chiều rộng, chiều cao và, với ring có định hướng, một góc xoay. Mọi độ dài đều là tỉ lệ so với cạnh box, box chạy từ 0 đến 1 trên cả hai trục, trục y hướng xuống.
Chọn một loại layout và đổi các field của nó. Các ô được đánh số là các phần tử, theo thứ tự index.
"layout": {"type":"row","count":3,"gap":0.05}| Layout | Field (mặc định) | Phần tử |
|---|---|---|
single | size (1), width (size), height (size), x (0.5), y (0.5) | một phần tử, tâm tại (x, y) |
stack | count, và các field giống single | count phần tử tại cùng một chỗ |
row | count, gap, itemWidth, itemHeight | một hàng ngang, căn giữa theo chiều dọc |
grid | columns, rows, gap | một lưới lấp đầy box, lần lượt từng hàng |
ring | count, itemSize, itemWidth, itemHeight, startAngle (0), orient (false) | các phần tử trên một vòng tròn, theo chiều kim đồng hồ |
Các giá trị đếm (count, columns, rows) được làm tròn tới số nguyên gần nhất và tối thiểu là 1. Bất kỳ con số nào cũng có thể là một $param.
single
Một phần tử. Không có field nào thì nó lấp đầy box. Dùng width và height cho phần tử không vuông, và x, y để dời tâm của nó.
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutSingle",
"duration": 1.2,
"layout": { "type": "single", "width": 0.7, "height": 0.35 },
"shape": { "type": "rect", "cornerRadius": 0.3 },
"tracks": [
{ "property": "rotate", "keyTimes": [0, 1], "values": [0, 3.141592654], "easing": "easeInOut" }
]
}LayoutSingleMở trong playground stack
count phần tử chồng lên nhau, tất cả cùng một chỗ. Stack hữu ích khi đi cùng stagger, để mỗi bản sao ở một điểm khác nhau trong chu kỳ. Hiệu ứng ripple này dùng offset stagger âm, nên ngay từ frame đầu tiên ba vòng tròn đã nằm rải đều trong chu kỳ, thay vì cùng bắt đầu một lúc (xem Stagger).
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutStack",
"duration": 1.5,
"layout": { "type": "stack", "count": 3 },
"shape": { "type": "circle" },
"stagger": [0, -0.5, -1],
"tracks": [
{ "property": "scale", "keyTimes": [0, 1], "values": [0, 1], "easing": "easeOut" },
{ "property": "opacity", "keyTimes": [0, 0.1, 1], "values": [0, 0.8, 0] }
]
}LayoutStackMở trong playground row
count phần tử nằm cạnh nhau, giữa hai phần tử là gap. Tâm theo chiều dọc luôn là 0.5.
- Không có
itemWidththì các phần tử và khoảng cách lấp đầy chiều ngang của box: mỗi phần tử rộng(1 - gap × (count - 1)) / count. - Có
itemWidththì hàng dùng đúng chiều rộng phần tử đó và được căn giữa. itemHeightmặc định bằng chiều rộng phần tử, nên phần tử là hình vuông. Đặt nó nếu bạn muốn các thanh cao.
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutRow",
"duration": 1,
"layout": { "type": "row", "count": 5, "gap": 0.08, "itemHeight": 0.7 },
"shape": { "type": "line" },
"stagger": { "each": 0.1 },
"tracks": [
{ "property": "scaleY", "keyTimes": [0, 0.5, 1], "values": [1, 0.35, 1], "easing": "easeInOut" }
]
}LayoutRowMở trong playground grid
columns × rows phần tử lấp đầy box, đánh số lần lượt từng hàng từ góc trên bên trái. gap là khoảng cách giữa hai ô, cả theo chiều ngang lẫn chiều dọc.
Ví dụ này dùng một mảng stagger (mỗi phần tử một offset) để làn sóng bắt đầu từ góc dưới bên trái.
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutGrid",
"duration": 1.2,
"layout": { "type": "grid", "columns": 3, "rows": 3, "gap": 0.1 },
"shape": { "type": "rect", "cornerRadius": 0.2 },
"stagger": [0.2, 0.3, 0.4, 0.1, 0.2, 0.3, 0, 0.1, 0.2],
"tracks": [
{ "property": "scale", "keyTimes": [0, 0.35, 0.7, 1], "values": [1, 0, 1, 1], "easing": "easeInOut" }
]
}LayoutGridMở trong playground ring
count phần tử trên một vòng tròn, cách đều nhau. Phần tử 0 nằm ở startAngle (0 là bên phải tâm) và các phần tử còn lại nối tiếp theo chiều kim đồng hồ. Bán kính là 0.5 - itemSize / 2, nên mép ngoài của các phần tử chạm vào box.
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutRing",
"duration": 1,
"layout": { "type": "ring", "count": 8, "itemSize": 0.2 },
"shape": { "type": "circle" },
"stagger": { "each": 0.125 },
"tracks": [
{ "property": "opacity", "keyTimes": [0, 1], "values": [1, 0.15] },
{ "property": "scale", "keyTimes": [0, 1], "values": [1, 0.5] }
]
}LayoutRingMở trong playground Phần tử có định hướng
itemWidth và itemHeight đổi kích thước phần tử nhưng không đổi bán kính, bán kính vẫn tính từ itemSize. Với orient: true, mỗi phần tử được xoay sao cho đỉnh của nó hướng ra xa tâm. Kết hợp với shape line là ra một spinner kinh điển.
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "LayoutRingOrient",
"duration": 1.2,
"layout": { "type": "ring", "count": 12, "itemSize": 0.26, "itemWidth": 0.07, "orient": true },
"shape": { "type": "line" },
"stagger": { "each": 0.1 },
"tracks": [
{ "property": "opacity", "keyTimes": [0, 1], "values": [1, 0.15] }
]
}LayoutRingOrientMở trong playground Thứ tự phần tử và màu
Index của phần tử đi theo thứ tự của layout: trái sang phải với row, lần lượt từng hàng với grid, theo chiều kim đồng hồ từ startAngle với ring. Mảng stagger, durations và thiết lập colors đều dùng các index này.
Công thức chính xác
Bản đặc tả đưa ra công thức chính xác cho từng layout.