Chapter 8 — Motion Dizayn Tamoyillari: Timing, Easing va Tipografiya

Motion grafika — "harakatli dizayn". AI kod yoki shablon yozib bera oladi, lekin qachon, qancha tez, qanday his bilan — siz bilishingiz kerak. Bu bobda shu "ko'z"ni o'rgatamiz.

---

8.1 Keyframe va Easing

Simple Explanation

Keyframe — animatsiyadagi muhim lahza (boshlang'ich va oxirgi qiymat). Orasini kompyuter to'ldiradi. Easing — harakat tezligi qanday o'zgarishi.

Easing turlari

code.text
TEXTNusxalash
01Linear       — bir xil tezlik (mexanik, "robot")
02Ease-in      — sekin boshlanib, tezlashadi (ketayotgan ob'ekt uchun)
03Ease-out     — tez boshlanib, sekinlashadi (kirib kelayotgan ob'ekt uchun) ← eng ko'p ishlatiladi
04Ease-in-out  — ikkala chekkada sekin (silliq, tabiiy)

💬 Tajriba maslahati: Tabiatda hech narsa linear harakatlanmaydi. Elementni ekranga ease-out bilan kiriting, chiqarishda ease-in ishlating.

8.2 Timing va Spacing

Simple Explanation

Timing — harakat qancha davom etishi. Spacing — kadrlar orasidagi masofalar taqsimoti (easing'ning "ichki" ko'rinishi).

code.text
TEXTNusxalash
01Taxminiy davomiylik (jarayonli UI/titul animatsiyalar):
02Kichik element (ikonka, tugma):   0.15–0.3 s
03O'rta element (karta, panel):      0.3–0.5 s
04Katta o'tish (sahna, ekran):       0.5–0.8 s

(Bu — boshlang'ich nuqta; his bilan sozlang.)

⚠️ Common Mistake
Hamma narsani bir vaqtda animatsiya qilish. Stagger (ketma-ket kechikish, masalan 0.05–0.1 s) ishlating — ko'z tartib bilan kuzata oladi.

8.3 Anticipation, Overshoot va Follow-through

Simple Explanation

Klassik animatsiya tamoyillaridan eng foydalilari:

• Anticipation (tayyorlanish): asosiy harakatdan oldin kichik teskari harakat
• Overshoot (oshib ketish): maqsaddan biroz o'tib, qaytib joylashish
• Follow-through: harakat tugagach, qismlar inersiya bilan davom etadi

code.text
TEXTNusxalash
01Logo kirishi: kichikdan 110% gacha kattalashadi (overshoot) → 100% ga qaytadi

💡 Key Idea
Kichik overshoot (5–10%) — jonli, "premium" his beradi. Haddan oshirsangiz — bolalarcha ko'rinadi.

8.4 Tipografik Animatsiya va O'qish Vaqti

Qoidalar

code.text
TEXTNusxalash
01Ierarxiya: sarlavha > asosiy matn > ikkilamchi (hajm/og'irlik bilan)
02O'qish vaqti (taxminiy): so'zlar soni ÷ 3 + 1 soniya zaxira
03   Misol: 9 so'zli matn → 9/3 + 1 = 4 soniya ekranda tursin
04Safe margins: muhim matn chetdan ≈ 5–10% ichkarida (platforma interfeysi to'sib qo'ymasin)

⚠️ Common Mistake
Matnni animatsiya bilan shunchalik sekin kiritish/tez yo'qotishki, o'qishga ulgurilmaydi. Avval o'qish vaqti, keyin chiroy.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Bitta lower-third (ism-lavozim) uchun timing rejasini yozing: kirish, ushlab turish, chiqish (soniyalarda).

🟡 Exercise 2 — Medium

Task: Uchta element (logo, sarlavha, tugma) kirishi uchun easing, davomiylik va stagger kechikishini belgilang.

🐛 Debugging Challenge

Stsenariy: Animatsiya "arzon va robotdek" ko'rinmoqda: hamma narsa linear, bir vaqtda va juda tez.

Your Task: Uchta tuzatishni ayting.

<details> <summary>Solution</summary> 1) Linear o'rniga ease-out (kirish) va ease-in (chiqish) qo'llash. 2) Elementlarni stagger (0.05–0.1 s) bilan ketma-ket kiritish. 3) Davomiylikni 0.3–0.5 s atrofiga sozlab, kerakli joyda kichik overshoot qo'shish. </details>

📌 Chapter Summary

Keyframe + easing — harakat asosi. Timing/spacing — his. Anticipation, overshoot, follow-through — jonlilik. Tipografiyada ierarxiya, o'qish vaqti va safe margins muhim.

🎯 Key Takeaways

• Linear'dan qoching — easing ishlating
• Kirish: ease-out, chiqish: ease-in
• Stagger — tartib beradi
• Avval o'qish vaqti, keyin estetika

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Kirish → ease-out | Chiqish → ease-in | Silliq → ease-in-out
02Kichik 0.15–0.3s | O'rta 0.3–0.5s | Katta 0.5–0.8s
03Stagger 0.05–0.1s | O'qish: so'z÷3 + 1s

---