আইওএসে হোয়াটসঅ্যাপের মতো অ্যানিমেশন তৈরি করা হচ্ছে

আপনার অ্যাপের জন্য হোয়াটসঅ্যাপের মতো ফ্লুইড এবং সামঞ্জস্যপূর্ণ ইউআইটিববার এবং ইউআইটিউলবার অ্যানিমেশন কীভাবে তৈরি করবেন।

হোয়াটসঅ্যাপের একটি ইউআইটিববার থেকে একটি ইউআইটিউলবারে স্থানান্তর।নমুনা বাস্তবায়ন।

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

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

প্রশ্নে ভিউ হায়ারার্কি।

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

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

বিশ্লেষণ

প্রথমে আমাদের যাচাই করা উচিত হোয়াটসঅ্যাপ কীভাবে কাজ করে:

হোয়াটসঅ্যাপের অ্যানিমেশনটি এর মূল গতি 10% এ ধীর হয়ে গেছে

আমি যা বলতে পারি তা থেকে, হোয়াটসঅ্যাপ ইউআইটিববারকে ভিতরে বা বাইরে ফিকে করে এবং একই সাথে সম্পাদনা মোডের উপর নির্ভর করে ইউআইটিউলবারটিকে উপরে বা নীচে সরায় up

অতএব আমাদের কর্ম পরিকল্পনাটি ঠিক উপরেরটি করা do

পরিকল্পনা

এগুলি আমাদের প্রয়োজনীয়তা:

  • ইউআইএনভিগেশনবারকে আইওএস 11 এর বড় বড় শিরোনাম ব্যবহার করার অনুমতি দেওয়া উচিত
  • ইউআইটিউলবার এটি ব্যবহার না করা অবস্থায় লুকানো উচিত
  • ইউআইটিববারের জন্য আমাদেরও একই কাজ করা উচিত

আক্রমণ

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

কেন?

দেখা যাচ্ছে যে বড় শিরোনামগুলির জন্য ডিফল্ট অ্যানিমেশন এবং সিস্টেম ব্যবহার করে কোনও সাধারণ পজিশনিং কোড আপনার ইউআইটিউলবারের জন্য লিখতে পারে up

নিষ্পাপ পদ্ধতির

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

তবে, যেমন আমি উপরে বলেছি, আপনি যদি বড় শিরোনাম ব্যবহার করেন তবে তা সত্যিই কাজ করে না।

বড় শিরোনাম যখন অ্যানিমেটেড হয় তখন কীভাবে ইউআইটিউলবার সরানো হয় তা লক্ষ্য করুন।

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

সমাধান

এটি রোধ করার জন্য, আমাদের ভিউ কন্ট্রোলারের সাথে যুক্ত ইউআইএনএভিগেশন কন্ট্রোলার অবজেক্ট দ্বারা সরবরাহিত ডিফল্টটি ব্যবহার না করে ম্যানুয়ালি একটি ইউআইটিউলবার যুক্ত করা দরকার।

প্রথমে আমরা এটি অলসভাবে তৈরি করি:

বেসরকারী অলস ভার টুলবার: ইউআইটিুলবার = U ইউআইটিুলবার ()} () ফেরান

এবং তারপরে ViewDidLoad এ তার সীমাবদ্ধতাগুলি সেট আপ করুন:

প্রাইভেট ভার টুলবারকন্সট্রেনটস = [এনএসলয়আউটকন্ট্রেন্ট] ()
...
ওভাররাইড ফানক ভিউডিডলোড () {সুপার.ভিউডিডলড () ... নাভবার.প্রেফিয়ারস লার্জটাইটেলস = সত্য নেভিগেশনকন্ট্রোলার! : self.view.leftAncor), ToolBar.rightAunchor.constraint (equalTo: self.view.rightAunchor), ToolBar.bottomAunchor.constraint (equalTo: self.view.bottomAunchor), টুলবার.টপঅ্যানচারকন্ট্রেন্ট (সমানত: ট্যাববার.টেনট্রেন্ট) ])}

তারপরে আমরা কিছু গণিত বৈশিষ্ট্য তৈরি করি যা আমরা কাস্টম ইউআইটিউলবার সঠিকভাবে সেটআপ করতে স্যাম্পল ভিউ কন্ট্রোলার জুড়ে ব্যবহার করি:

