Мазмун
- Эскизден импорттоо
- Маска жана аватар катмарларын түзүү
- Штаттарды аныктаңыз
- Мамлекеттердин ортосундагы анимация
- Чыныгы мобилдик түзмөктө колдонуп көрүңүз
Дизайн прототипинин негизи жаңы деле эмес - бул браузерде дизайнды иштеп чыгуу боюнча ызы-чуу менен бирдей. Дизайнды чыныгы контекстте көргөндө, ал такыр башкача. Интерфейстин иштеши жана сезилиши жөнүндө божомолдорду айтууга туура келбегенде, сиз жакшы чечимдерди кабыл аласыз. Бул кошумча жумуш сыяктуу сезилиши мүмкүн, бирок сиздин дизайныңыздын иштешин көрүп, түшүнө турган түшүнүктөр баа жеткис.
Framer - бул протоколго негизделген жаңы коддук курал. Sketch (же Photoshop) программасында макеттерди адаттагыдай эле түзүп, Framerге импорттой аласыз. Андан кийин, бир аз CoffeeScript жазып, сиз көп нерсени аткара аласыз.
Мен сизге Framerде прототиптин негиздерин үйрөтмөкмүн, эки просмотры бар iOS тиркемесинин прототипинин мисалын колдонуп: профиль көрүнүшү жана колдонуучунун аватар сүрөтүнүн кичирейтилген көрүнүшү. Кеңейтилген сүрөт көрүнүшү кантип ачылып-жабыларын прототиптеп, аны жандандыра беребиз. Онлайн демонстрациясын бул жерден көрүңүз (баштапкы кодду көрүү үчүн, жогорку сол бурчтагы сүрөтчөнү чыкылдатыңыз). Ошондой эле Framerjs.com сайтынан ала турган Framer программасынын акысыз сыноосу керек болот.
Эскизден импорттоо
Биринчи кадам - Sketchден Framerге катмарларды импорттоо. Дизайн Sketch ачык турганда, Framerдеги Импорттоо баскычын чыкылдатып, андан кийинки диалогдон туура файлды тандаңыз. Framer сүрөттөрдү ар бир катмардан автоматтык түрдө импорттойт жана аларды төмөнкүдөй код аркылуу жеткиликтүү кылат:
sketch = Framer.Importer.load "import / profile"
Импорттолгон катмарларга жетүү үчүн ошол өзгөрмөнү колдонуңуз. Мисалы, Sketch файлындагы 'content' деп аталган катмарга шилтеме берүү үчүн, Framer'ге sketch.content деп тересиз.
Маска жана аватар катмарларын түзүү
Бул прототиптин негизги милдети - аватардын сүрөтүн таптап жатканда кеңейтүү, андан кийин дагы бир жолу басканда жабуу. Биринчиден, биз эки маска катмарын түзөбүз - уяланган маска, же башка масканын ичиндеги маска. Жакшы, тымызын ачылуу жана жабылуу эффектин түзүү үчүн эки масканы тең бирден кыймылдатабыз. HeaderMask катмары аватар сүрөтүн кеңейткенде төрт бурчтукка кесет, ал эми маска катмары аны профилдин көрүнүшү боюнча кичинекей тегерек кылып кесет.
HeaderMask катмарын мындай түзүңүз:
headerMask = жаңы Катмардын туурасы: Screen.width, height: 800 backgroundColor: "тунук"
Коддун биринчи сабы жаңы катмарды жаратат жана аттайт. Андан кийин, CoffeeScript чегинүү синтаксисин колдонуп, туурасы, бийиктиги жана фондук касиеттерин орноттук. Аватар сүрөтү кеңейтилгенде, астындагы катмарлар ачык-айкын фон колдонобуз.
Андан кийин, маска катмарын түзүңүз:
маска = жаңы Катмардын туурасы: 1000, бийиктик: 1000 фон Түстөр: "тунук", чек араРадиус: 500 y: sketch.header.height - 100 суперКабат: headerМаска масштабы: 0.2, келип чыгышы Y: 0
Биз жаңы катмар түзүп, касиеттерди дагы ушундай жол менен орнотобуз. Чоң borderRadius бул катмарды тегерек кылат. Маска катмарын Sketch дан импорттолгон баш катмарынын үстүнөн жайгаштыргыдай кылып жайгаштырабыз. Ошондой эле, биз 20 пайызга чейин, же 0,2 чейин масштабдуу болот. Нөлдүн келип чыгышы жогору жактагы сүрөттүн бекитилген жерин же каттоосун орнотот.
Калган касиет, superLayer, бул жаңы катмардын энеси катары биз жараткан headerMask катмарын орнотот. Framerде маскировка ушундайча иштейт. Жөн гана superLayer касиетин койсоңуз, анда ата-эненин катмары баланы маска кылат.
Андан кийин, биз аватар графикасын түзүп, аны ошол жаңы маскаларга жайгаштырышыбыз керек. Кесилген чектерди чоңойтуу жана жандандыруу үчүн аватар катмарын кол менен түзөбүз. Сүрөттү долбоордун папкасынын 'сүрөттөр' подкладкасына көчүрүңүз. Андан кийин ошол сүрөттү колдонуп катмар түзүңүз:
avatar = new Layer image: "images / avatar.png" туурасы: маска. туурасы, бийиктиги: маска. бийиктик суперЛайер: маска, force2d: чыныгы
Аватардын superLayer масканы катмар кылып койгонубузга көңүл буруңуз. Азыр экөө тең headerMask ичине салынган. Ошондой эле, сүрөт жана маскаланган жерди толугу менен толтурушу үчүн, анын туурасы менен бийиктигин койдук.
Акырында, анимация үчүн колдоно турган масканын Y абалын сактоо үчүн өзгөрмө түзөбүз. Экранга караганда чоңураак болгондуктан, аны горизонталдуу борборго жайгаштырабыз.
maskY = mask.y mask.centerX ()
Штаттарды аныктаңыз
Анимацияны түзүүнүн биринчи кадамы - башталуу жана аяктоо абалын аныктоо. Framerде штаттар код менен жазылган негизги кадрлар сыяктуу. Мамлекет - бул жөн гана касиеттердин жыйындысы. Ар бир катмардын демейки абалы бар. Бул прототип үчүн анимация анимациянын башталышы болуп калат, андыктан ар бир катмар үчүн экинчи абалды гана орнотушубуз керек.
Мамлекет үчүн синтаксис өтө жөнөкөй. Катмарга шилтеме берип, layer.states.add () ыкмасын колдонуп, андан кийин кошула турган касиеттерин тизмелеп бериңиз.
sketch.content.states.add (жашыруу: {тунуктук: 0}) headerMask.states.add (жылдыруу: {y: 120}) mask.states.add (өсүү: {масштаб: 1.1, y: maskY - 420})
Sketchтен алынып келинген жана башка бардык профилдик экран элементтерин камтыган мазмундун катмары үчүн экинчи абал толугу менен ачык-айкын болушу керек. Ошентип, аватар кеңейтилгенде, биз кара фонго ээ болобуз жана калган импорттук сүрөтчөлөр менен элементтер көрсөтүлөт.
Коддун экинчи сабы headerMask үчүн абалды жаратат, ал аны жөн эле Y абалына которот, ал 120 болот. Бул аватардын сүрөтү чоңойгондо, аталышты жана жабуу баскычын экрандын жогору жагында көрсөтүүгө мүмкүндүк берет. Ал ошондой эле аватар сүрөтүнүн кесилишинин чектерин жандандырат.
Акырында, маска катмарынын жаңы абалы масштабын көтөрүп, жогору көтөрөт, биз мурда жараткан maskY өзгөрүлмөсүн колдонобуз. Маска катмарынын originY (же бекитүү чекити) анын жогорку чети болгондуктан, сүрөттүн борбору көрүнүп турушу үчүн, биз аны 420 пикселге көтөрүшүбүз керек.
Мамлекеттердин ортосундагы анимация
Демейки абалдар менен жаңы түзүлгөн мамлекеттердин ортосунда кыймылдоо үчүн, бизге дагы төрт сап код керек. Аватар катмарына чыкылдаткычты орнотобуз. Колдонуучу аны профиль экранына таптап койгондо, биз велосипед тебүү боюнча кеңейтилген көрүнүшкө өтөбүз. Кайра чыкылдатканда, биз айлана-чөйрөнү кайтарып алабыз, андыктан ал кичинекей айланага кайтып келет.
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Бул блоктун биринчи сабы аватар катмарына чыкылдатуу иштеткичти орнотот. Каалаган убакта, ал кандайча кесилгенине жана кандай көлөмдө экенине карабастан, андан кийинки билдирүүлөр иштей баштайт.
Андан кийин биз жөн гана ар бир катмарга шилтеме берип, абалды которуштуруу үчүн layer.states.next () ыкмасын колдонобуз. Layer.states.next () колдонгондо, Framer анын ички демейки анимация орнотууларын колдонот. Бул абдан ыңгайлуу, бирок анимациянын ийилген жерлерин тактоо менен андан да мыкты анимацияларды жасай аласыз.
Биздегидей абалды колдонууда, layer.states.animationOptions касиети аркылуу анимациянын ар бир ийри сызыгын өзүнчө оңой эле өзгөртө аласыз. Үч гана жөндөө менен анимация таптакыр башкача сезилет:
sketch.content.states.animationOptions = curve: "ease", time: 0.3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Өчүп бара жаткан мазмундун катмары үчүн, биз алдын-ала жөнөкөй ийри сызыкты тандап, анимациянын узактыгын 0,3кө койдук, ошондо ал тез болот.
Маска жана маска катмарлары үчүн жазгы ийри сызыкты колдонуңуз. Биздин максаттар үчүн, сиз жаздын ийри мааниси анимациянын ылдамдыгын жана секирүүсүн өзгөртө тургандыгын билишиңиз керек. Маска катмарынын маанилери анын анимациясын headerMask жана камтылгандарга караганда бир кыйла тезирээк кылат. Жазгы ийри сызыктын орнотуулары жөнүндө көбүрөөк маалымат алуу үчүн, Framer документтерин framerjs.com/docs дарегинен караңыз.
Чыныгы мобилдик түзмөктө колдонуп көрүңүз
Дизайнды чыныгы шаймандан көрүү эмуляторлорду колдонуудан кыйла эффективдүү болот, ошондо сиз анын ишинин артыкчылыгын көрө аласыз. Framer күзгү өзгөчөлүгүн камтыйт, ал орнотулган сервер, жергиликтүү протоколуңузга протоколуңузга URL сунуштайт. Жөн гана түзмөгүңүздү колдонуп, URL дарегине баш багыңыз.
Framer'де өз дизайныңыздын прототибин түзүү үчүн сиз билишиңиз керек болгон нерселердин бардыгын үйрөнүп алдыңыз. Эмнени күтүп жатасың?
Сөздөр: Джаррод Драйсдейл
Джаррод Драйсдейл - автор, дизайнер-консультант, санариптик продукция чыгаруучу. Бул макала алгач net журналынын 270-санында жарыяланган.
Бул жактыбы? Буларды оку!
- Эскизде чыкылдатуучу, жандуу прототиптерди түзүү
- Блогду кантип баштоо керек
- Мыкты сүрөт редакторлору
