एकदम सही क्रॉसफेड

Question

मुझे इस समस्या का शब्दों में वर्णन करना कठिन लगता है, यही वजह है कि मैंने इसका वर्णन करने के लिए एक वीडियो (45 सेकंड) बनाया। यहाँ प्रश्नों का पूर्वावलोकन है, कृपया इसे Vimeo पर एक नज़र डालें: http://vimeo.com/epologee/perfect-brossfade

एक दोषरहित क्रॉसफेड ​​बनाने या दो छवियों या आकृतियों को भंग करने का मुद्दा पिछले एक दशक में कई क्षेत्रों में मेरे लिए आवर्ती रहा है। पहले वीडियो एडिटिंग में, फिर फ्लैश एनिमेशन में और अब iOS प्रोग्रामिंग में। जब आप इसे गुगली करना शुरू करते हैं, तो कई वर्कअराउंड मिलते हैं, लेकिन मैं वास्तव में इस बार बिना हैक के इसे हल करना चाहता हूं।

सारांश:
दो अर्ध-पारदर्शी, एक ही रंग के बिटमैप को पार करने में तकनीक या वक्र का नाम क्या है, यदि आप परिणामी पारदर्शिता को किसी एक के मूल से मेल खाना चाहते हैं?

फीका के दौरान नेक्रसेरी आंशिक पारदर्शिता / अल्फा मानों की गणना करने के लिए (गणितीय) कार्य है?

क्या प्रोग्रामिंग भाषाएं हैं ease in, जिनमें एक्शनस्क्रिप्ट या कोको में पाए जाने वाले ease outया प्रीसेट के समान ये कार्य हैं ease in out?

अपडेट: वीडियो के अलावा, मैंने एक नमूना परियोजना (एक्सकोड और आईओएस एसडीके की आवश्यकता है) बनाई है और इसे गीथूब पर पोस्ट किया है। यह वीडियो के समान एनीमेशन दिखाता है लेकिन इस बार वर्गों के साथ: https://github.com/epologee/StackOverflow-Example-Code

Comments

इसके बारे में कुछ भी नहीं पता, लेकिन वीडियो के लिए +1।

— सेबस्टियनजीगर

निर्भर करता है कि ओवर ऑपरेटर कैसे लागू किया जाता है। En.wikipedia.org/wiki/Alp_channel

— आर्टिस्टेक्स

मैं सहमत हूं, @artistoex, उस ऑपरेटर के लिए कुछ है, लिंक के लिए धन्यवाद! हालांकि, अगर जवाब कहीं दफन है, तो मैं इसे नहीं देख रहा हूं :(

— एपीलोगी

ओवर ऑपरेटर का गणितीय प्रतिनिधित्व एक समीकरण की ओर जाता है। ऑपरेटर पर उदाहरण: C = अल्फा * c1 + (अल्फा -1) * c2 पैदावार Alpha = (C + c2) / (c1 + c2) (C दो रंगों को मिलाने का परिणाम है c1, c2)। इस ओवर ऑपरेटर के लिए इसका मतलब है, कोई फ़ंक्शन नहीं है, जो आपकी स्थिति को संतुष्ट करता है।

— आर्टिस्टोक्स

सी = अल्फा 1 * सी 1 + अल्फा 2 * सी 2 (0 <= अल्फा 1, अल्फा 2 <= 1) के लिए, इस तरह के समारोह है: अल्फा 1 = (सी-अल्फा 2 * सी 2) / सी 1।

— आर्टिस्टोक्स

Answer 1

मुझे डर है कि यह संभव नहीं है। जब दो ऑब्जेक्ट ओवरले होते हैं तो इस तरह पारदर्शिता की गणना की जाती है: http://en.wikipedia.org/wiki/Alpha_compositing

यदि आप ओवरले क्षेत्र को नहीं देखना चाहते हैं, तो वस्तुओं में से एक की अपारदर्शिता 1 होनी चाहिए।

Answer 2

मुझे नहीं पता कि वीडियो संपादन के क्षेत्र में नाम क्या हो सकता है, लेकिन मैं वक्र को S- वक्र या सिग्मॉइड वक्र कहूंगा । यह बहुत ही सरल होना चाहिए कि आप कोर एनीमेशन के kCAMediaTimingFunctionEaseInEaseOut टाइमिंग फ़ंक्शन का उपयोग करके iOS में जिस क्रॉस-फेड की तलाश कर रहे हैं । 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];

नोट: आपको वास्तव में UIView की सुविधा विधियों के बजाय ब्लॉक-आधारित एनीमेशन विधियों का उपयोग करना चाहिए। मैंने ऊपर UIView के तरीकों का इस्तेमाल किया क्योंकि यह समझना बहुत आसान है, और मेमोरी से टाइप करना आसान है। ब्लॉक का उपयोग करना अधिक कठिन नहीं है, हालांकि।

