ফ্রেমারে ইন্টারেক্টিভ প্রোটোটাইপগুলি ডিজাইন করুন

কন্টেন্ট

• স্কেচ থেকে আমদানি করুন
• মুখোশ এবং অবতার স্তর তৈরি করুন
• রাজ্যগুলি সংজ্ঞায়িত করুন
• রাজ্যের মধ্যে অ্যানিমেট
• এটি একটি বাস্তব মোবাইল ডিভাইসে চেষ্টা করুন

নকশার প্রোটোটাইপিংয়ের পিছনে যুক্তি নতুন নয় - এটি ব্রাউজারে ডিজাইনিং সম্পর্কিত সমস্ত গুজের মতো। আপনি যখন কোনও নকশাটিকে এর বাস্তব প্রসঙ্গে দেখেন তখন এটি সম্পূর্ণ আলাদা। কোনও ইন্টারফেস কীভাবে কাজ করবে এবং অনুভব করবে সে সম্পর্কে আপনাকে যখন অনুমান করতে হবে না তখন আপনি আরও ভাল সিদ্ধান্ত নেন। এটি অতিরিক্ত কাজের মতো শোনাতে পারে তবে আপনার ডিজাইনের কাজ দেখে আপনি যে অন্তর্দৃষ্টিগুলি অর্জন করতে পারেন তা অমূল্য।

ফ্রেমার একটি নতুন কোড ভিত্তিক প্রোটোটাইপিং সরঞ্জাম is আপনি সাধারণত স্কেচে (বা ফটোশপ) মকআপগুলি তৈরি করতে পারেন এবং সেগুলি ফ্রেমারে আমদানি করতে পারেন। তারপরে, একটি সামান্য কফিস্ক্রিপ্ট লিখুন এবং আপনি অনেক অর্জন করতে পারেন।

আমি আপনাকে দুটি ফ্রেমের আইওএস অ্যাপ প্রোটোটাইপের উদাহরণ ব্যবহার করে ফ্রেমারে প্রোটোটাইপিংয়ের বেসিকগুলি শিখিয়ে যাচ্ছি: একটি প্রোফাইল ভিউ এবং ব্যবহারকারীর অবতার চিত্রের জুম-ইন ভিউ। আমরা প্রোটোটাইপ করব যাতে কীভাবে প্রসারিত ফটো ভিউ খুলবে এবং বন্ধ হবে এবং আমরা এটিকে প্রাণবন্তও করব। এখানে অনলাইন ডেমো দেখুন (উত্স কোডটি দেখতে, কেবল উপরের-বাম কোণে আইকনটি ক্লিক করুন)। আপনার ফ্রেমারের নিখরচায় ট্রায়ালও দরকার হবে যা আপনি ফ্রেমারজ.কম এ পেতে পারেন।

স্কেচ থেকে আমদানি করুন

প্রথম পদক্ষেপটি স্কেচ থেকে ফ্রেমারে স্তরগুলি আমদানি করা। স্কেচে ডিজাইনটি খোলা থাকাকালীন ফ্রেমারের আমদানি বোতামটি ক্লিক করুন, এবং নিম্নলিখিত ডায়লগটিতে সঠিক ফাইলটি চয়ন করুন। ফ্রেমার প্রতিটি স্তর থেকে স্বয়ংক্রিয়ভাবে চিত্রগুলি আমদানি করবে এবং এ জাতীয় কোডের মাধ্যমে এগুলিকে অ্যাক্সেসযোগ্য করে তুলবে:

স্কেচ = ফ্রেমার.ইম্পোর্টার.লোড "আমদানি / প্রোফাইল"

আমদানিকৃত স্তরগুলিতে অ্যাক্সেস করতে সেই পরিবর্তনশীলটি ব্যবহার করুন। উদাহরণস্বরূপ, স্কেচ ফাইলে ‘বিষয়বস্তু’ নামের স্তরটি উল্লেখ করতে আপনি ফ্রেমারে স্কেচকন্টেন্ট টাইপ করবেন।

মুখোশ এবং অবতার স্তর তৈরি করুন

এই প্রোটোটাইপের মূল কাজটি হ'ল আলতো চাপানো অবস্থায় অবতার চিত্রটি প্রসারিত করা এবং তারপরে আবার আলতো চাপলে এটি বন্ধ করে দেওয়া। প্রথমে, আমরা দুটি মাস্ক স্তর তৈরি করব - একটি নেস্টেড মাস্ক বা অন্য মাস্কের অভ্যন্তরে একটি মাস্ক। একটি দুর্দান্ত, সূক্ষ্ম উদ্বোধন এবং সমাপনী প্রভাব তৈরি করতে আমরা একসাথে উভয় মুখোশ সঞ্চারিত করব। শিরোনামটি মাস্ক স্তর অবতারের ছবিটি আয়তক্ষেত্রের আকারে প্রসারিত হওয়ার পরে ক্রপ করবে এবং মুখোশ স্তরটি প্রোফাইল ভিউয়ের একটি ছোট্ট বৃত্তে ক্রপ করবে।

