मैं यूआईवीवाईई के लिए एक परिप्रेक्ष्य परिवर्तन कैसे लागू करूं?

Question

मैं एक UIView (जैसे कि कवरफ़्लो में देखा गया है) पर एक रूपांतरित करने के लिए देख रहा हूँ

क्या किसी को पता है कि क्या यह संभव है?

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

कोई मदद, संकेत या उदाहरण कोड स्निपेट वास्तव में सराहना की जाएगी!

Comments

मुझे यकीन नहीं है कि यह यू के लिए उपयुक्त है या नहीं, लेकिन जब मैं एनीमेशन बनाता हूं, तो मैंने पाया m14 मेरे लिए बेहतर है बस संदर्भ के लिए :)

— b123400

धन्यवाद! - आप इसे कौन से मूल्य देते हैं?

— निक कार्टराइट

M14 की स्थापना करके आप वास्तव में एक्स अक्ष पर दृश्य फ्रुम को अजीब तरह से तिरछा कर रहे हैं। गणित पूरी तरह से मान्य है लेकिन यह सामान्य मामले में चीजों को भ्रमित कर देगा।

— शराबी

एम 3 क्षेत्र के गहन विवरण सहित, काइलेयर 3 डी परिवर्तन और परिप्रेक्ष्य के बारे में एक बहुत अच्छा लेख, इस उत्कृष्ट लेख में पाया जा सकता है: कोर-एनीमेशन-3 डी-मॉडल

— मार्कस

Answer 1

जैसा कि बेन ने कहा, आपको प्रदर्शन करने के लिए UIView'sए CATransform3Dका उपयोग करके, परत के साथ काम करने की आवश्यकता होगी layer's rotation। यहाँ वर्णित के रूप में कार्य करने के लिए परिप्रेक्ष्य प्राप्त करने की चाल, (m34) के मैट्रिक्स में cellsसे एक को सीधे एक्सेस करना है CATransform3D। मैट्रिक्स गणित कभी मेरी चीज नहीं रही है, इसलिए मैं यह नहीं समझा सकता कि यह क्यों काम करता है, लेकिन यह करता है। आपको अपने प्रारंभिक परिवर्तनों के लिए इस मान को एक नकारात्मक अंश पर सेट करना होगा, फिर अपनी परत के घुमाव को उस पर लागू करें। आपको निम्नलिखित कार्य करने में भी सक्षम होना चाहिए:

उद्देश्य सी

UIView *myView = [[self subviews] objectAtIndex:0];
CALayer *layer = myView.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -500;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;

स्विफ्ट 5.0

if let myView = self.subviews.first {
    let layer = myView.layer
    var rotationAndPerspectiveTransform = CATransform3DIdentity
    rotationAndPerspectiveTransform.m34 = 1.0 / -500
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0 * .pi / 180.0, 0.0, 1.0, 0.0)
    layer.transform = rotationAndPerspectiveTransform
}

जो प्रत्येक घुमाव के लिए खरोंच से परत रूपांतरित करता है।

इसका एक पूर्ण उदाहरण (कोड के साथ) यहां पाया जा सकता है , जहां मैंने CALayersबिल ड्यूडीनी के एक उदाहरण के आधार पर एक जोड़े पर स्पर्श-आधारित रोटेशन और स्केलिंग लागू की है। कार्यक्रम का सबसे नया संस्करण, पृष्ठ के बहुत नीचे, इस तरह के परिप्रेक्ष्य संचालन को लागू करता है। कोड को पढ़ने के लिए यथोचित सरल होना चाहिए।

sublayerTransformआप अपनी प्रतिक्रिया में उल्लेख करने के लिए एक को बदलने कि आपके के sublayers को लागू किया जाता है UIView's CALayer। यदि आपके पास कोई सबलेयर नहीं है, तो इसके बारे में चिंता न करें। मैं अपने उदाहरण में sublayerTransform का उपयोग केवल इसलिए करता हूं क्योंकि CALayersएक परत के भीतर दो निहित हैं जो मैं घुमा रहा हूं।

Comments

धन्यवाद ब्रैड - आप एक स्टार हैं। पुनश्च: अपने उत्कृष्ट उत्तर के देर से टिकने के लिए क्षमा करें! निक।

— निक कार्टराइट

यह मेरे लिए अच्छी तरह से काम करता है, सिवाय इसके कि मैं अपनी आधी छवि (एक ऊर्ध्वाधर विभाजन के साथ) खो देता हूं - कभी-कभी एलएचएस, कभी-कभी आरएचएस।

— iPadDeveloper2011

@ iPadDeveloper2011 - ऑड हैं, आप एक दृश्य या परत को घुमाने की कोशिश कर रहे हैं जब एक ही विमान में एक और अपारदर्शी दृश्य या परत है। आपके दृश्य या परत का आधा भाग जो स्क्रीन से दूर होता है, फिर इस अन्य दृश्य से नीचे होगा, और इस तरह छिपा हुआ होगा। आप इसे रोकने के लिए अपने दृश्य पदानुक्रम को पुन: व्यवस्थित कर सकते हैं या अपने अग्रभूमि दृश्य को ऊपर ले जाने वाले को ऊपर ले जाने के लिए zPosition गुण का उपयोग कर सकते हैं।

— ब्रैड लार्सन