परिशिष्ट: यदि आप UIViewAnimationEaseInOut को पसंद नहीं करते हैं, तो आप टाइमिंग, टाइम्सस्पेस और CAAimimation में वर्णित के रूप में अपना खुद का समय समारोह बना सकते हैं । यह ऊपर वर्णित सरल एनीमेशन की तुलना में थोड़ा अधिक उन्नत है, लेकिन यह आपको वह सभी नियंत्रण देता है जो आप चाहते हैं।

Comments

अवग्रह! यह पहले से ही एक कदम करीब है, धन्यवाद! आपके द्वारा प्रदान किया गया कोड का टुकड़ा एकदम से काम नहीं करता है, सेटअनीमेशनचुरवे की तुलना में एक अलग पैरामीटर लेता है kCAMediaTimingFunctionEaseInEaseOut। क्या आपका मतलब हो सकता है UIViewAnimationCurveEaseInOut? उस वक्र के साथ समस्या समान है (बीच में डुबकी), क्योंकि किसी भी समय, एक सरल जोड़ में दो अल्फा मान बराबर होंगे 1.0, जहां मेरे मैन्युअल रूप से घुमाए गए वक्र 1.0में वांछित परिणाम प्राप्त करने के लिए अधिक होने की आवश्यकता है ।

— एपोलोगी

मैं अब देख रहा हूं ... आप निरंतर के बारे में सही हैं - मैंने उत्तर में कोड अपडेट किया है। मैंने डॉक्स के लिए एक लिंक भी जोड़ा है जो समझाता है कि अपने समय के कार्यों को कैसे बनाया जाए।

— कालेब

मैं ब्लॉक के साथ अपने एनिमेशन करता हूं, फिर भी जिस्ट एक ही है। घटता में निर्मित अभी भी लागू नहीं है, क्योंकि उनके समरूपता के कारण, लेकिन परिशिष्ट एक कस्टम CAMediaTimingFunction के लिए मार्ग प्रशस्त किया जो कि मैं एक के बाद प्रभाव वीडियो में इस्तेमाल किया मेल खाता है। परेशानी यह है कि हर परिदृश्य पर फिट होने वाला एक सिग्माइड वक्र नहीं है , अलग-अलग प्रारंभिक स्तर के अपारदर्शिता को 'डिप' से छुटकारा पाने के लिए अलग-अलग बेज़ियर पदों की आवश्यकता होगी। ऐसा कुछ होना चाहिए जो मुझे याद आ रहा है।

— एपोलोगी

हाय @ कालेब, मैंने गिटहब पर एक नमूना परियोजना पोस्ट की (पोस्ट देखें)। कस्टम समय उपयोगी है, लेकिन अगर आप को बदलने के initialTransparencyमूल्य, यह कोई फायदा नहीं है। आपके पास कोई सुराग नहीं होगा कि आगे क्या करना है?

— एपीलोगी

Google खोज में मदद करने के लिए कुछ और कम बिट्स; ग्राफिक्स प्रोग्रामर उस ग्राफ़ को कॉल करते हैं जो आप "स्मूथस्टेप" के बारे में बात कर रहे हैं। अत्यधिक मैथी प्रोग्रामर अक्सर इसे "हर्माइट इंटरपोलर" कहेंगे। और त्रिकोणमिति के बिना एक की गणना करने के लिए एक सरल समीकरण है: "3t ^ 2 - 2t ^ 3"।

— ट्रेवर पावेल

Answer 3

कंप्यूटर ग्राफिक्स में, इस तरह के फंक्शन को स्मूथस्टेप कहा जाता है । जब क्रॉसफ़ेड का उपयोग किया जाता है, तो यह रचना के लिए वैश्विक अल्फा मान निर्धारित करता है।

यदि इनपुट छवियों में एक अल्फा चैनल है, तो आपको पहले यह सुनिश्चित कर लेना चाहिए कि अल्फा का प्रीप्लेप्लाइड है । फिर, आप alphaप्रत्येक चैनल पर [ X = A*alpha + B*(1-alpha)]] smoothstep का उपयोग करके, सीधे और सरल रूप से क्रॉसफ़ेड रचना कर सकते हैं और उचित परिणाम की उम्मीद कर सकते हैं।

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-अल्फा घातीय क्षय के लिए था, जो मुझे लगता है कि अधिक उपयुक्त है। पाप के लिए / पाठ्यक्रम पाप (टी) = sqrt (1-sqr (क्योंकि (टी)) के कार्यों क्योंकि, हालांकि, हर एक को अलग से की गणना के लिए तेजी से होना चाहिए।

— डैनी Varod

यदि समस्या थी कि एक समान वक्र का कार्य कैसा दिख सकता है, तो आपका गणित सही है। हालांकि मुद्दा यह है कि दो रंगों के सम्मिश्रण से कैसे निपटा जाए, जैसे 40% नीला + 40% नीला पाने के लिए कैसे 80% नीला।

— एपीलॉग

यह करना आसान है, लेकिन रंग की राशि> 100% होने पर खराब दिखने वाली संतृप्ति में परिणाम होगा।

— डैनी वारोड