Tarkib
- Sketchdan import qilish
- Niqob va avatar qatlamlarini yarating
- Shtatlarni aniqlang
- Shtatlar o'rtasidagi jonlantirish
- Haqiqiy mobil qurilmada sinab ko'ring
Dizayn prototipini yaratishning sababi yangi emas - bu brauzerda loyihalash haqidagi barcha shov-shuvlarga o'xshaydi. Dizaynni haqiqiy kontekstda ko'rsangiz, bu butunlay boshqacha. Interfeys qanday ishlashi va o'zini qanday his qilishi haqida taxmin qilish shart bo'lmaganida siz yaxshiroq qaror qabul qilasiz. Bu qo'shimcha ish kabi tuyulishi mumkin, ammo sizning dizayningizning ishlashini ko'rib chiqishingiz mumkin bo'lgan tushunchalar bebahodir.
Framer - bu prototipni kodga asoslangan yangi vosita. Siz odatdagidek Sketch (yoki Photoshop) da maketlar yaratishingiz va ularni Framer-ga import qilishingiz mumkin. Keyin, ozgina CoffeeScript yozing, shunda siz ko'p narsaga erishishingiz mumkin.
Ilova prototipini ikkita ko'rinishga ega bo'lgan iOS ilovasi prototipi misolidan foydalanib, Framer-da prototiplarni yaratish asoslarini o'rgatmoqchiman: profil ko'rinishi va foydalanuvchining avatar tasvirining kattalashtirilgan ko'rinishi. Kengaytirilgan fotosurat ko'rinishi qanday ochilishi va yopilishini prototiplashtiramiz, shuningdek uni jonlantiramiz. Onlayn demoni bu erda ko'ring (manba kodini ko'rish uchun faqat yuqori chap burchakdagi belgini bosing). Sizga Framer-ning bepul sinov muddati kerak bo'ladi, uni framerjs.com saytidan olishingiz mumkin.
Sketchdan import qilish
Birinchi qadam Sketch-dan Framer-ga qatlamlarni import qilishdir. Dizayn Sketch-da ochiq bo'lsa, shunchaki Framer-da Import tugmasini bosing va quyidagi dialog oynasida to'g'ri faylni tanlang. Framer har bir qatlamdan rasmlarni avtomatik ravishda import qiladi va ularga quyidagi kod orqali kirish imkoniyatini beradi:
sketch = Framer.Importer.load "import / profile"
Import qilingan qatlamlarga kirish uchun ushbu o'zgaruvchidan foydalaning. Masalan, Sketch faylida "tarkib" deb nomlangan qatlamga murojaat qilish uchun siz Framer-ga sketch.content yozasiz.
Niqob va avatar qatlamlarini yarating
Ushbu prototipning asosiy vazifasi avatar tasvirini tekkizilganda uni kengaytirish, so'ngra uni yana bosilganda yopishdir. Birinchidan, biz ikkita niqob qatlamini yaratamiz - ichki niqob yoki boshqa niqob ichida niqob. Yaxshi, nozik ochilish va yopish effektini yaratish uchun ikkala niqobni birdaniga jonlantiramiz. HeaderMask qatlami avatar fotosuratini kengaytirganda to'rtburchakka kesadi va niqob qatlami uni profil ko'rinishidagi kichik doiraga kesadi.
HeaderMask qatlamini quyidagicha yarating:
headerMask = yangi Qatlam kengligi: Screen.width, balandlik: 800 backgroundColor: "shaffof"
Birinchi satr yangi qatlamni yaratadi va nomlaydi. Keyin, CoffeeScript-ning indentatsiya sintaksisidan foydalanib, biz kenglik, balandlik va fon xususiyatlarini o'rnatdik. Shaffof fondan foydalanamiz, shunda avatar fotosurati kengaytirilganda ostidagi qatlamlar ko'rinadi.
Keyin niqob qatlamini yarating:
niqob = yangi Qatlam kengligi: 1000, balandlik: 1000 fon Rang: "shaffof", chegaraRadius: 500 y: sketch.header.height - 100 superLayer: headerMask shkalasi: 0,2, kelib chiqishiY: 0
Biz xuddi shu tarzda yangi qatlam yaratamiz va xususiyatlarni o'rnatamiz. Katta borderRadius bu qatlamni aylanaga aylantiradi. Biz niqob qatlamini Sketch-dan import qilingan sarlavha qatlami bilan qoplashi uchun joylashtiramiz. Bundan tashqari, biz 20 foizga yoki 0,2 ga tushamiz. Nolinchi kelib chiqishi nolni belgilash nuqtasini yoki rasmni ro'yxatdan o'tkazishni yuqori chetiga o'rnatadi.
Qolgan xususiyat, superLayer, biz yaratgan headerMask qatlamini ushbu yangi qatlamning ota-onasi sifatida o'rnatadi. Framerda maskalash shunday ishlaydi. Shunchaki superLayer xususiyatini o'rnating va ota-ona qatlami bolani maskalashga imkon beradi.
Keyinchalik, biz avatar grafikasini yaratishimiz va uni yangi maskalar ichiga joylashtirishimiz kerak. Kesish chegaralarini kattalashtirish va jonlantirish uchun biz avatar qatlamini qo'lda yaratamiz. Fotosuratni loyiha papkasining 'rasmlar' pastki jildiga nusxalash. Keyin ushbu rasm yordamida qatlam yarating:
avatar = yangi Layer image: "images / avatar.png" kengligi: niqob. kenglik, balandlik: niqob. balandlik superLayer: niqob, force2d: rost
Biz avatarning superLayer-ni niqob qatlami sifatida o'rnatganimizga e'tibor bering. Endi ikkalasi ham headerMask ichiga joylashtirilgan. Shuningdek, biz kenglik va balandlikni o'rnatdik, shunda tasvir maskalangan maydonni to'liq to'ldiradi.
Va nihoyat, biz animatsiya uchun foydalanadigan niqobning Y holatini saqlash uchun o'zgaruvchini yaratamiz. Biz uni gorizontal ravishda markazlashtiramiz, chunki u ekrandan kattaroqdir.
maskY = mask.y mask.centerX ()
Shtatlarni aniqlang
Animatsiya yaratishning birinchi bosqichi boshlanish va tugatish holatlarini aniqlashdir. Framerda holatlar kodda yozilgan asosiy kadrlarga o'xshaydi. Holat shunchaki xususiyatlar to'plamidir. Har bir qatlam standart holatga ega. Ushbu prototip uchun ushbu sukut animatsiya uchun boshlang'ich nuqta bo'lib xizmat qiladi, shuning uchun har bir qatlam uchun faqat ikkinchi holatni o'rnatishimiz kerak.
Shtatlar uchun sintaksis juda oddiy. Qatlamga murojaat qiling, layer.states.add () usulidan foydalaning va keyin qo'shiladigan xususiyatlarni ro'yxatlang.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (o'sish: {masshtab: 1.1, y: maskY - 420})
Sketch-dan import qilingan va boshqa barcha profil ekran elementlarini o'z ichiga olgan kontent qatlami uchun ikkinchi holat to'liq shaffof bo'lishi kerak. Shunday qilib, avatar kengaytirilganda, biz qora fonga ega bo'lamiz va qolgan import qilingan piktogramma va elementlar ko'rsatiladi.
Kodning ikkinchi satri headerMask holatini yaratadi, bu uni 120 darajali Y holatiga o'tkazadi. Bu avatar fotosurati kattalashganda sarlavha va yopish tugmachasini ekranning yuqori qismida ko'rsatishga imkon beradi. Shuningdek, u avatar fotosuratini kesish chegaralarini jonlantiradi.
Va nihoyat, niqob qatlami uchun yangi holat avval uni yaratgan maskY o'zgaruvchisidan foydalangan holda uni kattalashtiradi va yuqoriga ko'taradi. Niqob qatlamining originY (yoki biriktiruvchi nuqtasi) uning yuqori qirrasi bo'lganligi sababli, biz uni tasvirning markazi ko'rinadigan qilib 420 pikselga ko'tarishimiz kerak.
Shtatlar o'rtasidagi jonlantirish
Odatiy holatlar va biz yaratgan yangilar o'rtasida jonlantirish uchun bizga yana to'rt qator kod kerak. Avatar qatlamida chertish moslamasini o'rnatamiz. Agar foydalanuvchi uni profil ekraniga bosganda, biz velosiped holatlari bo'yicha kengaytirilgan ko'rinishga o'tamiz. U yana bir marta bosilganda, biz standart holatga qaytamiz, shunda u kichik doiraga qaytadi, xuddi shu kod satrlari ikkala o'zaro ta'sirni boshqaradi:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Ushbu blokning birinchi satri avatar qatlamida sekin urish moslamasini o'rnatadi. Qanday qilib kesilgan bo'lsa va qanday o'lchamda bo'lishidan qat'i nazar, uni taqillatganda, keyingi bayonotlar ishlaydi.
Keyin biz har bir qatlamga murojaat qilamiz va holatlarni almashtirish uchun layer.states.next () usulidan foydalanamiz. Layer.states.next () dan foydalanganda Framer o'zining ichki standart animatsiya sozlamalarini ishlatadi. Bu juda qulay, ammo animatsiya egri chiziqlarini yaxshilab, yanada yaxshi animatsiyalarni yaratishingiz mumkin.
Biz kabi holatlardan foydalanganda layer.states.animationOptions xususiyati yordamida har bir animatsiya egri chizig'ini alohida-alohida o'zgartirishingiz mumkin. Faqatgina uchta tuzatish bilan animatsiya butunlay boshqacha his qiladi:
sketch.content.states.animationOptions = egri chiziq: "osonlik", vaqt: 0.3 headerMask.states.animationOptions = egri: "bahor (150, 20, 0)" mask.states.animationOptions = egri chiziq: "bahor (300, 30, 0) "
Yo'qolib borayotgan va tarkibga kiradigan tarkib qatlami uchun biz oldindan egri chiziqni oldindan o'rnatishni tanlaymiz, osonlashtiramiz va animatsiyaning davomiyligini 0,3 ga o'rnatamiz, shunda u juda tez bo'ladi.
HeaderMask va maskalari qatlamlari uchun kamon egri chizig'idan foydalaning. Bizning maqsadlarimiz uchun siz faqat bahor egri qiymatlari animatsiya tezligi va sakrashini o'zgartirishini bilishingiz kerak. Maska qatlami uchun qiymatlar uning animatsiyasini headerMask va tarkibdan ancha tezroq bajaradi. Bahor egri chizig'i sozlamalari haqida ko'proq ma'lumot olish uchun Framer hujjatlariga framerjs.com/docs murojaat qiling.
Haqiqiy mobil qurilmada sinab ko'ring
Haqiqiy qurilmada dizaynni ko'rish emulyatorlardan foydalanishdan ko'ra samaraliroq va siz o'zingizning ishingizda foyda ko'rasiz. Framer oynadagi xususiyatni o'z ichiga oladi, bu ichki server orqali prototipingizga URL manzilini taklif qiluvchi ichki server. Qurilmangiz yordamida URL manziliga tashrif buyurishingiz kifoya.
Siz o'zingizning dizaynlaringizni Framer-da prototiplash uchun bilishingiz kerak bo'lgan hamma narsani bilib oldingiz. Siz nimani kutmoqdasiz?
So'zlar: Jarrod Drisdeyl
Jarrod Drisdeyl muallif, dizayn bo'yicha maslahatchi, raqamli mahsulot ishlab chiqaruvchisi. Ushbu maqola dastlab net jurnalining 270-sonida chop etilgan.
Bu sizga yoqdimi? Buni o'qing!
- Sketch-da bosiladigan, jonli prototiplarni yarating
- Blogni qanday boshlash kerak
- Eng yaxshi foto muharrirlar
