Motion ko‘nikmasi yordamida jonli tuyuladigan rasmlarni animatsiya qiling

Motion ko‘nikmasi nima qiladi

Chizgan har qanday narsangiz uchun Motion ko‘nikmasi dizaynerlar va muhandislarga kod orqali chizilgan tasvirlarni jonli ko‘rinadigan qilib animatsiyalashga yordam beradi, shunda ular almashtirilayotgan illyustratsiyalar ketma-ketligiga o‘xshab qolmaydi. U personajlar, jonzotlar, o‘simliklar, mato, olov, tutun, suv, ob-havo, chiroqlar, mashinalar, ikonalar, logotiplar, diagrammalar va to‘liq sahnalarga qo‘llanadi.

Loyiha animatsiyani ishonarli qiladigan tafsilotlarga e’tibor qaratadi: butun sahna uchun yagona soat, haqiqiy burilish nuqtalari atrofida harakatlanish, bir takt kechikib ergashadigan qismlar, uzluksiz sokin harakat, asosiy pozalar orqali silliq yo‘llar, me’yoridagi amplitudalar va kuchli vaqt egri chiziqlari.

Shuningdek, agentlar yaratgan animatsiyalarda uchraydigan muammolar ham ko‘rib chiqiladi. Har bir poza uchun mustaqil silliqlashtirilgan tween ishlatish o‘rniga, ko‘nikma muvofiqlashtirilgan harakat, tabiiy o‘tishlar, aniq ko‘rinadigan ko‘z yumishlar, barqaror tegish nuqtalari va nozik ikkilamchi harakatni tavsiya qiladi.

Ko‘nikmani o‘rnatish

Ko‘nikmani skills buyrug‘i yordamida o‘rnating:

npx skills@latest add rossark0/rossark-motion-skill

O‘rnatilgandan so‘ng ko‘nikma ma’lumotnomalar, qayta ishlatiladigan shablonlar, tahlil vositalari va namunaviy sahnalarni taqdim etadi. Tarkibidagi dvigatel React Native va SwiftUI shablonlarini qo‘llab-quvvatlaydi.

Repozitoriyni tushunish

Asosiy ko‘nikma qo‘llanmasini o‘qing

SKILL.md faylidan boshlang. Unda asosiy tamoyillar, turli obyektlar uchun retseptlar, jonli yuzlar, to‘liq tana harakatlari, sahnaga asoslangan amallar, interfeys harakati, keng tarqalgan xatolar, ma’lumotnoma videolarini tahlil qilish va tavsiya etilgan ish jarayoni tasvirlangan.

Loyihaga xos harakat qaydlarini yarating

MOTION.md faylini tasvirlaringiz yoniga ko‘chiring va ishlash davomida 2-qismni to‘ldiring. Animatsiya kodi qayerda joylashgani, loyihangiz amal qiladigan qoidalar, tasvir nimalarni bajara olmasligi va o‘zgarishlarni qanday tekshirishingizni qayd eting. Ko‘nikma avval shu faylni o‘qiydi, shuning uchun u harakatni o‘zgartirish yoki yaratishdan oldin agentga loyiha haqida muhim kontekst beradi.

Animatsiya dvigatelini tanlang

Repozitoriy qo‘llab-quvvatlanadigan har bir UI freymvorki uchun bittadan dvigatelni o‘z ichiga oladi:

• React Native uchun motion.ts.
• SwiftUI uchun Motion.swift.

Dvigatel siklli va bir martalik soatlar, track, flow, seg, wave, loop, bell, seeded hamda harakat egri chiziqlarini o‘z ichiga oladi. Tasviringizga animatsiyali ko‘zlar va og‘izlar kerak bo‘lsa, unga qo‘shilgan jonli yuz shablonlaridan foydalaning.

Animatsiyani bosqichma-bosqich yarating