এইভাবে শিরোনামম্যাস্ক স্তরটি তৈরি করুন:

শিরোনামমাস্ক = নতুন স্তর প্রস্থ: স্ক্রিন.উইথ, উচ্চতা: 800 পটভূমি রঙ: "স্বচ্ছ"

কোডের প্রথম লাইনটি নতুন স্তর তৈরি করে এবং নাম দেয়। তারপরে, কফিস্ক্রিপ্টের ইনডেন্টেশন সিনট্যাক্স ব্যবহার করে আমরা প্রস্থ, উচ্চতা এবং পটভূমির বৈশিষ্ট্য সেট করি। আমরা একটি স্বচ্ছ পটভূমি ব্যবহার করব যাতে যখন অবতারের ছবি প্রসারিত হয় তখন নীচের স্তরগুলি প্রদর্শন করা হয়।

এর পরে, মাস্ক স্তরটি তৈরি করুন:

মাস্ক = নতুন স্তর প্রস্থ: 1000, উচ্চতা: 1000 ব্যাকগ্রাউন্ড রঙ: "স্বচ্ছ", সীমানা রেডিয়াস: 500 y: স্কেচ.হেডার.হাইট - 100 সুপারলায়ার: শিরোনামম্যাস্ক স্কেল: 0.2, উত্স: 0

আমরা একটি নতুন স্তর তৈরি করি এবং একইভাবে বৈশিষ্ট্য সেট করি। বৃহত্তর সীমানা রেডিওস এই স্তরটিকে একটি বৃত্ত তৈরি করে। আমরা মুখোশ স্তরটি অবস্থান করি যাতে এটি শিরোনাম স্তরটি ওভারল্যাপ করে, যা স্কেচ থেকে আমদানি করা হয়েছিল। আমরা কমিয়ে 20 শতাংশ বা 0.2 এও করব। শূন্যের একটি উত্স চিত্রের অ্যাঙ্কর পয়েন্ট বা রেজিস্ট্রেশনটিকে শীর্ষ প্রান্তে সেট করে।

অবশিষ্ট সম্পত্তি, সুপারলায়ার, এই নতুন স্তরের পিতামাতা হিসাবে আমরা তৈরি করা শিরোনামের মাস্ক স্তরটিকে সেট করে। ফ্রেমারে এইভাবে মাস্কিং কাজ করে। কেবল সুপারলায়ার সম্পত্তি সেট করুন, এবং পিতামাতার স্তরটি শিশুকে মুখোশ দেবে।

এর পরে, আমাদের অবতার গ্রাফিক তৈরি করতে হবে এবং এটি নতুন মুখোশের ভিতরে রাখতে হবে। ক্রপিংয়ের সীমানা জুম এবং অ্যানিমেট করতে আমরা ম্যানুয়ালি অবতার স্তরটি তৈরি করব। প্রকল্প ফোল্ডারের ‘চিত্রগুলি’ সাবফোল্ডারে একটি ছবি অনুলিপি করুন। তারপরে সেই চিত্রটি ব্যবহার করে একটি স্তর তৈরি করুন:

অবতার = নতুন স্তর চিত্র: "চিত্র / অবতার.পিএনজি" প্রস্থ: মাস্ক.উইথথ, উচ্চতা: মাস্ক.হাইট সুপারলায়ার: মাস্ক, ফোর্স 2 ডি: সত্য

লক্ষ্য করুন যে আমরা অবতারের সুপারলায়ারকে মাস্ক স্তর হিসাবে সেট করেছি। দু'জনেই এখন হেডারমাস্কের মধ্যে বাসা বেঁধেছে। আমরা প্রস্থ এবং উচ্চতাও সেট করেছিলাম যাতে চিত্রটি মুখোশযুক্ত অঞ্চলটি পুরোপুরি পূরণ করে।

সর্বশেষে, আমরা অ্যানিমেশনের জন্য যে মুখোশটি ব্যবহার করব তার Y অবস্থান সংরক্ষণ করার জন্য আমরা একটি পরিবর্তনশীল তৈরি করব। এটি স্ক্রিনের চেয়ে বড় হওয়ায় আমরা এটি অনুভূমিকভাবে কেন্দ্র করব।