FYI करें, M34 सेल के परिप्रेक्ष्य परिवर्तन को प्रभावित करने का कारण यह है कि मैट्रिक्स में वह सेल है जो प्रभावित करता है कि क्लिप-स्पेस W मान के लिए विश्व-अंतरिक्ष Z मान मैप्स (जो परिप्रेक्ष्य प्रक्षेपण के लिए उपयोग किया जाता है)। अधिक जानकारी के लिए समरूप परिवर्तन मैट्रिसेस पर पढ़ें।

— शराबी

@ युर्सग - आप यह पूछना चाहते हैं कि एक अलग प्रश्न के रूप में, अधिमानतः उन छवियों के साथ जो यह बताती हैं कि क्या हो रहा है और आप क्या बनना चाहते हैं।

— ब्रैड लार्सन

Answer 2

आप केवल कोर ग्राफिक्स (क्वार्ट्ज, 2 डी केवल) का उपयोग करके सीधे यूआईवीवाईई की ट्रांसफ़ॉर्म प्रॉपर्टी पर लागू कर सकते हैं। कवरफ़्लो में प्रभाव प्राप्त करने के लिए, आपको CATransform3D का उपयोग करना होगा, जो 3-डी स्पेस में लागू होते हैं, और इसलिए आप जो परिप्रेक्ष्य चाहते हैं, उसे दे सकते हैं। आप केवल लेटर्स पर CATransform3Ds लागू कर सकते हैं, दृश्य नहीं, इसलिए आपको इसके लिए परतों पर स्विच करना होगा।

"CovertFlow" नमूना देखें जो Xcode के साथ आता है। यह मैक-ओनली (यानी आईफोन के लिए नहीं) है, लेकिन बहुत सारे कॉन्सेप्ट अच्छी तरह से ट्रांसफर हो जाते हैं।

Comments

मैं इस कवरफ़्लो के नमूने की तलाश में हूं / डेवलपर / उदाहरण, सफलता के बिना, आप इसे कहां पा सकते हैं?

— एलेक्स

यह वास्तव में "CovertFlow" है, और यह / डेवलपर / उदाहरण / क्वार्ट्ज / कोर एनीमेशन / "में है

— बेन गोटलिब

Answer 3

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

यहाँ पोस्ट से कुछ चित्र दिए गए हैं:

Comments

कोड को पाठ के रूप में पोस्ट किया जाना चाहिए। एक छवि में कोड पढ़ना वास्तव में मुश्किल है। साथ ही चित्र में कोड को संदर्भित, कॉपी या खोजा नहीं जा सकता है।

— rammdy

@rmaddy, मेरे पास मेरे उत्तर में बिटबकेट लिंक में उपलब्ध कोड है।

— हुआहम

लिंक समय के साथ खराब होते चले जाते हैं। पाठ में सीधे उत्तर के रूप में महत्वपूर्ण कोड पेस्ट करना हमेशा सबसे अच्छा होता है।

— rammdy

Answer 4

आप iCarousel SDK का उपयोग करके सटीक हिंडोला प्रभाव प्राप्त कर सकते हैं।

आप अद्भुत और मुफ्त iCarousel लाइब्रेरी का उपयोग करके iOS पर तत्काल कवर फ्लो प्रभाव प्राप्त कर सकते हैं। आप इसे https://github.com/nicklockwood/iCarousel से डाउनलोड कर सकते हैं और इसे एक ब्रिजिंग हेडर (इसे ऑब्जेक्टिव-सी में लिखा गया है) जोड़कर अपने Xcode प्रोजेक्ट में आसानी से गिरा सकते हैं।

यदि आपने पहले किसी स्विफ्ट प्रोजेक्ट में Objective-C कोड नहीं जोड़ा है, तो इन चरणों का पालन करें:

• ICarousel डाउनलोड करें और इसे अनज़िप करें
• उस फ़ोल्डर में जाएं जिसे आपने अनज़िप किया है, उसके iCarousel सबफ़ोल्डर को खोलें, फिर iCarousel.h और iCarousel.m को चुनें और उन्हें अपने प्रोजेक्ट नेविगेशन में खींचें - जो कि Xcode में बाएं फलक है। Info.plist के ठीक नीचे।
• "यदि आवश्यक हो तो कॉपी आइटम की जाँच करें" तो समाप्त पर क्लिक करें।
• Xcode आपको संदेश के साथ संकेत देगा "क्या आप एक उद्देश्य-सी ब्रिजिंग हेडर कॉन्फ़िगर करना चाहेंगे?" "Create Bridging Header" पर क्लिक करें आपको अपनी परियोजना में एक नई फ़ाइल देखनी चाहिए, जिसका नाम YourProjectName-Bridging-Header.h है।
• इस लाइन को फ़ाइल में जोड़ें: #import "iCarousel.h"
• एक बार जब आप अपने प्रोजेक्ट में iCarousel जोड़ लेते हैं तो आप इसका उपयोग शुरू कर सकते हैं।
• सुनिश्चित करें कि आप iCarouselDelegate और iCarouselDataSource प्रोटोकॉल दोनों के अनुरूप हैं।

स्विफ्ट 3 नमूना कोड:

    override func viewDidLoad() {
      super.viewDidLoad()
      let carousel = iCarousel(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
      carousel.dataSource = self
      carousel.type = .coverFlow
      view.addSubview(carousel) 
    }

   func numberOfItems(in carousel: iCarousel) -> Int {
        return 10
    }

    func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
        let imageView: UIImageView

        if view != nil {
            imageView = view as! UIImageView
        } else {
            imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 128, height: 128))
        }

        imageView.image = UIImage(named: "example")

        return imageView
    }