নিখুঁত ক্রসফেইড

Question

কথায় কথায় এই সমস্যাটি বর্ণনা করা আমার পক্ষে কঠিন মনে হয়, এ কারণেই আমি এটি চিত্রিত করার জন্য একটি ভিডিও (45 সেকেন্ড) তৈরি করেছি। এখানে প্রশ্নের পূর্বরূপ দেখুন, দয়া করে এটি ভিমোতে একবার দেখুন: http://vimeo.com/epologee/perfect-crossfade

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

সংক্ষিপ্তসার:
দুটি আধা-স্বচ্ছ, একই বর্ণের বিটম্যাপগুলি ক্রসফ্যাডিংয়ে প্রয়োগ করার জন্য কৌশল বা বক্রের নাম কী, যদি আপনি ফলস্বরূপ স্বচ্ছতার যে কোনও একটির সাথে মিলতে চান?

বিবর্ণকালে প্রয়োজনীয় আংশিক স্বচ্ছতা / আলফা মান গণনা করার জন্য কি কোনও (গাণিতিক) ফাংশন রয়েছে?

সেখানে ভাষায় একটি প্রিসেট এই ফাংশন আছে, অনুরূপ প্রোগ্রামিং করছেন ease in, ease outবা ease in outফাংশন ActionScript বা কোকো পাওয়া যায় না?

আপডেট: ভিডিওটি ছাড়াও, আমি একটি নমুনা প্রকল্প তৈরি করেছি (এক্সকোড এবং আইওএস এসডিকে প্রয়োজন) এবং এটি গিথুবে পোস্ট করেছি। এটি ভিডিওর মতো একই অ্যানিমেশন দেখায় তবে এবার স্কোয়ার সহ: https://github.com/epologee/StackOverflow- উদাহরণ- কোড

Comments

ভিডিওটির জন্য +1 ছাড়া এ সম্পর্কে কিছুই জানেন না।

— সেবাস্তেঞ্জিগার

ওভার অপারেটর কীভাবে প্রয়োগ করা হয় তার উপর নির্ভর করে। দেখুন en.wikipedia.org/wiki/Alpha_channel

— artistoex

