ஃப்ரேமரில் ஊடாடும் முன்மாதிரிகளை வடிவமைக்கவும்

உள்ளடக்கம்

• ஸ்கெட்சிலிருந்து இறக்குமதி
• முகமூடி மற்றும் அவதார் அடுக்குகளை உருவாக்கவும்
• மாநிலங்களை வரையறுக்கவும்
• மாநிலங்களுக்கு இடையில் அனிமேட்
• உண்மையான மொபைல் சாதனத்தில் இதை முயற்சிக்கவும்

வடிவமைப்பு முன்மாதிரிக்கு பின்னால் உள்ள காரணம் புதியதல்ல - இது உலாவியில் வடிவமைப்பது குறித்த அனைத்து சலசலப்புகளுக்கும் சமம். ஒரு வடிவமைப்பை அதன் உண்மையான சூழலில் நீங்கள் காணும்போது, ​​அது முற்றிலும் வேறுபட்டது. ஒரு இடைமுகம் எவ்வாறு செயல்படும் மற்றும் உணரப்படும் என்பதைப் பற்றி நீங்கள் அனுமானங்களை எடுக்க வேண்டியதில்லை. இது கூடுதல் வேலை என்று தோன்றலாம், ஆனால் உங்கள் வடிவமைப்பு செயல்படுவதைப் பார்த்து நீங்கள் பெறக்கூடிய நுண்ணறிவு விலைமதிப்பற்றது.

ஃப்ரேமர் ஒரு புதிய குறியீடு அடிப்படையிலான முன்மாதிரி கருவியாகும். நீங்கள் வழக்கம்போல ஸ்கெட்சில் (அல்லது ஃபோட்டோஷாப்) மொக்கப்களை உருவாக்கலாம், அவற்றை ஃப்ரேமரில் இறக்குமதி செய்யலாம். பின்னர், ஒரு சிறிய காபிஸ்கிரிப்டை எழுதுங்கள், நீங்கள் நிறைய சாதிக்க முடியும்.

ஃபிரேமரில் முன்மாதிரியின் அடிப்படைகளை நான் உங்களுக்குக் கற்பிக்கப் போகிறேன், இரண்டு பார்வைகளைக் கொண்ட iOS பயன்பாட்டு முன்மாதிரியின் உதாரணத்தைப் பயன்படுத்தி: சுயவிவரக் காட்சி மற்றும் பயனரின் அவதார் படத்தின் பெரிதாக்கப்பட்ட பார்வை. விரிவாக்கப்பட்ட புகைப்படக் காட்சி எவ்வாறு திறக்கும் மற்றும் மூடப்படும் என்பதை நாங்கள் முன்மாதிரி செய்வோம், மேலும் அதை உயிரூட்டுவோம். ஆன்லைன் டெமோவை இங்கே காண்க (மூலக் குறியீட்டைக் காண, மேல் இடது மூலையில் உள்ள ஐகானைக் கிளிக் செய்க). ஃப்ரேமரின் இலவச சோதனையும் உங்களுக்குத் தேவைப்படும், இதை நீங்கள் framerjs.com இல் பெறலாம்.

ஸ்கெட்சிலிருந்து இறக்குமதி

முதல் படி ஸ்கெட்சிலிருந்து ஃப்ரேமரில் அடுக்குகளை இறக்குமதி செய்வது. வடிவமைப்பு ஸ்கெட்சில் திறந்திருக்கும் போது ஃப்ரேமரில் உள்ள இறக்குமதி பொத்தானைக் கிளிக் செய்து, பின்வரும் உரையாடலில் சரியான கோப்பைத் தேர்வுசெய்க. ஃப்ரேமர் ஒவ்வொரு அடுக்கிலிருந்தும் தானாகவே படங்களை இறக்குமதி செய்து இதுபோன்ற குறியீடு வழியாக அவற்றை அணுகும்:

