पॉप अप! IOS पर प्रसारित

नमस्कार, हेब्र! हर कोई उत्तरदायी क्षुधा पसंद करता है। और भी बेहतर जब उनके पास प्रासंगिक एनिमेशन हों। इस लेख में मैं सभी "मांस" के साथ बताऊंगा और दिखाऊंगा कि कैसे पॉप-अप स्क्रीन के साथ सब कुछ ठीक से दिखाना, छिपाना, मोड़ना, घूमना और करना है।

प्रारंभ में, मैं यह कहते हुए एक लेख लिखना चाहता था कि iOS 10 पर एक सुविधाजनक UIViewPropertyAnimator दिखाई दिया जो बाधित एनिमेशन की समस्या को हल करता है। अब उन्हें रोका, उलटा, जारी या रद्द किया जा सकता है। Apple इस इंटरफ़ेस को द्रव कहता है।

लेकिन तब मुझे एहसास हुआ: इन संक्रमणों को सही ढंग से एनिमेटेड कैसे किया जाए, इसका वर्णन किए बिना नियंत्रकों के एनीमेशन को बाधित करने के बारे में बात करना मुश्किल है। इसलिए, दो लेख होंगे। इसमें, हम यह पता लगाएंगे कि स्क्रीन को सही ढंग से कैसे दिखाना और छिपाना है, और अगले में रुकावट के बारे में।

वे कैसे काम करते हैं?

UIViewController में एक UIViewController संपत्ति है। यह विभिन्न कार्यों के साथ एक प्रोटोकॉल है, प्रत्येक एक वस्तु लौटाता है:

• animationController लिए,
• interactionController कंट्रोलर एनिमेशन में दखल interactionController लिए,
• presentationController फॉर डिस्प्ले: पदानुक्रम, फ्रेम आदि।

इन सभी के आधार पर, हम एक पॉपअप पैनल बनाएंगे:

पाक कला नियंत्रक