আমি সম্মতি জানলাম, @ আর্টিস্টোএক্স, ওভার অপারেটরের কিছু আছে, লিঙ্কটির জন্য ধন্যবাদ! যাইহোক, যদি উত্তরটি কোথাও কবর দেওয়া হয় তবে আমি এটি দেখছি না :(

— এপোলোজি

ওভার অপারেটরের গাণিতিক উপস্থাপনা সমীকরণের দিকে নিয়ে যায়। অপারেটরের ওপরে উদাহরণ: সি = আলফা * সি 1 + (আলফা -1) * সি 2 ফল দেয় আলফা = (সি + সি 2) / (সি 1 + সি 2) (সি দুটি রঙ সি 1, সি 2 মিশ্রণের ফলস্বরূপ)। এর অর্থ এই ওভার অপারেটরের জন্য, কোনও ক্রিয়া নেই, যা আপনার শর্তটি সন্তুষ্ট করে।

— শিল্পীেক্স

সি = আলফা 1 * সি 1 + আলফা 2 * সি 2 (0 <= আলফা 1, আলফা 2 <= 1) এর জন্য এই জাতীয় ফাংশন রয়েছে: আলফা 1 = (সি-আলফা 2 * সি 2) / সি 1।

— শিল্পীেক্স

Answer 1

আমি আশঙ্কা করছি যে এটি সম্ভব নয়। দুটি বস্তু ওভারলে এলে স্বচ্ছতা গণনা করা হয়: http://en.wikedia.org/wiki/Alpha_compositing

আপনি যদি ওভারলে অঞ্চলটি না দেখতে চান তবে অবজেক্টগুলির একটির অবশ্যই 1 এর অস্বচ্ছতা থাকতে হবে।

Answer 2

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

[UIView beginAnimations:@"crossfade" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
view1.alpha = 0.0;
view2.alpha = 1.0;
[UIView commitAnimations];

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

সংযোজন: আপনি যদি ইউআইভিউএনিমেশনএজআইনআউট পছন্দ না করেন তবে আপনি সময়, সময়সীমা এবং সিএএনিমেশনে বর্ণিত আপনার নিজস্ব সময় কার্যকারিতা তৈরি করতে পারেন । এটি উপরে চিত্রিত সরল অ্যানিমেশনের চেয়ে কিছুটা বেশি উন্নত তবে এটি আপনাকে যা চান তার সমস্ত নিয়ন্ত্রণ দেয়।

Comments

সিগমা! এটি ইতিমধ্যে এক ধাপ কাছাকাছি, ধন্যবাদ! আপনি যে কোডটি সরবরাহ করেছেন তা এখনই কাজ করে না, কারণ সেট অ্যানিমেশন কার্কভে এর চেয়ে আলাদা পরামিতি নেয় kCAMediaTimingFunctionEaseInEaseOut। আপনি বোঝাতে পারে UIViewAnimationCurveEaseInOut? এই বক্ররেখার সমস্যাটি একইরকম (মাঝখানে ডুবিয়ে দেওয়া), কারণ যে কোনও সময়, একটি সাধারণ সংযোজনে দুটি আলফা মান সমান হবে 1.0, যেখানে আমার ম্যানুয়ালি টুইকযুক্ত বক্ররেখা হিসাবে এটি 1.0পছন্দসই ফলাফল পেতে ছাড়িয়ে যাওয়া দরকার ।

— এপোলোজি

আমি এখন দেখছি ... আপনি ধ্রুবক সম্পর্কে ঠিক বলেছেন - আমি উত্তরে কোডটি আপডেট করেছি। আমি ডক্সে একটি লিঙ্কও যুক্ত করেছি যা আপনার নিজস্ব সময় কার্যকারিতা কীভাবে তৈরি করবেন তা ব্যাখ্যা করে।

— কালেব

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

— এপোলোজি

হাই কালেব, আমি গিটহাবে একটি নমুনা প্রকল্প পোস্ট করেছি (পোস্টটি দেখুন)। কাস্টম সময়টি সহায়ক, তবে আপনি যদি initialTransparencyমানটি পরিবর্তন করেন তবে এটি কোনও কাজে আসবে না। আপনার কি দরকার নেই যে কি চেষ্টা করবেন?

— এপোলোজি

গুগল অনুসন্ধানগুলিতে সহায়তা করার জন্য আরও কয়েকটি বিট; গ্রাফিক্স প্রোগ্রামাররা সেই গ্রাফটিকে কল করে যে আপনি "স্মুথপ্লেস" এর কথা বলছেন। উচ্চতর ম্যাথী প্রোগ্রামাররা প্রায়শই এটিকে একটি "হার্মাইট ইন্টারপোলটর" বলে ডাকবে। এবং ত্রিকোণমিতি ছাড়াই গণনা করার একটি সহজ সমীকরণ হ'ল: "3t ^ 2 - 2t ^ 3"।

— ট্রেভর পাওয়েল

Answer 3

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

যদি ইনপুট চিত্রগুলিতে একটি আলফা চ্যানেল থাকে তবে আপনার প্রথমে নিশ্চিত হওয়া উচিত যে আলফাটি পূর্বনির্ধারিত । তারপরে, আপনি alphaপ্রতিটি চ্যানেলে স্মিপস্টিপ ব্যবহার করে সোজাভাবে ক্রসফেইড রচনাটি করতে পারেন [ X = A*alpha + B*(1-alpha)], এবং যুক্তিসঙ্গত ফলাফল আশা করতে পারেন।

Answer 4

আপনি ক্ষতিকারক ক্ষয় ফাংশন ব্যবহার করতে পারেন:

Alpha1(time) = 1 - exp(-time / (0.2 * transitionTime)); // fade in
Alpha2(time) = 1 - Alpha1(time); // fade out

আপনার গ্রাফটি আরও দেখতে দেখতে:

Alpha1(time) = sin(time * 0.5 * pi / transitionTime); // fade in
Alpha2(time) = cos(time * 0.5 * pi / transitionTime); // fade out

Comments

ধন্যবাদ @ ড্যানি প্রকৃতপক্ষে, 1 - Alpha1(time)সমীকরণটি সম্পাদন করা ডিপটির যত্ন নেবে না, কারণ দুটি মিশ্রিত 0.5 টি আলফা চিত্রের ফলে 1.0 টি আলফাযুক্ত মিশ্রিত চিত্র দেখা যাবে না। আমি আঁকা কাস্টম বক্ররেখা উল্লম্বভাবে মিরর করা হয় না।

— এপিওলজি

1-আলফাটি ক্ষতিকারক ক্ষয়ের জন্য ছিল, যা আমি মনে করি এটি আরও উপযুক্ত। অবশ্যই পাপ (কো) = স্কয়ার্ট (1-বর্গ (কোস (টি)) এর পাপ / কোষের ক্রিয়াকলাপগুলির জন্য, তবে প্রতিটি পৃথক করে গণনা করা দ্রুত হওয়া উচিত

— ড্যানি ভারোড

যদি সমস্যাটি একই রকম বক্ররেখার মতো দেখতে পারা যায় তবে আপনার গণিতটি সঠিক। তবে সমস্যাটি হ'ল দুটি বর্ণের মিশ্রণটি কীভাবে মোকাবেলা করা যায়, যেমন 80% নীল ফলে 40% নীল + 40% নীল কীভাবে পান।

— এপোলোজি

এটি করা সহজ তবে রঙের যোগফল> 100% হয়ে গেলে খারাপ চেহারা স্যাচুরেশনের ফলে দেখা দেয়।

— ড্যানি ভারোদ