sketch = Framer.Importer.load "இறக்குமதி / சுயவிவரம்"

இறக்குமதி செய்யப்பட்ட அடுக்குகளை அணுக அந்த மாறியைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, ஸ்கெட்ச் கோப்பில் ‘உள்ளடக்கம்’ என பெயரிடப்பட்ட அடுக்கைக் குறிப்பிட, நீங்கள் ஃப்ரேமரில் sketch.content ஐ தட்டச்சு செய்கிறீர்கள்.

முகமூடி மற்றும் அவதார் அடுக்குகளை உருவாக்கவும்

இந்த முன்மாதிரியின் முக்கிய செயல்பாடு, அவதார் படத்தைத் தட்டும்போது அதை விரிவுபடுத்துவதும், பின்னர் மீண்டும் தட்டும்போது அதை மூடுவதும் ஆகும். முதலில், நாங்கள் இரண்டு முகமூடி அடுக்குகளை உருவாக்குவோம் - ஒரு உள்ளமை முகமூடி அல்லது மற்றொரு முகமூடியின் உள்ளே ஒரு முகமூடி. ஒரு நல்ல, நுட்பமான திறப்பு மற்றும் நிறைவு விளைவை உருவாக்க இரு முகமூடிகளையும் ஒரே நேரத்தில் உயிரூட்டுவோம். ஹெட்டர்மாஸ்க் லேயர் அவதார் புகைப்படத்தை விரிவாக்கும்போது ஒரு செவ்வகத்திற்கு செதுக்கும், மேலும் முகமூடி அடுக்கு அதை சுயவிவரக் காட்சியில் ஒரு சிறிய வட்டத்திற்கு செதுக்கும்.

இது போன்ற தலைப்பு மாஸ்க் லேயரை உருவாக்கவும்:

headerMask = புதிய அடுக்கு அகலம்: திரை.அகலம், உயரம்: 800 பின்னணி வண்ணம்: "வெளிப்படையானது"

குறியீட்டின் முதல் வரி புதிய அடுக்கை உருவாக்கி பெயரிடுகிறது. பின்னர், காபிஸ்கிரிப்ட்டின் உள்தள்ளல் தொடரியல் பயன்படுத்தி, அகலம், உயரம் மற்றும் பின்னணி பண்புகளை அமைப்போம். நாங்கள் வெளிப்படையான பின்னணியைப் பயன்படுத்துவோம், எனவே அவதார் புகைப்படம் விரிவடையும் போது கீழே உள்ள அடுக்குகள் காண்பிக்கப்படும்.

அடுத்து, முகமூடி அடுக்கை உருவாக்கவும்:

முகமூடி = புதிய அடுக்கு அகலம்: 1000, உயரம்: 1000 பின்னணி வண்ணம்: "வெளிப்படையானது", பார்டர் ரேடியஸ்: 500 ஒய்: ஸ்கெட்ச்.ஹெடர்.ஹைட் - 100 சூப்பர் லேயர்: ஹெடர்மேஸ்க் அளவுகோல்: 0.2, ஒரிஜினி: 0

நாங்கள் ஒரு புதிய லேயரை உருவாக்கி, பண்புகளை அதே வழியில் அமைப்போம். பெரிய பார்டர் ரேடியஸ் இந்த அடுக்கை ஒரு வட்டமாக்குகிறது. நாங்கள் முகமூடி அடுக்கை நிலைநிறுத்துகிறோம், எனவே இது தலைப்பு அடுக்கை ஒன்றுடன் ஒன்று சேர்க்கிறது, இது ஸ்கெட்சிலிருந்து இறக்குமதி செய்யப்பட்டது. நாங்கள் 20 சதவிகிதம் அல்லது 0.2 ஆகக் குறைப்போம். பூஜ்ஜியத்தின் ஒரு தோற்றம் படத்தின் நங்கூரம் புள்ளி அல்லது பதிவை மேல் விளிம்பில் அமைக்கிறது.