প্রাইভেট ভার্স স্ক্রিনহাইট: সিজিফ্লোট U ফিরিয়ে দিন ইউআইএস স্ক্রিন.মাইন.বাউন্ডস.হাইট} প্রাইভেট ভার টুলবারিপোস: সিজিফ্লোট {যদি বর্তমান স্টেট ==। সাধারণ {স্ক্রিনহাইট ight // এখানে অন্য রাজ্যের জন্য আদর্শভাবে পরীক্ষা করুন, তবে যেহেতু আমাদের কেবল দুটি আছে, তাই এটি রাখুন / / সরল; এর মতো কিছু করতে হবে: অন্যথায় যদি বর্তমানের স্টেট ==। সম্পাদনা করুন {অন্যথায় screen স্ক্রিনহাইট ফেরান - টুলবার.ফ্রেম.হাইট}}

অবশেষে, আমরা এই গণিত বৈশিষ্ট্যগুলি ইউআইটিউলবার এবং / অথবা ইউআইটিববার ক্ষেত্রে সঠিকভাবে অবস্থানের জন্য ব্যবহার করি। সুতরাং ব্যবহারকারী যখন সম্পাদনা বা সম্পন্ন বোতামটি ট্যাপ করে:

অ্যানিমেশনটি আমরা চেয়েছিলাম।

এবং এই কোড দিয়ে এটি অর্জন করা হয়েছে (আংশিক, তবে বেশিরভাগ ক্ষেত্রে):

@ আইবিএশন ফানক এডিটবিটিএনটিউচআপ (_ প্রেরক: যে কোনও) {// এডিটিং মোডে স্যুইচ করুন যদি বর্তমান স্টেট ==। সাধারণ {কারেন্টস্টেট = .এডিট ফেইড (ট্যাববার, টু আলফা: 0, সহ: মেয়াদ: 0.2, এবং লুকান: সত্য) ইউআইভিউ.অনিমেট (সময়কাল সহ) : ০.২, অ্যানিমেশন: self // এডিট সেট করুন সেল্ফ.ইভিগেশনআইটেমটিফট বারবার্টন আইটেম = ইউআইবারবারটন আইটেম (বারবটনসিসটেম আইটেম: .ডোন, টার্গেট: স্ব, অ্যাকশন: # সিলেক্টর (সেলফঅনডোনবটনটচআপ) // ফেড আউট + বিটিএন সেলফ্ল্যাশন বিটিএস.আইডি = মিথ্যা স্ব.প্লসবিটিএন.টিন্ট কালার = ইউআইকিওলআর.ক্রিট // টুলবারটি পজিশন করুন স্ব.টোলবার.ফ্রেম.রিগিন.ই = সেলফ.টোলবারিপোস})} ob @objc ফানকডোনবিটিএন টুচআপ (_ প্রেরক: যে কোনও) {// সাধারণ অবস্থায় স্যুইচ করুন যদি কারেন্টস্টেট == .এডিট করুন {কারেন্টস্টেট =। সাধারণ ফেইড (ট্যাববার, টু আলফা: 1, সহ: সময়কাল: 0.2, এবং লুকান: মিথ্যা) ইউআইভিউ.অ্যানিম্যাট (সহকালীন: 0.2, অ্যানিমেশন: {// সম্পাদনা সম্পাদনা করুন স্ব.ব্যাভিগেশন আইটেমলিটবার্ট বাটন আইটেম = UIBarButtonItem (বারবাটনসিসটেম আইটেম: .ডিট, লক্ষ্য: স্ব, ক্রিয়া: # নির্বাচনকারী (self.onEditBtnTouchUp)) // ফেড ইন + বিটিএন সেল.প্লাসবিটিএন.আইইনেবল = সত্য এস elf.plusBtn.tintColor = nil // সরঞ্জামদণ্ডে অবস্থান করুন self.toolBar.frame.origin.y = self.toolBarYPos})}

উপসংহার

চূড়ান্ত ফলাফলটি এর মতো দেখতে হবে:

আমি নমুনা প্রকল্পের সাথে একটি সংগ্রহস্থল সেটআপ করেছি যাতে আপনি গিয়ে পুরো কোডটি পড়তে পারেন:

আমি এটি পরীক্ষা করে দেখার পরামর্শ দিচ্ছি, যেহেতু আমি ইচ্ছাকৃতভাবে বংশবৃদ্ধির স্বার্থে নিবন্ধের কিছু বিবরণ হারিয়েছি।

এটি বের করতে আমার অনেক সময় লেগেছে, কারণ বিভিন্ন ইউআইকিট উপাদানগুলির মধ্যে ইন্টারপ্লে আমার প্রত্যাশার মতো কার্যকর হয়নি।

আইওএসের উপর সুইফটে আরও উন্নত ইউআই ইন্টারঅ্যাকশন বিকাশের সময় প্রধান অবলম্বনগুলি হ'ল:

  1. প্রথমে সবচেয়ে সহজ সমাধান চেষ্টা করে দেখুন; যদি এটি কাজ করে, দুর্দান্ত!
  2. যদি তা না হয় তবে নতুন চেষ্টা করে চালিয়ে যান।
  3. এটি খুব হতাশ হতে পারে, তবে হাল ছাড়বেন না!

আপনি যদি এই ধরণের জিনিস পছন্দ করেন তবে আপনার টুইটারে আমাকে অনুসরণ করা উচিত: twitter.com/albtaiuti

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

সোশ্যাল মিডিয়া প্ল্যাটফর্মগুলিতে আমাদের অনুসরণ করুন: ফেসবুক: ফেসবুক :: অ্যাপকোডমোবাইল / টুইটার: টুইটার:

আপনি যদি এই নিবন্ধটি উপভোগ করেছেন তবে দয়া করে বোতামটি ক্লিক করুন এবং অন্যদের এটির জন্য সহায়তা করতে ভাগ করুন! নীচে একটি মন্তব্য দিতে নির্দ্বিধায়।

আরো দেখুন

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