মাস্কওয়াই = মাস্ক। মাস্ক.সেন্টারএক্স ()

রাজ্যগুলি সংজ্ঞায়িত করুন

একটি অ্যানিমেশন তৈরির প্রথম পদক্ষেপটি শুরু এবং শেষের অবস্থাগুলি সংজ্ঞায়িত করা হয়। ফ্রেমারে, রাজ্যগুলি কোডে লিখিত লিখিত ফ্রেমগুলির মতো। একটি রাষ্ট্র কেবলমাত্র সম্পত্তিগুলির সংগ্রহ। প্রতিটি স্তরের একটি ডিফল্ট অবস্থা রয়েছে। এই প্রোটোটাইপের জন্য, সেই ডিফল্ট অ্যানিমেশনের জন্য প্রাথমিক পয়েন্ট হিসাবে কাজ করবে, সুতরাং আমাদের কেবল প্রতিটি স্তরের জন্য একটি দ্বিতীয় রাষ্ট্র নির্ধারণ করতে হবে।

রাজ্যগুলির জন্য সিনট্যাক্স খুব সহজ। স্তরটি উল্লেখ করুন, স্তর.states.add () পদ্ধতিটি ব্যবহার করুন এবং তারপরে বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করার জন্য তালিকাবদ্ধ করুন।

sketch.content.states.add (আড়াল: {অস্বচ্ছতা: 0}) শিরোলেখ

সামগ্রীর স্তরের জন্য দ্বিতীয় রাষ্ট্র, যা স্কেচ থেকে আমদানি করা হয়েছিল এবং এতে অন্যান্য সমস্ত প্রোফাইল স্ক্রিন উপাদান রয়েছে, সম্পূর্ণ স্বচ্ছ হওয়া উচিত। এইভাবে, যখন অবতারটি প্রসারিত হবে, তখন আমাদের একটি কালো পটভূমি থাকবে এবং বাকী আমদানি করা আইকন এবং উপাদানগুলি প্রদর্শিত হবে।

কোডের দ্বিতীয় লাইনটি শিরোনামমাস্কের জন্য একটি রাজ্য তৈরি করে, যা এটিকে কেবলমাত্র এক ই ওয়াই পজিশনে নামিয়ে আনবে This অবতারের ছবিটি যখন বড় করা হয় তখন এটি শিরোনাম এবং বন্ধ বোতামটি স্ক্রিনের শীর্ষে প্রদর্শন করতে দেয়। এটি অবতারের ফটোগুলির ক্রপিং সীমানাও প্রাণবন্ত করে তুলবে।

শেষ অবধি, মাস্ক লেয়ারের জন্য একটি নতুন রাষ্ট্র উভয়ই এটি স্কেল করে এটিকে উপরে সরিয়ে নিয়ে যাবে, আমরা আগে তৈরি করা মাস্কওয়াই ভেরিয়েবলটি ব্যবহার করে। যেহেতু মুখোশ স্তরটির অরিজিনাল (বা অ্যাঙ্কর পয়েন্ট) এর শীর্ষ প্রান্ত, তাই আমাদের এটি 420 পিক্সেল দ্বারা উপরে সরানো দরকার যাতে চিত্রটির কেন্দ্রটি দৃশ্যমান হয়।

রাজ্যের মধ্যে অ্যানিমেট

আমরা সবে তৈরি হওয়া ডিফল্ট রাজ্যগুলি এবং নতুনগুলির মধ্যে অ্যানিমেট করতে আমাদের কেবল আরও চারটি লাইন কোডের প্রয়োজন। আমরা অবতার স্তরটিতে একটি ক্লিক হ্যান্ডলার সেট করব। যখন কোনও ব্যবহারকারী প্রোফাইল স্ক্রিনে এটি ট্যাপ করে, আমরা সাইক্লিং স্টেটগুলি দ্বারা প্রসারিত দৃশ্যে স্থানান্তর করব। এটি আবার আলতো চাপলে, আমরা চক্রটি আবার ডিফল্ট অবস্থায় ফিরে যাব তাই এটি একটি ছোট বৃত্তে ফিরে আসে code কোডের একই লাইনগুলি উভয় ইন্টারঅ্যাকশন পরিচালনা করে:

অবতার.অন ইভেন্টস.ক্লিক করুন, -> শিরোনামম্যাস.সেটেস.সেক্সট () মাস্ক.স্টেটস.নেক্সট () স্কেচ.কমেন্ট.স্টেটস.নেক্সট ()