மீதமுள்ள சொத்து, சூப்பர் லேயர், இந்த புதிய லேயரின் பெற்றோராக நாங்கள் உருவாக்கிய ஹெடர்மேஸ்க் லேயரை அமைக்கிறது. ஃப்ரேமரில் மறைத்தல் எவ்வாறு செயல்படுகிறது. சூப்பர் லேயர் சொத்தை வெறுமனே அமைக்கவும், பெற்றோர் அடுக்கு குழந்தையை மறைக்கும்.

அடுத்து, அவதார் கிராஃபிக் ஒன்றை உருவாக்கி அந்த புதிய முகமூடிகளுக்குள் வைக்க வேண்டும். பயிர் எல்லைகளை பெரிதாக்க மற்றும் உயிரூட்ட, அவதார் லேயரை கைமுறையாக உருவாக்குவோம். திட்டக் கோப்புறையின் ‘படங்கள்’ துணைக் கோப்புறையில் ஒரு புகைப்படத்தை நகலெடுக்கவும். அந்த படத்தைப் பயன்படுத்தி ஒரு அடுக்கை உருவாக்கவும்:

avatar = புதிய அடுக்கு படம்: "images / avatar.png" அகலம்: mask.width, height: mask.height superLayer: mask, force2d: true

அவதாரத்தின் சூப்பர் லேயரை மாஸ்க் லேயராக அமைத்திருப்பதைக் கவனியுங்கள். இரண்டுமே இப்போது தலைப்பு மாஸ்க்குள் கூடு கட்டப்பட்டுள்ளன. நாங்கள் அகலத்தையும் உயரத்தையும் அமைத்துள்ளோம், எனவே படம் மறைக்கப்பட்ட பகுதியை முழுமையாக நிரப்புகிறது.

கடைசியாக, அனிமேஷனுக்காக நாங்கள் பயன்படுத்தும் முகமூடியின் Y நிலையை சேமிக்க ஒரு மாறியை உருவாக்குவோம். திரையை விட பெரியதாக இருப்பதால் அதை கிடைமட்டமாக மையப்படுத்துவோம்.

maskY = mask.y mask.centerX ()

மாநிலங்களை வரையறுக்கவும்

அனிமேஷனை உருவாக்குவதற்கான முதல் படி தொடக்க மற்றும் இறுதி நிலைகளை வரையறுப்பதாகும். ஃப்ரேமரில், மாநிலங்கள் குறியீட்டில் எழுதப்பட்ட கீஃப்ரேம்கள் போன்றவை. ஒரு மாநிலம் என்பது சொத்துக்களின் தொகுப்பு மட்டுமே. ஒவ்வொரு அடுக்குக்கும் இயல்புநிலை நிலை உள்ளது. இந்த முன்மாதிரிக்கு, அந்த இயல்புநிலை அனிமேஷனின் தொடக்க புள்ளியாக செயல்படும், எனவே ஒவ்வொரு அடுக்குக்கும் இரண்டாவது நிலையை மட்டுமே அமைக்க வேண்டும்.

மாநிலங்களுக்கான தொடரியல் மிகவும் எளிது. லேயரைக் குறிப்பிடவும், layer.states.add () முறையைப் பயன்படுத்தவும், பின்னர் சேர்க்க வேண்டிய பண்புகளை பட்டியலிடுங்கள்.

sketch.content.states.add (மறை: {ஒளிபுகாநிலை: 0}) headerMask.states.add (நகர்த்து: {y: 120}) mask.states.add (வளர: {அளவு: 1.1, y: maskY - 420})