आप मोडल नियंत्रकों और UINavigationController ( UINavigationControllerDelegate माध्यम से काम करता है) के लिए संक्रमण को चेतन कर सकते हैं।
हम मोडल ट्रांज़िशन पर विचार करेंगे। शो से पहले नियंत्रक सेटअप थोड़ा असामान्य है:

 class ParentViewController: UIViewController { private let transition = PanelTransition() // 1 @IBAction func openDidPress(_ sender: Any) { let child = ChildViewController() child.transitioningDelegate = transition // 2 child.modalPresentationStyle = .custom // 3 present(child, animated: true) } } 

1. एक वस्तु बनाएं जो संक्रमण का वर्णन करती है। transitioningDelegate को weak के रूप transitioningDelegate चिह्नित किया गया है, इसलिए आपको strong लिंक द्वारा transition अलग से संग्रहीत करना होगा।
2. हमने अपना परिवर्तन ट्रांस्फ़ॉर्मिंग के लिए सेट किया।
3. presentationController .custom में डिस्प्ले विधि को नियंत्रित करने के लिए आपको .custom लिए modalPresentationStyle. को निर्दिष्ट करने की आवश्यकता है modalPresentationStyle. ।

दिखाए गए नियंत्रक को यह नहीं पता है कि यह कैसे दिखाया गया है। और वह अच्छा है।

आधी स्क्रीन में दिखा

के PanelTransition कोड को presentationController साथ शुरू करते हैं। यदि आपने UIPopoverController माध्यम से पॉप-अप बनाया है तो आपने इसके साथ काम किया है। PresentationController कंट्रोलर कंट्रोलर के डिस्प्ले को नियंत्रित करता है: फ्रेम, पदानुक्रम आदि। वह यह तय करता है कि iPad पर पॉपओवर कैसे दिखाया जाए: किस फ्रेम के साथ, बटन के किस तरफ दिखाने के लिए, विंडो की पृष्ठभूमि में कलंक जोड़ता है और इसके नीचे अंधेरा होता है।

हमारी संरचना समान है: हम पृष्ठभूमि को गहरा कर देंगे, फ्रेम को पूर्ण स्क्रीन में नहीं डालेंगे:

presentationController(forPresented:, presenting:, source:) विधि के साथ शुरू करने के लिए, PresentationController लौटाएं:

 class PanelTransition: NSObject, UIViewControllerTransitioningDelegate { func presentationController(forPresented presented: UIViewController, presenting: UIViewController?, source: UIViewController) -> UIPresentationController? { return presentationController = PresentationController(presentedViewController: presented, presenting: presenting ?? source) } 

अब आप PresentationController वर्ग को लागू कर सकते हैं। शुरुआत के लिए, आइए भविष्य के नियंत्रक को फ्रेम करें। इसके लिए एक frameOfPresentedViewInContainerView पद्धति है। नियंत्रक स्क्रीन के निचले आधे हिस्से पर कब्जा करते हैं:

 class PresentationController: UIPresentationController { override var frameOfPresentedViewInContainerView: CGRect { let bounds = containerView!.bounds let halfHeight = bounds.height / 2 return CGRect(x: 0, y: halfHeight, width: bounds.width, height: halfHeight) } } 

आप परियोजना शुरू कर सकते हैं और स्क्रीन दिखाने की कोशिश कर सकते हैं, लेकिन कुछ भी नहीं होगा। इसका कारण यह है कि अब हम पदानुक्रम को स्वयं देखते हैं और हमें नियंत्रक दृश्य को स्वयं जोड़ना होगा:

 // PresentationController.swift override func presentationTransitionWillBegin() { super.presentationTransitionWillBegin() containerView?.addSubview(presentedView!) } 

presentedView दृश्य के लिए अभी भी एक फ्रेम लगाने की आवश्यकता है। containerViewDidLayoutSubviews सबसे अच्छी जगह है, क्योंकि इस तरह हम स्क्रीन रोटेशन का जवाब दे सकते हैं:

 // PresentationController.swift override func containerViewDidLayoutSubviews() { super.containerViewDidLayoutSubviews() presentedView?.frame = frameOfPresentedViewInContainerView } 

अब आप दौड़ सकते हैं। एनीमेशन UIModalTransitionStyle.coverVertical लिए मानक होगा, लेकिन फ्रेम का आकार आधा होगा।

पृष्ठभूमि को गहरा करो

अगला काम पृष्ठभूमि नियंत्रक को काला करने के लिए है जो दिखाया गया है उस पर ध्यान केंद्रित करें।

हम PresentationController से इनहेरिट करेंगे और इसे PanelTransition फ़ाइल में एक नए वर्ग के साथ बदल PanelTransition । नई कक्षा में केवल डिमिंग के लिए एक कोड होगा।

 class DimmPresentationController: PresentationController 

एक दृश्य बनाएं जिसे हम शीर्ष पर ओवरले करेंगे:

 private lazy var dimmView: UIView = { let view = UIView() view.backgroundColor = UIColor(white: 0, alpha: 0.3) view.alpha = 0 return view }() 

हम ट्रांस्फ़ॉर्मेशन एनीमेशन के अनुसार alpha विचार बदल देंगे। 4 विधियाँ हैं:

• presentationTransitionWillBegin
• presentationTransitionDidEnd
• dismissalTransitionWillBegin
• dismissalTransitionDidEnd

पहला सबसे कठिन है। पदानुक्रम में dimmView जोड़ें, फ्रेम नीचे रखें और एनीमेशन शुरू करें:

 override func presentationTransitionWillBegin() { super.presentationTransitionWillBegin() containerView?.insertSubview(dimmView, at: 0) performAlongsideTransitionIfPossible { [unowned self] in self.dimmView.alpha = 1 } } 

एनीमेशन को एक सहायक फ़ंक्शन का उपयोग करके लॉन्च किया गया है:

 private func performAlongsideTransitionIfPossible(_ block: @escaping () -> Void) { guard let coordinator = self.presentedViewController.transitionCoordinator else { block() return } coordinator.animate(alongsideTransition: { (_) in block() }, completion: nil) } 

हमने containerViewDidLayoutSubviews dimmView में dimmView लिए फ्रेम सेट किया

 override func containerViewDidLayoutSubviews() { super.containerViewDidLayoutSubviews() dimmView.frame = containerView!.frame } 

एनीमेशन को बाधित और रद्द किया जा सकता है, और यदि रद्द किया जाता है, तो dimmView को पदानुक्रम से हटा दिया जाना चाहिए:

 override func presentationTransitionDidEnd(_ completed: Bool) { super.presentationTransitionDidEnd(completed) if !completed { self.dimmView.removeFromSuperview() } } 

छिपाने के तरीकों में रिवर्स प्रक्रिया शुरू होती है। लेकिन अब आपको केवल dimmView को हटाने की आवश्यकता है यदि एनीमेशन पूरा हो गया है।

 override func dismissalTransitionWillBegin() { super.dismissalTransitionWillBegin() performAlongsideTransitionIfPossible { [unowned self] in self.dimmView.alpha = 0 } } override func dismissalTransitionDidEnd(_ completed: Bool) { super.dismissalTransitionDidEnd(completed) if completed { self.dimmView.removeFromSuperview() } } 

अब बैकग्राउंड डिमिंग हो रहा है।

हम एनीमेशन को नियंत्रित करते हैं

हम नीचे से कंट्रोलर दिखाते हैं

अब हम नियंत्रक की उपस्थिति को चेतन कर सकते हैं। PanelTransition क्लास में, PanelTransition क्लास PanelTransition जो उपस्थिति एनीमेशन को नियंत्रित करेगा:

 func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? { return PresentAnimation() } 

प्रोटोकॉल को लागू करना सरल है:

 extension PresentAnimation: UIViewControllerAnimatedTransitioning { func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval { return duration } func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { let animator = self.animator(using: transitionContext) animator.startAnimation() } func interruptibleAnimator(using transitionContext: UIViewControllerContextTransitioning) -> UIViewImplicitlyAnimating { return self.animator(using: transitionContext) } } 

कुंजी कोड थोड़ा अधिक जटिल है:

 class PresentAnimation: NSObject { let duration: TimeInterval = 0.3 private func animator(using transitionContext: UIViewControllerContextTransitioning) -> UIViewImplicitlyAnimating { // transitionContext.view    ,   let to = transitionContext.view(forKey: .to)! let finalFrame = transitionContext.finalFrame(for: transitionContext.viewController(forKey: .to)!) //   ,     PresentationController //      to.frame = finalFrame.offsetBy(dx: 0, dy: finalFrame.height) let animator = UIViewPropertyAnimator(duration: duration, curve: .easeOut) { to.frame = finalFrame //   ,     } animator.addCompletion { (position) in //  ,      transitionContext.completeTransition(!transitionContext.transitionWasCancelled) } return animator } } 

 func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { let to = transitionContext.view(forKey: .to)! let finalFrame = transitionContext.finalFrame(for: transitionContext.viewController(forKey: .to)!) to.frame = finalFrame.offsetBy(dx: 0, dy: finalFrame.height) UIView.animate(withDuration: duration, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 0, options: [.curveEaseOut], animations: { to.frame = finalFrame }) { (_) in transitionContext.completeTransition(!transitionContext.transitionWasCancelled) } }    ,   `interruptibleAnimator(using transitionContext:)` 

यदि आप एक रुकावट नहीं बनाते हैं, तो रुकावटनिम्नेटर विधि को छोड़ा जा सकता है। अगले लेख में सदस्यता पर विचार किया जाएगा।

नियंत्रक को छिपाएं

सब कुछ एक ही है, केवल विपरीत दिशा में। Panel Transition DismissAnimation क्लास बनाएँ:

 func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? { return DismissAnimation() } 

और हमें इसका एहसास है। DismissAnimation कक्षा:

 class DismissAnimation: NSObject { let duration: TimeInterval = 0.3 private func animator(using transitionContext: UIViewControllerContextTransitioning) -> UIViewImplicitlyAnimating { let from = transitionContext.view(forKey: .from)! let initialFrame = transitionContext.initialFrame(for: transitionContext.viewController(forKey: .from)!) let animator = UIViewPropertyAnimator(duration: duration, curve: .easeOut) { from.frame = initialFrame.offsetBy(dx: 0, dy: initialFrame.height) } animator.addCompletion { (position) in transitionContext.completeTransition(!transitionContext.transitionWasCancelled) } return animator } } extension DismissAnimation: UIViewControllerAnimatedTransitioning { func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval { return duration } func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { let animator = self.animator(using: transitionContext) animator.startAnimation() } func interruptibleAnimator(using transitionContext: UIViewControllerContextTransitioning) -> UIViewImplicitlyAnimating { return self.animator(using: transitionContext) } } 

इस स्थान पर आप पार्टियों के साथ प्रयोग कर सकते हैं:
- एक वैकल्पिक परिदृश्य नीचे दिखाई दे सकता है;
- दाईं ओर - त्वरित मेनू नेविगेशन;
- ऊपर - सूचनात्मक संदेश:

डोडो पिज्जा , स्नैक और सेवई

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

और यहाँ लेख का दूसरा भाग आया।

डोडो पिज्जा मोबाइल चैनल की सदस्यता लें ।