এই ব্লকের প্রথম লাইনটি অবতার স্তরটিতে ক্লিক হ্যান্ডলার সেট আপ করে। যে কোনও সময় এটি আলতো চাপানো হয়, এটি কীভাবে ফসলযুক্ত হয় বা এটি কোন আকারের বিষয় নয়, এরপরে যে বিবৃতিগুলি তা চলবে।

তারপরে আমরা প্রতিটি স্তরকে কেবল রেফারেন্স করি এবং স্থিতি টগল করতে স্তর.states.next () পদ্ধতিটি ব্যবহার করি। যখন আপনি স্তর.states.next () ব্যবহার করেন, ফ্রেমারের অভ্যন্তরীণ ডিফল্ট অ্যানিমেশন সেটিংস ব্যবহার করা হবে। এটি অত্যন্ত সুবিধাজনক, তবে আপনি অ্যানিমেশন কার্ভগুলি স্নিগ্ধ করে আরও ভাল অ্যানিমেশন তৈরি করতে পারেন।

আমরা এখানে থাকার মতো রাজ্যগুলি ব্যবহার করার সময়, আপনি সহজেই প্রতিটি অ্যানিমেশন বক্ররেখাকে স্তর.স্টেটস.অ্যানিমেশনঅ্যাপশন সম্পত্তি ব্যবহার করে আলাদাভাবে পরিবর্তন করতে পারেন। মাত্র তিনটি সামান্য সামঞ্জস্যের সাথে অ্যানিমেশনটি সম্পূর্ণ আলাদা মনে হয়:

sketch.content.states.animationOptions = বক্ররেখা: "স্বাচ্ছন্দ্য", সময়: 0.3 শিরোনামম্যাস.সেটেস.অ্যানিমেশনঅ্যাপশন = বক্ররেখা: "বসন্ত (150, 20, 0)" মাস্ক.স্টেট.অ্যানিমেশনঅ্যাপশন = বক্র: "বসন্ত (300, 30, 0) "

যে কন্টেন্ট লেয়ারটি ফিকে হয়ে যাচ্ছে এবং এর জন্য আমরা একটি সাধারণ বক্ররেখা পূর্বনির্ধারিত, স্বাচ্ছন্দ্য এবং অ্যানিমেশন সময়কাল 0.3 এ সেট করব যাতে এটি খুব দ্রুত হয়।

হেডারমাস্ক এবং মাস্ক স্তরগুলির জন্য, একটি বসন্ত বক্ররেখা ব্যবহার করুন। আমাদের উদ্দেশ্যগুলির জন্য, আপনাকে কেবল এটি জানতে হবে যে বসন্তের বক্ররেখা মানগুলি অ্যানিমেশনের গতি এবং বাউন্স পরিবর্তন করে। মাস্ক স্তরের মানগুলি হ্যাডারম্যাস্ক এবং সামগ্রীর চেয়ে অনেক দ্রুত তার অ্যানিমেশনটি তৈরি করবে। বসন্তের বক্ররেখা সেটিংস সম্পর্কে আরও তথ্যের জন্য ফ্রেমারেজে ডকুমেন্টে ফ্রেমারের ডকুমেন্টেশন দেখুন।

এটি একটি বাস্তব মোবাইল ডিভাইসে চেষ্টা করুন

একটি বাস্তব ডিভাইসে নকশা দেখা ইমুলেটর ব্যবহারের চেয়ে অনেক বেশি কার্যকর এবং আপনি আপনার কাজের সুবিধাগুলি দেখতে পাবেন। ফ্রেমারে একটি মিরর বৈশিষ্ট্য অন্তর্ভুক্ত রয়েছে যা একটি অন্তর্নির্মিত সার্ভার যা আপনার স্থানীয় নেটওয়ার্কের মাধ্যমে আপনার প্রোটোটাইপের জন্য একটি URL সরবরাহ করে। আপনার ডিভাইসটি ব্যবহার করে কেবল URL টি দেখুন।

ফ্রেমারে নিজের ডিজাইনের প্রোটোটাইপ করার জন্য আপনার যা জানা দরকার তা আপনি শিখেছেন। তুমি কিসের জন্য অপেক্ষা করছো?

শব্দ: জারোদ ড্রাইসডেল

জারোড ড্রাইসডেল একজন লেখক, ডিজাইন পরামর্শদাতা, ডিজিটাল পণ্য নির্মাতা। এই নিবন্ধটি মূলত নেট ম্যাগাজিনের 270 সংখ্যায় প্রকাশিত হয়েছিল।

এই পছন্দ? এগুলো পড়াে!

• স্কেচে ক্লিকযোগ্য, লাইভ প্রোটোটাইপগুলি তৈরি করুন
• কিভাবে একটি ব্লগ শুরু করতে হয়
• সেরা ফটো সম্পাদক