உள்ளடக்க அடுக்குக்கான இரண்டாவது நிலை, இது ஸ்கெட்சிலிருந்து இறக்குமதி செய்யப்பட்டு மற்ற எல்லா சுயவிவரத் திரை கூறுகளையும் கொண்டுள்ளது, இது முற்றிலும் வெளிப்படையானதாக இருக்க வேண்டும். இந்த வழியில், அவதாரம் விரிவாக்கப்படும்போது, ​​எங்களுக்கு கருப்பு பின்னணி இருக்கும், மீதமுள்ள இறக்குமதி செய்யப்பட்ட ஐகான்கள் மற்றும் கூறுகள் காண்பிக்கப்படும்.

குறியீட்டின் இரண்டாவது வரி ஹெடர்மேஸ்க்கு ஒரு நிலையை உருவாக்குகிறது, இது அதை 120 இன் Y நிலைக்கு நகர்த்தும். இது அவதார் புகைப்படம் பெரிதாகும்போது தலைப்பு மற்றும் நெருங்கிய பொத்தானை திரையின் மேற்புறத்தில் காட்ட அனுமதிக்கும். இது அவதார் புகைப்படத்தின் பயிர் எல்லைகளையும் உயிரூட்டுகிறது.

கடைசியாக, முகமூடி அடுக்குக்கான ஒரு புதிய நிலை, நாம் முன்னர் உருவாக்கிய மாஸ்க்ஒய் மாறியைப் பயன்படுத்தி அதை அளவிட மற்றும் மேலே நகர்த்தும். முகமூடி அடுக்கின் ஒரிஜினி ஒய் (அல்லது நங்கூரம் புள்ளி) அதன் மேல் விளிம்பாக இருப்பதால், அதை 420 பிக்சல்கள் மூலம் நகர்த்த வேண்டும், இதனால் படத்தின் மையம் தெரியும்.

மாநிலங்களுக்கு இடையில் அனிமேட்

இயல்புநிலை நிலைகளுக்கும், இப்போது நாம் உருவாக்கிய புதியவற்றுக்கும் இடையில் உயிரூட்ட, எங்களுக்கு இன்னும் நான்கு கோடுகள் தேவை. அவதார் லேயரில் கிளிக் ஹேண்ட்லரை அமைப்போம். ஒரு பயனர் அதை சுயவிவரத் திரையில் தட்டும்போது, ​​சைக்கிள் ஓட்டுவதன் மூலம் விரிவாக்கப்பட்ட பார்வைக்கு மாறுவோம். இது மீண்டும் தட்டும்போது, ​​இயல்புநிலை நிலைகளுக்கு மீண்டும் சுழற்சி செய்வோம், எனவே இது ஒரு சிறிய வட்டத்திற்குத் திரும்பும். அதே குறியீட்டின் கோடுகள் இரு தொடர்புகளையும் கையாளுகின்றன:

avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()

இந்த தொகுதியின் முதல் வரி அவதார் லேயரில் கிளிக் ஹேண்ட்லரை அமைக்கிறது. எந்த நேரத்திலும் அதைத் தட்டினால், அது எவ்வாறு வெட்டப்பட்டாலும் அல்லது எந்த அளவு இருந்தாலும், தொடர்ந்து வரும் அறிக்கைகள் இயங்கும்.

ஒவ்வொரு அடுக்கையும் வெறுமனே குறிப்பிடுகிறோம், மேலும் நிலைகளை மாற்ற அடுக்கு.ஸ்டேட்ஸ்.நெக்ஸ்ட் () முறையைப் பயன்படுத்துகிறோம். நீங்கள் layer.states.next () ஐப் பயன்படுத்தும்போது, ​​ஃப்ரேமர் அதன் உள் இயல்புநிலை அனிமேஷன் அமைப்புகளைப் பயன்படுத்தும். இது மிகவும் வசதியானது, ஆனால் அனிமேஷன் வளைவுகளை மேம்படுத்துவதன் மூலம் இன்னும் சிறந்த அனிமேஷன்களை உருவாக்கலாம்.