1. Tasvir va uning cheklovlarini tavsiflang. Mavjud chizish tuzilmasi, mavjud geometriya va cheklovlarni hujjatlashtirish uchun MOTION.md dan foydalaning.
2. Sahnani qismlarga ajrating. Tana, bosh, qo‘l-oyoqlar, rekvizitlar, soyalar, yuz xususiyatlari va ikkilamchi elementlarni aniqlang. Qaysi qismlar haqiqiy burilish nuqtalari atrofida aylanishini va qaysilari ergashib borishi kerakligini belgilang.
3. Umumiy soatni tanlang. Har bir elementga o‘zaro bog‘liq bo‘lmagan tween berish o‘rniga, sahnani bitta vaqt jadvali orqali muvofiqlashtiring. Bu tegish nuqtalari va reaksiyalarning sinxron qolishini ta’minlaydi.
4. Asosiy harakatlarni belgilang. Kirish, qo‘nish, tepish, ko‘z yumish, qarash, qo‘l silkitish, o‘sish yoki joyiga tushish kabi hodisalarni rejalashtiring. Mavjud dvigatel yordamchilari, jumladan asosiy pozalar orqali harakatlanish uchun flow yordamida bu pozalarni silliq harakat bilan bog‘lang.
5. Ikkilamchi harakatni qo‘shing. Bosh, bilaklar, kokilkalar, shlyapalar, bankalar, soyalar yoki boshqa bo‘sh qismlar asosiy harakatga ozgina kechikish bilan ergashsin.
6. Tegish nuqtalarini tekshiring. Oyoqlar yerga tegib turishiga, qo‘llar dastaklarga birikkan holda qolishiga, otilgan obyektlar to‘g‘ri joylarda boshlanib tugashiga va zarbalar tasvir hajmini saqlashiga ishonch hosil qiling.
7. Natijani kadrma-kadr ko‘rib chiqing. Juda kichik, keskin yoki noto‘g‘ri vaqtlangan harakatlarni topish uchun repozitoriyning tahlil vositalari va render qilingan chiqishidan foydalaning.

Jonli yuz shablonlaridan foydalaning

liveFace.tsx va LiveFace.swift sirg‘aladigan, ko‘z yumadigan va kuladigan jonli ko‘zlar hamda og‘izlarni taqdim etadi. Siz geometriya va ranglarni berasiz, shablon esa har bir ifoda uchun alohida tasvir talab qilmasdan yuz harakatini qo‘shadi.

Yuzdagi o‘zgarishlar aniq va uzluksiz bo‘lsin. Lipillashga o‘xshab ko‘rinadigan nihoyatda qisqa ko‘z yumishlardan saqlaning va bir ifodadan boshqasiga to‘g‘ridan-to‘g‘ri o‘tishni ishlatmang. Ko‘zlarning kichik harakatlari hamda bosh va nigoh o‘rtasidagi ozgina kechikish personajni yanada e’tiborli qilib ko‘rsatishi mumkin.

Kiritilgan namunalarni o‘rganing

Reveal

Reveal sahnasi telefon ramkasidagi to‘liq tana harakatini namoyish etadi. Siluet osilib turgan oyoqlar bilan suzib kiradi, bola tortishish kuchi ta’sirida yiqilib, qo‘nganda eziladi, to‘p dumalab kiradi, ko‘zlar uning ortidan ergashadi, personaj tepadi, buriladi, qo‘l silkitadi va harakatlanishda davom etadi. Ketma-ketlik soniyasiga 60 kadr tezlikda ishlaydigan to‘qqiz soniyalik sikl bo‘lib, bitta sahna soatidan foydalanadi.

Garden

Garden sahnasi personaj harakatini muhitdagi o‘zgarishlar bilan birlashtiradi. Suv tomchilari urug‘langan yoylar bo‘ylab harakatlanadi, tuproq qorayadi, poya ikki turtki bilan o‘sadi, barglar ketma-ket yoziladi, gulbarglar burilish bilan ochiladi, kapalak esa qo‘nadi va poya uning og‘irligiga javob beradi. Personajning boshi va ko‘zlari kapalakni kuzatadi, kokilkalar, shlyapa va sug‘orish idishi esa harakatga ergashadi.

Chef

Chef sahnasi vaqtni belgilash, tortishish kuchi, oldindan tayyorgarlik, hayrat va tegish nuqtalarini ko‘rsatadi. Quymoq havoda aylanadi, ezilib qo‘nadi, so‘ng ikkinchi urinishda haddan tashqari baland ko‘tarilib, oshpazning shlyapasiga uriladi, tebranadi, sirg‘alib tushadi va tovada ushlanadi. Bug‘ va alanga harakati qo‘shimcha to‘lqinlardan foydalanadi, qo‘l esa dastakka moslashtiriladi.

Orbit

Orbit sahnasi chuqurlik tartibini namoyish etadi. Kartalar qush atrofida aylanib, joylashuviga qarab oldinda, orqada yoki yon tomondan ko‘rinadi. Qush suzib, egiladi, qanotlarini qoqadi, oyoqlari va pat tutamlari harakatni davom ettiradi, sikl davomida belgilangan vaqtlarda yaltirashlar paydo bo‘ladi.

SwiftUI demolarini render qilish

macOS 14 yoki undan keyingi versiyada SwiftUI shablonlari va demo sahnalarini quyidagicha kompilyatsiya qiling:

