Track
Track cho biết một thuộc tính của mọi phần tử trong group thay đổi thế nào trong một chu kỳ. Nó là một danh sách keyframe: keyTimes cho biết khi nào, values cho biết giá trị gì, còn easing cho biết giá trị di chuyển ra sao giữa hai keyframe.
{ "property": "scale", "keyTimes": [0, 0.5, 1], "values": [1, 0.4, 1], "easing": "easeInOut" }Thuộc tính
| Thuộc tính | Rest value | Đơn vị | Ý nghĩa |
|---|---|---|---|
scale | 1 | hệ số | scale cả chiều rộng và chiều cao |
scaleX, scaleY | 1 | hệ số | scale một trục. Được nhân với scale |
opacity | 1 | 0 đến 1 | nhân vào kênh alpha của màu phần tử |
rotate | 0 | radian | xoay phần tử theo chiều kim đồng hồ quanh tâm của nó |
rotateX, rotateY | 0 | radian | lật 3D quanh trục ngang hoặc trục dọc (xem Perspective) |
translateX, translateY | 0 | đơn vị box | dịch chuyển phần tử. 1 là trọn cạnh box. y âm là đi lên |
strokeStart, strokeEnd | 0, 1 | 0 đến 1 | trim các cung của shape ring |
Thuộc tính nào không có track thì giữ nguyên rest value. Mỗi thuộc tính chỉ xuất hiện tối đa một lần trong tracks và tối đa một lần trong groupTracks.
keyTimes và values
keyTimes là các điểm trong chu kỳ, từ 0 (đầu) đến 1 (cuối). values có một giá trị cho mỗi key time. Quy tắc:
keyTimesvàvaluesdài bằng nhau, tối thiểu là 2.keyTimesnằm trong [0, 1] và không bao giờ giảm.- Trước key time đầu tiên, giá trị là giá trị đầu tiên. Sau key time cuối cùng, giá trị là giá trị cuối cùng.
Muốn lặp mượt thì bắt đầu ở 0, kết thúc ở 1, và cho giá trị cuối bằng giá trị đầu.
Giữ nguyên và nhảy cóc
Hai giá trị bằng nhau liên tiếp sẽ giữ nguyên giá trị. Hai key time bằng nhau liên tiếp sẽ tạo một bước nhảy tức thì. Ở đây hình vuông thu nhỏ, đứng yên, phóng to, đứng yên, và opacity của nó nhảy từ 1 xuống 0.4 ở giữa chu kỳ:
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "TrackSteps",
"duration": 2,
"layout": { "type": "single", "size": 0.6 },
"shape": { "type": "rect", "cornerRadius": 0.2 },
"tracks": [
{ "property": "scale", "keyTimes": [0, 0.25, 0.5, 0.75, 1], "values": [1, 0.5, 0.5, 1, 1], "easing": "easeInOut" },
{ "property": "opacity", "keyTimes": [0, 0.5, 0.5, 1], "values": [1, 1, 0.4, 0.4] }
]
}TrackStepsMở trong playground Easing
Easing định hình chuyển động giữa hai keyframe. Mặc định là linear.
| Tên | Cubic bezier | Cảm giác |
|---|---|---|
linear | [0, 0, 1, 1] | tốc độ không đổi |
ease | [0.25, 0.1, 0.25, 1] | mặc định của CSS và Core Animation |
easeIn | [0.42, 0, 1, 1] | bắt đầu chậm |
easeOut | [0, 0, 0.58, 1] | kết thúc chậm |
easeInOut | [0.42, 0, 0.58, 1] | chậm ở cả đầu và cuối |
Bạn cũng có thể đưa vào một cubic bezier [x1, y1, x2, y2], giống cubic-bezier() của CSS. x1 và x2 phải nằm trong [0, 1]. y1 và y2 có thể vượt ra ngoài, khi đó giá trị sẽ bị overshoot.
"easing": "easeInOut"Ba chấm dưới đây di chuyển với linear, easeInOut và bezier overshoot [0.34, 1.56, 0.64, 1]:
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "TrackEasing",
"duration": 1.6,
"parts": [
{
"layout": { "type": "single", "size": 0.2, "x": 0.18, "y": 0.2 },
"shape": { "type": "circle" },
"tracks": [
{ "property": "translateX", "keyTimes": [0, 0.5, 1], "values": [0, 0.64, 0], "easing": "linear" }
]
},
{
"layout": { "type": "single", "size": 0.2, "x": 0.18, "y": 0.5 },
"shape": { "type": "circle" },
"tracks": [
{ "property": "translateX", "keyTimes": [0, 0.5, 1], "values": [0, 0.64, 0], "easing": "easeInOut" }
]
},
{
"layout": { "type": "single", "size": 0.2, "x": 0.18, "y": 0.8 },
"shape": { "type": "circle" },
"tracks": [
{ "property": "translateX", "keyTimes": [0, 0.5, 1], "values": [0, 0.64, 0], "easing": [0.34, 1.56, 0.64, 1] }
]
}
]
}TrackEasingMở trong playground Mỗi segment một easing
Một track có n key time thì có n - 1 segment. easing có thể là một giá trị dùng chung cho mọi segment, hoặc một danh sách có đúng một easing cho mỗi segment. Ở đây mỗi chấm đi lên với easeOut, rơi xuống với easeIn, rồi nghỉ:
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "TrackPerSegment",
"duration": 0.9,
"layout": { "type": "row", "count": 3, "gap": 0.12 },
"shape": { "type": "circle" },
"stagger": { "each": 0.12 },
"tracks": [
{
"property": "translateY",
"keyTimes": [0, 0.35, 0.7, 1],
"values": [0, -0.25, 0, 0],
"easing": ["easeOut", "easeIn", "linear"]
}
]
}TrackPerSegmentMở trong playground Danh sách được đọc thế nào
Nếu mục đầu tiên của easing là một con số, cả danh sách là một bezier. Ngược lại, nó là mỗi segment một easing. Vậy [0.42, 0, 0.58, 1] là một bezier, còn [[0.42, 0, 0.58, 1], "linear"] là hai segment.
Translation
translateX và translateY dịch phần tử khỏi vị trí layout của nó, tính bằng đơn vị box. Hai track có cùng key time có thể vẽ ra một đường đi. Chấm này chạy vòng quanh một hình thoi:
{
"$schema": "https://maitrungduc1410.github.io/loader-kit/schema/v1.json",
"schemaVersion": 1,
"name": "TrackTranslate",
"duration": 1.2,
"layout": { "type": "single", "size": 0.25 },
"shape": { "type": "circle" },
"tracks": [
{ "property": "translateX", "keyTimes": [0, 0.25, 0.5, 0.75, 1], "values": [-0.3, 0, 0.3, 0, -0.3], "easing": "easeInOut" },
{ "property": "translateY", "keyTimes": [0, 0.25, 0.5, 0.75, 1], "values": [0, -0.3, 0, 0.3, 0], "easing": "easeInOut" }
]
}TrackTranslateMở trong playground Đọc timeline
<TrackTimeline> vẽ giá trị của từng phần tử trong một chu kỳ. Đây là indicator có sẵn BallPulse: một track scale đi từ 1 xuống minScale rồi quay lại, với stagger 0.12 giây.
- Phần tử 0, bắt đầu lúc 0.12 s
- Phần tử 1, bắt đầu lúc 0.24 s
- Phần tử 2, bắt đầu lúc 0.36 s
Quy tắc chính xác
Bản đặc tả định nghĩa cách lấy mẫu một track và thuật toán easing chính xác mà mọi engine sử dụng.