நாங்கள் இங்கே இருப்பதைப் போன்ற மாநிலங்களைப் பயன்படுத்தும் போது, ​​லேயர்.ஸ்டேட்ஸ்.அனிமேஷன்ஆப்ஷன்ஸ் சொத்தைப் பயன்படுத்தி ஒவ்வொரு அனிமேஷன் வளைவையும் தனித்தனியாக மாற்றலாம். மூன்று சிறிய மாற்றங்களுடன், அனிமேஷன் முற்றிலும் மாறுபட்டதாக உணர்கிறது:

sketch.content.states.animationOptions = வளைவு: "எளிமை", நேரம்: 0.3 headerMask.states.animationOptions = வளைவு: "வசந்தம் (150, 20, 0)" mask.states.animationOptions = வளைவு: "வசந்த (300, 30, 0) "

மறைந்து கொண்டிருக்கும் உள்ளடக்க அடுக்குக்கு, எளிமையான வளைவு முன்னமைவு, எளிதாக்குதல் மற்றும் அனிமேஷன் கால அளவை 0.3 ஆக அமைப்போம், இதனால் இது மிக விரைவானது.

தலைப்பு மாஸ்க் மற்றும் முகமூடி அடுக்குகளுக்கு, ஒரு வசந்த வளைவைப் பயன்படுத்தவும். எங்கள் நோக்கங்களுக்காக, வசந்த வளைவு மதிப்புகள் அனிமேஷனின் வேகத்தையும் துள்ளலையும் மாற்றுகின்றன என்பதை நீங்கள் அறிந்து கொள்ள வேண்டும். மாஸ்க் லேயருக்கான மதிப்புகள் அதன் அனிமேஷனை ஹெடர் மாஸ்க் மற்றும் உள்ளடக்கத்தை விட மிக வேகமாக செய்யும். வசந்த வளைவு அமைப்புகளைப் பற்றிய கூடுதல் விவரங்களுக்கு, framerjs.com/docs இல் உள்ள Framer ஆவணங்களைப் பார்க்கவும்.

உண்மையான மொபைல் சாதனத்தில் இதை முயற்சிக்கவும்

உண்மையான சாதனத்தில் வடிவமைப்பைப் பார்ப்பது முன்மாதிரிகளைப் பயன்படுத்துவதை விட மிகவும் பயனுள்ளதாக இருக்கும், மேலும் உங்கள் வேலையில் உள்ள நன்மைகளைப் பார்ப்பீர்கள். ஃப்ரேமர் ஒரு கண்ணாடி அம்சத்தை உள்ளடக்கியது, இது உங்கள் உள்ளூர் நெட்வொர்க்கில் உங்கள் முன்மாதிரிக்கு ஒரு URL ஐ வழங்கும் உள்ளமைக்கப்பட்ட சேவையகம். உங்கள் சாதனத்தைப் பயன்படுத்தி URL ஐப் பார்வையிடவும்.

ஃப்ரேமரில் உங்கள் சொந்த வடிவமைப்புகளை முன்மாதிரி செய்ய நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தையும் நீங்கள் கற்றுக்கொண்டீர்கள். எதற்காக காத்திருக்கிறாய்?

சொற்கள்: ஜார்ரோட் ட்ரைஸ்டேல்

ஜார்ரோட் ட்ரைஸ்டேல் ஒரு ஆசிரியர், வடிவமைப்பு ஆலோசகர், டிஜிட்டல் தயாரிப்பு தயாரிப்பாளர். இந்த கட்டுரை முதலில் நிகர இதழின் 270 இதழில் வெளியிடப்பட்டது.

இதை விரும்பினீர்களா? இவற்றைப் படியுங்கள்!

• ஸ்கெட்சில் கிளிக் செய்யக்கூடிய, நேரடி முன்மாதிரிகளை உருவாக்கவும்
• வலைப்பதிவை எவ்வாறு தொடங்குவது
• சிறந்த புகைப்பட தொகுப்பாளர்கள்