swiftc -parse-as-library -target arm64-apple-macos14 templates/swiftui/Motion.swift templates/swiftui/LiveFace.swift demo/*.swift -o /tmp/render-demo

Reveal sahnasini sekundiga 60 kadrda kadrlar katalogiga render qiling:

/tmp/render-demo reveal /tmp/frames phone fps=60

Boshqa sahnalarni render qilish uchun reveal o‘rniga garden, chef yoki orbit dan foydalaning. Render qilingan kadrlar ketma-ketligini FFmpeg yordamida MP4 ga aylantiring:

ffmpeg -framerate 60 -i /tmp/frames/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 20 demo/reveal.mp4

Render qilish to‘liq vaqt jadvalini izchil tekshirish, o‘zgarishlarni taqqoslash va animatsiya maqsadli kadrlar tezligida barqaror qolishini tasdiqlash imkonini beradi.

Namunaviy harakatni tahlil qilish

Namunaviy video mavjud bo‘lsa, qurishni boshlashdan oldin uni o‘rganing. Real vaqtda ko‘rish qiyin bo‘lgan kichik harakatlar natijaning tabiiy yoki mexanik tuyulishini belgilashi mumkin.

• sheet.sh videodan uning to‘liq kadrlar tezligida kontakt varaqlarini yaratadi va vaqt hamda kadrma-kadr o‘zgarishlarni tekshirishni osonlashtiradi.
• track_edges.py obyekt chegaralarini kadrma-kadr o‘lchab, nozik qaltirash, suzish va tebranishlarni aniqlashga yordam beradi.
• sample_colors.py video kadridagi aniq ranglarni o‘qiydi.

Harakatni kodga o‘girishdan oldin uning vaqti, amplitudasi va oraliqlarini aniqlash uchun ushbu o‘lchovlardan foydalaning. Namuna kichik vazn almashinuvi, kechikkan davomiy harakat yoki siluetdagi zo‘rg‘a ko‘rinadigan o‘zgarish tufayli jonli tuyulishi mumkin.

Harakat bo‘yicha ilg‘or maslahatlar

Muvofiqlashtirilgan vaqtni afzal ko‘ring

Sahna uchun bitta soatdan foydalaning va bog‘liq harakatlarga vaqt munosabatlarini ulashing. Tepish, ko‘z harakati, bosh burilishi va to‘p trayektoriyasi mustaqil animatsiyalar kabi emas, balki bir xil voqeani ifodalashi kerak.

Davomiy harakat va oldindan tayyorgarlikdan foydalaning

Ikkinchi darajali qismlar asosiy tana to‘xtashi bilan doim to‘xtamasligi kerak. Bo‘sh elementlarga qisqa vaqt davom etish, joyiga tushish yoki tezlanishga javob berish imkonini bering. Bu ayniqsa soch, kokilkalar, bosh kiyimlar, kiyimlar, qo‘l-oyoqlar, soyalar va olib yurilayotgan buyumlar uchun foydalidir.

Harakatsiz holatdagi jonlilikni saqlang

Qahramonlar va sahnalar asosiy harakatlar orasida qotib qolmasligi kerak. Nozik nafas olish, ko‘z qisish, suzish, tebranish yoki boshqa kichik amplitudali harakatlar asosiy harakatni chalg‘itmasdan siklni jonli saqlashi mumkin.

To‘qnashuvlarda hajmni saqlang

Siqish va cho‘zish chizmani qo‘llab-quvvatlashi, uni tasodifiy buzmasligi kerak. Reveal va Chef misollarida qo‘nish paytida siqishdan foydalaniladi, shu bilan birga qahramon yoki obyekt taniqli va sahna bilan yaxlit holda qoladi.

Takror muhim bo‘lganda belgilangan o‘zgaruvchanlikdan foydalaning

Yaltirashlar yoki suv tomchilari kabi takrorlanuvchi detallar uchun harakat o‘zgarishi, ammo qayta tiklanishi kerak bo‘lsa, belgilangan xatti-harakatdan foydalaning. Qayta tiklanadigan vaqt belgilash nosozliklarni tuzatish va render taqqoslashlarini osonlashtiradi.

Interfeys harakati bo‘yicha yo‘riqnomalarni qo‘llang

Interfeysdagi harakatlar uchun loyiha havola qilgan tamoyillarni, jumladan Emil Kowalskining skills loyihasi va Benji Taylorninng Family values tamoyillarini ko‘rib chiqing. Interfeys harakatlarini maqsadli va atrofdagi dizayn bilan uyg‘un saqlang.

Xulosa

Motion ko‘nikmasi kod orqali chizilgan tasvirlarni ifodali animatsiyaga aylantirish uchun amaliy asos beradi. Uni npx bilan o‘rnating, loyihangizni MOTION.md da hujjatlashtiring, umumiy soat asosida quring, React Native yoki SwiftUI shablonlaridan foydalaning va natijani render qilingan kadrlar hamda tahlil vositalari yordamida tekshiring. Asosiy maqsad oddiy: pozalarni silliq bog‘lash, butun sahnani muvofiqlashtirish va jonli tuyulishi uchun har bir qismga zarur vaqt hamda davomiy harakatni berish.