स्विफ्ट पर स्नैपचैट यूआई लिखना

प्रस्तावना

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

बाईं ओर Snepchat का एक उदाहरण है, दाईं ओर एक एप्लिकेशन का एक उदाहरण है जिसे हम बना रहे होंगे।

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

कैमरा विंडो और साइड टैब के बीच स्क्रॉल भ्रामक है - यह बिल्कुल भी स्क्रॉल नहीं है, यह विभिन्न नियंत्रकों से संबंधित विचारों के बीच एक संवादात्मक संक्रमण है। इसके निचले हिस्से के बटन साधारण टैब हैं, जिस पर क्लिक करने से कंट्रोलर के बीच में फेक है।

इस तरह, स्नेच कस्टम इंटरैक्टिव संक्रमण के साथ UITabBarController जैसे नेविगेशन नियंत्रक के अपने संस्करण का उपयोग करता है।

UIKit में नेविगेशन नियंत्रकों के लिए दो विकल्प शामिल हैं जो आपको संक्रमण को अनुकूलित करने की अनुमति देते हैं - ये हैं UINavigationController और UITabBarController । उन दोनों के पास क्रमशः navigationController(_:interactionControllerFor:) और tabBarController(_:interactionControllerFor:) तरीके हैं, जो उनके प्रतिनिधियों में क्रमशः हैं, जो हमें संक्रमण के लिए अपने स्वयं के इंटरैक्टिव एनीमेशन का उपयोग करने की अनुमति देते हैं।

tabBarController (_: इंटरैक्शनकंट्रोलरफोर :)

नेविगेशनकंट्रोलर (_: इंटरैक्शनकंट्रोलरफोर :)

लेकिन मैं UITabBarController या UINavigationController के कार्यान्वयन से सीमित नहीं होना चाहता, खासकर जब से हम उनके आंतरिक तर्क को नियंत्रित नहीं कर सकते। इसलिए, मैंने अपने समान नियंत्रक को लिखने का फैसला किया, और अब मैं बताना चाहता हूं और दिखाना चाहता हूं कि इसके बारे में क्या आया।

समस्या का बयान

अपना खुद का कंटेनर नियंत्रक बनाएं, जिसमें आप UITabBarController और UINavigationController दोनों में मानक तंत्र का उपयोग करके संक्रमण के लिए इंटरैक्टिव एनिमेशन का उपयोग करके बाल नियंत्रकों के बीच स्विच कर सकते हैं। हमें पहले से ही लिखे गए UIViewControllerAnimatedTransitioning प्रकार के तैयार किए गए संक्रमण एनिमेशन का उपयोग करने के लिए इस मानक तंत्र की आवश्यकता है।

परियोजना की तैयारी

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

Single View App बनाएं।

Product Name हमारा लक्ष्य होगा।

लक्ष्य जोड़ने के लिए + पर क्लिक करें।

Cocoa Touch Framework चुनें।

हम अपने ढांचे को उपयुक्त नाम कहते हैं, Xcode स्वचालित रूप से हमारे लक्ष्य के लिए परियोजना का चयन करता है और बाइनरी को सीधे आवेदन में टाई करने की पेशकश करता है। हम सहमत हैं।

हमें डिफ़ॉल्ट Main.storyboard और ViewController.swift आवश्यकता नहीं होगी, हम उन्हें हटा देते हैं।

General टैब पर एप्लिकेशन के लक्ष्य में Main Interface से मान को निकालना न भूलें।

अब हम AppDelegate.swift जाते AppDelegate.swift और केवल निम्न सामग्री की application विधि छोड़ते हैं:

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { // Launch our master view controller let master = MasterViewController() window = UIWindow() window?.rootViewController = master window?.makeKeyAndVisible() return true } 

यहां हम अपने कंट्रोलर को मुख्य स्थान पर सेट करते हैं ताकि यह लॉन्चर के बाद दिखाई दे।

अब यह बहुत MasterViewController । यह एप्लिकेशन से संबंधित होगा, इसलिए फ़ाइल बनाते समय सही लक्ष्य चुनना महत्वपूर्ण है।

हम SnapchatNavigationController से MasterViewController का वारिस करेंगे, जिसे हम बाद में फ्रेमवर्क में लागू करेंगे। हमारे ढांचे के import को निर्दिष्ट करने के लिए मत भूलना। मैं यहां पूर्ण नियंत्रक कोड प्रदान नहीं करता हूं, चूक को दीर्घवृत्त द्वारा दिखाया गया है ... , मैंने आवेदन को GitHub पर रखा है , वहां आप सभी विवरण देख सकते हैं। इस नियंत्रक में, हम केवल viewDidLoad() विधि में रुचि रखते हैं, जो कैमरा + एक पारदर्शी नियंत्रक (मुख्य विंडो) + के साथ पृष्ठभूमि नियंत्रक को प्रारंभ करता है जिसमें प्रस्थान कार्ड होता है।

 import MakingSnapchatNavigation class MasterViewController: SnapchatNavigationController { override func viewDidLoad() { super.viewDidLoad() //   let camera = CameraViewController() setBackground(vc: camera) //     var vcs: [UIViewController] = [] //    var stub = UIViewController() stub.view.backgroundColor = .clear vcs.append(stub) //  ,     stub = UIViewController() stub.view.backgroundColor = .clear //   let scroll = UIScrollView() stub.view.addSubview(scroll) //  ... //  ,      let content = GradientView() //  ... //    scroll.addSubview(content) vcs.append(stub) //     - setViewControllers(vcs: vcs) } } 

यहाँ क्या हो रहा है? हम एक कैमरा के साथ एक नियंत्रक बनाते हैं और इसे SnapchatNavigationController से setBackground विधि का उपयोग करके पृष्ठभूमि पर सेट करते हैं। इस कंट्रोलर में कैमरे से पूरे व्यू के लिए स्ट्रेच की गई इमेज होती है। फिर हम एक खाली पारदर्शी नियंत्रक बनाते हैं और इसे सरणी में जोड़ते हैं, यह बस इसके माध्यम से कैमरे से छवि को पारित करता है, हम इस पर नियंत्रण रख सकते हैं, एक और पारदर्शी नियंत्रक बना सकते हैं, इसमें एक स्क्रॉल जोड़ सकते हैं, स्क्रॉल के अंदर सामग्री के साथ एक दृश्य जोड़ सकते हैं, दूसरा नियंत्रक जोड़ सकते हैं सरणी और पैरेंट SnapchatNavigationController से विशेष setViewControllers विधि का उपयोग करके इस सरणी को सेट करें।

Info.plist में कैमरे का उपयोग करने के लिए एक अनुरोध जोड़ना न भूलें

 <key>NSCameraUsageDescription</key> <string>Need camera for background</string> 

इस पर, हम परीक्षण के आवेदन को तैयार मानते हैं, और सबसे दिलचस्प भाग पर आगे बढ़ते हैं - रूपरेखा का कार्यान्वयन।

जनक नियंत्रक संरचना

सबसे पहले, एक खाली SnapchatNavigationController बनाएं, इसके लिए सही लक्ष्य चुनना महत्वपूर्ण है। यदि सब कुछ सही ढंग से किया गया था, तो आवेदन का निर्माण किया जाना चाहिए। प्रोजेक्ट की इस स्थिति को संदर्भ द्वारा अनलोड किया जा सकता है।

 open class SnapchatNavigationController: UIViewController { override open func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. } // MARK: - Public interface /// Sets view controllers. public func setViewControllers(vcs: [UIViewController]) { } /// Sets background view. public func setBackground(vc: UIViewController) { } } 

अब आंतरिक घटकों को जोड़ें जिसमें नियंत्रक शामिल होगा। मैं यहां सभी कोड नहीं लाता, मैं केवल महत्वपूर्ण बिंदुओं पर ध्यान केंद्रित करता हूं।

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

 private let requiredChildrenAmount = 2 // MARK: - View controllers /// top child view controller private var topViewController: UIViewController? /// all children view controllers private var children: [UIViewController] = [] 

विचार बनाएं। हमें पृष्ठभूमि के लिए एक दृश्य की आवश्यकता है, एक दृश्य जिसके प्रभाव को हम नियंत्रक को बदलते समय पृष्ठभूमि पर लागू करना चाहते हैं। हमारे पास वर्तमान बाल नियंत्रक के लिए एक दृश्य कंटेनर और एक दृश्य संकेतक है जो उपयोगकर्ता को नेविगेशन के साथ काम करने का तरीका बताएगा।

 // MARK: - Views private let backgroundViewContainer = UIView() private let backgroundBlurEffectView: UIVisualEffectView = { let backgroundBlurEffect = UIBlurEffect(style: UIBlurEffectStyle.light) let backgroundBlurEffectView = UIVisualEffectView(effect: backgroundBlurEffect) backgroundBlurEffectView.alpha = 0 return backgroundBlurEffectView }() /// content view for children private let contentViewContainer = UIView() private let swipeIndicatorView = UIView() 

अगले ब्लॉक में, हम दो चर सेट करते हैं, swipeAnimator एनीमेशन के लिए ज़िम्मेदार है, swipeInteractor इंटरैक्शन (एनीमेशन की प्रगति को नियंत्रित करने की क्षमता) के लिए ज़िम्मेदार है, हमें इसे कंट्रोलर बूट के दौरान इनिशियलाइज़ करना होगा, इसलिए हम बल अनट्रैप करते हैं।

 // MARK: - Animation and transition private let swipeAnimator = AnimatedTransitioning() private var swipeInteractor: CustomSwipeInteractor! 

हमने संकेतक के लिए परिवर्तन भी निर्धारित किया है। हम कंटेनर की चौड़ाई से संकेतक को शिफ्ट करते हैं + किनारे से डबल शिफ्ट + सूचक की चौड़ाई से ही ताकि सूचक कंटेनर के विपरीत छोर पर हो। कंटेनर की चौड़ाई आवेदन के दौरान ज्ञात हो जाएगी, इसलिए चर की गणना जाने पर की जाती है।

 // MARK: - Animation transforms private var swipeIndicatorViewTransform: CGAffineTransform { get { return CGAffineTransform(translationX: -contentViewContainer.bounds.size.width + (swipeIndicatorViewXShift * 2) + swipeIndicatorViewWidth, y: 0) } } 

नियंत्रक लोड करते समय, हम एनीमेशन को self असाइन करते हैं (हम नीचे दिए गए संबंधित प्रोटोकॉल को लागू करेंगे), हमारे एनीमेशन के आधार पर इंटरैक्टर को इनिशियलाइज़ करते हैं, जिसकी प्रगति इसे नियंत्रित करेगी। हम उन्हें एक प्रतिनिधि के रूप में भी नियुक्त करते हैं। प्रतिनिधि उपयोगकर्ता के इशारे की शुरुआत पर प्रतिक्रिया देगा और नियंत्रक की स्थिति के आधार पर एनीमेशन शुरू करेगा या रद्द करेगा। फिर हम सभी विचारों को मुख्य एक में setupViews() और setupViews() , जो बाधाओं को सेट करता है।

 override open func viewDidLoad() { super.viewDidLoad() swipeAnimator.animation = self swipeInteractor = CustomSwipeInteractor(with: swipeAnimator) swipeInteractor.delegate = self view.addSubview(backgroundViewContainer) view.addSubview(backgroundBlurEffectView) view.addSubview(contentViewContainer) view.addSubview(swipeIndicatorView) setupViews() } 

अगला, हम एक कंटेनर में बाल नियंत्रकों को स्थापित करने और हटाने के तर्क पर आगे बढ़ते हैं। यहाँ सब कुछ सरल है जैसा कि Apple प्रलेखन में है। हम इस प्रकार के ऑपरेशन के लिए निर्धारित विधियों का उपयोग करते हैं।

addChildViewController(vc) - वर्तमान में एक चाइल्ड कंट्रोलर जोड़ें।

contentViewContainer.addSubview(vc.view) - नियंत्रक दृश्य को पदानुक्रम में जोड़ें।

vc.view.frame = contentViewContainer.bounds - दृश्य को पूरे कंटेनर में vc.view.frame = contentViewContainer.bounds । चूंकि हम ऑटो लेआउट के बजाय यहां फ़्रेम का उपयोग करते हैं, इसलिए हमें हर बार नियंत्रक आकार में परिवर्तन करने के लिए उनके आकारों को बदलने की आवश्यकता होती है, हम इस तर्क को छोड़ देंगे और मान लेंगे कि एप्लिकेशन चल रहा है, जबकि कंटेनर एप्लिकेशन के आकार को नहीं बदलेगा।

vc.didMove(toParentViewController: self) - एक चाइल्ड कंट्रोलर को जोड़ने के संचालन के लिए एक अंत डाल दिया।

swipeInteractor.wireTo - हम उपयोगकर्ता के इशारों पर वर्तमान नियंत्रक को टाई करते हैं। बाद में हम इस विधि का विश्लेषण करेंगे।

 // MARK: - Private methods private func addChild(vc: UIViewController) { addChildViewController(vc) contentViewContainer.addSubview(vc.view) vc.view.frame = contentViewContainer.bounds vc.didMove(toParentViewController: self) topViewController = vc let goingRight = children.index(of: topViewController!) == 0 swipeInteractor.wireTo(viewController: topViewController!, edge: goingRight ? .right : .left) } private func removeChild(vc: UIViewController) { vc.willMove(toParentViewController: nil) vc.view.removeFromSuperview() vc.removeFromParentViewController() topViewController = nil } 

दो और विधियां हैं जिनके कोड मैं यहां नहीं दूंगा: setViewControllers और setBackground । setViewControllers विधि में setViewControllers हम केवल अपने कंट्रोलर के संबंधित वैरिएबल में चाइल्ड कंट्रोलर्स की सरणी सेट करते हैं और setViewControllers को उनमें से किसी एक को डिस्प्ले पर दिखाने के लिए कॉल करते हैं। setBackground विधि में setBackground हम उसी तरह करते हैं जैसे कि setBackground में, केवल पृष्ठभूमि नियंत्रक के लिए।

कंटेनर नियंत्रक एनीमेशन तर्क

कुल, हमारे मूल नियंत्रक का आधार है:

• UIView दो प्रकारों में विभाजित है
  
  • कंटेनर
  • साधारण
• बच्चे की सूची UIViewController
• swipeAnimator प्रकार AnimatedTransitioning का एनीमेशन नियंत्रण ऑब्जेक्ट
• एक ऐसी वस्तु जो कि swipeInteractor एनीमेशन के इंटरैक्टिव कोर्स को नियंत्रित CustomSwipeInteractor
• प्रतिनिधि इंटरैक्टिव एनीमेशन
• एनीमेशन प्रोटोकॉल कार्यान्वयन

अब हम अंतिम दो बिंदुओं का विश्लेषण करेंगे, फिर AnimatedTransitioning और CustomSwipeInteractor के कार्यान्वयन पर आगे CustomSwipeInteractor ।

प्रतिनिधि इंटरैक्टिव एनीमेशन

प्रतिनिधि में केवल एक panGestureDidStart(rightToLeftSwipe: Bool) -> Bool विधि शामिल है, जो नियंत्रक को इशारे की शुरुआत और उसकी दिशा के बारे में सूचित करती है। जवाब में, वह इस जानकारी की प्रतीक्षा करता है कि क्या एनीमेशन को शुरू करने पर विचार किया जा सकता है।

एक प्रतिनिधि के रूप में, हम यह समझने के लिए कि हम दिए गए दिशा में एनीमेशन शुरू कर सकते हैं या नहीं, यह समझने के लिए हम नियंत्रकों के वर्तमान क्रम की जांच करते हैं, हम मापदंडों के साथ, transition विधि शुरू करते हैं: जिस नियंत्रक से हम चल रहे हैं, जिस नियंत्रक से हम बढ़ रहे हैं, आंदोलन की दिशा, अन्तरक्रियाशीलता ध्वज। ( false मामले में, एक समय-निर्धारित संक्रमण एनीमेशन शुरू हो जाता है)।

 func panGestureDidStart(rightToLeftSwipe: Bool) -> Bool { guard let topViewController = topViewController, let fromIndex = children.index(of: topViewController) else { return false } let newIndex = rightToLeftSwipe ? 1 : 0 //   -    if newIndex > -1 && newIndex < children.count && newIndex != fromIndex { transition(from: children[fromIndex], to: children[newIndex], goingRight: rightToLeftSwipe, interactive: true) return true } return false } 

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

 let ctx = CustomControllerContext(fromViewController: from, toViewController: to, containerView: contentViewContainer, goingRight: goingRight) ctx.isAnimated = true ctx.isInteractive = interactive ctx.completionBlock = { (didComplete: Bool) in if didComplete { self.removeChild(vc: from) self.addChild(vc: to) } }; 

तब हम बस या तो फिक्स्ड या इंटरैक्टिव एनीमेशन कहते हैं। भविष्य में, नियंत्रकों के बीच नेविगेशन के टैब-बटन पर एक निश्चित एक को लटका देना संभव होगा, इस उदाहरण में हम ऐसा नहीं करेंगे।

 if interactive { // Animate with interaction swipeInteractor.startInteractiveTransition(ctx) } else { // Animate without interaction swipeAnimator.animateTransition(using: ctx) } 

एनिमेशन प्रोटोकॉल

TransitionAnimation एनीमेशन प्रोटोकॉल में 4 विधियाँ शामिल हैं:

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

 /// Setup the views hirearchy for animation. func addTo(containerView: UIView, fromView: UIView, toView: UIView, fromLeft: Bool) 

व्यू को तैयार करने के लिए एनीमेशन से पहले की विधि तैयार की जाती है।

 /// Setup the views position prior to the animation start. func prepare(fromView from: UIView?, toView to: UIView?, fromLeft: Bool) 

animation - एनीमेशन ही।

 /// The animation. func animation(fromView from: UIView?, toView to: UIView?, fromLeft: Bool) 

finalize - एनीमेशन के पूरा होने के बाद आवश्यक कार्य।

 /// Cleanup the views position after the animation ended. func finalize(completed: Bool, fromView from: UIView?, toView to: UIView?, fromLeft: Bool) 

हम उपयोग किए गए कार्यान्वयन पर विचार नहीं करेंगे, वहां सब कुछ काफी पारदर्शी है, हम तीन मुख्य वर्गों पर सही जाएंगे, जिसके लिए एनीमेशन होता है।

class CustomControllerContext: NSObject, UIViewControllerContextTransitioning

एनीमेशन का संदर्भ। इसके कार्य का वर्णन करने के लिए, हम UIViewControllerContextTransitioning प्रोटोकॉल की मदद का उल्लेख करते हैं:

एक संदर्भ वस्तु संक्रमण में शामिल विचारों और दृश्य नियंत्रकों के बारे में जानकारी संलग्न करती है। इसमें संक्रमण को निष्पादित करने के तरीके के बारे में भी विवरण है।

सबसे दिलचस्प बात इस प्रोटोकॉल के अनुकूलन पर प्रतिबंध है:

इस प्रोटोकॉल को अपनी कक्षाओं में न अपनाएं और न ही इस प्रोटोकॉल को अपनाने वाली वस्तुओं का सीधे निर्माण करें।

लेकिन हमें मानक एनीमेशन इंजन को चलाने के लिए वास्तव में इसकी आवश्यकता है, इसलिए हम इसे वैसे भी अनुकूलित करते हैं। इसका कोई तर्क नहीं है, यह केवल राज्य को संग्रहीत करता है। इसलिए, मैं इसे यहां तक ​​नहीं लाऊंगा। आप इसे GitHub पर देख सकते हैं।

यह समय-निर्धारित एनिमेशन पर बहुत अच्छा काम करता है। लेकिन इंटरेक्टिव एनिमेशन के लिए इसका उपयोग करते समय, एक समस्या उत्पन्न होती है - UIPercentDrivenInteractiveTransition संदर्भ पर एक UIPercentDrivenInteractiveTransition विधि को आमंत्रित करता है। इस स्थिति में एकमात्र सही समाधान एक और प्रोटोकॉल को अनुकूलित करना है - UIViewControllerInteractiveTransitioning अपने स्वयं के संदर्भ का उपयोग करने के लिए।

class PercentDrivenInteractiveTransition: NSObject, UIViewControllerInteractiveTransitioning

यहाँ यह है - परियोजना का दिल, कस्टम एनिमेशन को कस्टम कंटेनर नियंत्रकों में मौजूद होने की अनुमति देता है। इसे क्रम में लेते हैं।

वर्ग को UIViewControllerAnimatedTransitioning एक पैरामीटर के साथ आरंभ किया जाता है, यह नियंत्रकों के बीच संक्रमण को एनिमेट करने के लिए मानक प्रोटोकॉल है। इस तरह हम अपनी कक्षा के साथ पहले से लिखे किसी भी एनिमेशन का उपयोग कर सकते हैं।

 init(with animator: UIViewControllerAnimatedTransitioning) { self.animator = animator } 

सार्वजनिक इंटरफ़ेस काफी सरल है, चार विधियां, जिनमें से कार्यक्षमता स्पष्ट होनी चाहिए।

एनीमेशन को शुरू करने के लिए केवल एक ही क्षण को ध्यान में रखना है, हम कंटेनर के मूल दृश्य को लेते हैं और परत की गति 0 पर सेट करते हैं, इसलिए हमें मैन्युअल रूप से एनीमेशन की प्रगति को नियंत्रित करने की क्षमता मिलती है।

 // MARK: - Public func startInteractiveTransition(_ transitionContext: UIViewControllerContextTransitioning) { self.transitionContext = transitionContext transitionContext.containerView.superview?.layer.speed = 0 animator.animateTransition(using: transitionContext) } func updateInteractiveTransition(percentComplete: CGFloat) { setPercentComplete(percentComplete: (CGFloat(fmaxf(fminf(Float(percentComplete), 1), 0)))) } func cancelInteractiveTransition() { transitionContext?.cancelInteractiveTransition() completeTransition() } func finishInteractiveTransition() { transitionContext?.finishInteractiveTransition() completeTransition() } 

अब हम अपनी कक्षा के निजी लॉजिक ब्लॉक की ओर रुख करते हैं।

setPercentComplete परत के लिए एनीमेशन की प्रगति का समय ऑफसेट सेट करता है, पूरा होने और एनीमेशन की अवधि के प्रतिशत से मूल्य की गणना करता है।

 private func setPercentComplete(percentComplete: CGFloat) { setTimeOffset(timeOffset: TimeInterval(percentComplete) * duration) transitionContext?.updateInteractiveTransition(percentComplete) } private func setTimeOffset(timeOffset: TimeInterval) { transitionContext?.containerView.superview?.layer.timeOffset = timeOffset } 

जब उपयोगकर्ता ने अपने इशारे को बंद कर दिया है, तो completeTransition को कहा जाता है। यहां हम CADisplayLink क्लास का एक उदाहरण बनाते हैं, जो हमें उस बिंदु से खूबसूरती से एनीमेशन को स्वचालित रूप से पूरा करने की अनुमति देगा जब उपयोगकर्ता अब अपनी प्रगति को नियंत्रित नहीं करता है। हम अपने displayLink को run loop जोड़ते हैं ताकि जब भी डिवाइस की स्क्रीन पर एक नया फ्रेम प्रदर्शित करने की आवश्यकता हो, तो सिस्टम हमारे चयनकर्ता को कॉल करे।

 private func completeTransition() { displayLink = CADisplayLink(target: self, selector: #selector(tickAnimation)) displayLink!.add(to: .main, forMode: .commonModes) } 

हमारे चयनकर्ता में, हम एनीमेशन की प्रगति के अस्थायी विस्थापन की गणना और सेट करते हैं, जैसा कि हमने उपयोगकर्ता के इशारे के दौरान किया था, या हम एनीमेशन को पूरा करते हैं जब यह अपने प्रारंभ या अंत बिंदु तक पहुंचता है।

 @objc private func tickAnimation() { var timeOffset = self.timeOffset() let tick = (displayLink?.duration ?? 0) * TimeInterval(completionSpeed) timeOffset += (transitionContext?.transitionWasCancelled ?? false) ? -tick : tick; if (timeOffset < 0 || timeOffset > duration) { transitionFinished() } else { setTimeOffset(timeOffset: timeOffset) } } private func timeOffset() -> TimeInterval { return transitionContext?.containerView.superview?.layer.timeOffset ?? 0 } 

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

 private func transitionFinished() { displayLink?.invalidate() guard let layer = transitionContext?.containerView.superview?.layer else { return } layer.speed = 1; let wasNotCanceled = !(transitionContext?.transitionWasCancelled ?? false) if (wasNotCanceled) { let pausedTime = layer.timeOffset layer.timeOffset = 0.0; let timeSincePause = layer.convertTime(CACurrentMediaTime(), from: nil) - pausedTime layer.beginTime = timeSincePause } animator.animationEnded?(wasNotCanceled) } 

class AnimatedTransitioning: NSObject, UIViewControllerAnimatedTransitioning

अंतिम वर्ग जिसकी हमने अभी तक जांच नहीं की है, वह है UIViewControllerAnimatedTransitioning प्रोटोकॉल का क्रियान्वयन, जिसमें हम अपने एनीमेशन addTo , prepare , animation , finalize के प्रोटोकॉल विधियों के निष्पादन क्रम को नियंत्रित करते हैं। यहां सब कुछ काफी prosaic है, यह अधिक विशिष्ट UIView.animate(withDuration:animations:) बजाय एनीमेशन प्रदर्शन करने के लिए केवल UIViewPropertyAnimator का उपयोग करने के लायक है। ऐसा इसलिए किया जाता है ताकि एनीमेशन की प्रगति को और अधिक नियंत्रित किया जा सके, और यदि इसे रद्द कर दिया जाए, तो इसे finishAnimation(at: .start) अपनी finishAnimation(at: .start) स्थिति में लौटाएं। इसे finishAnimation(at: .start) , जो स्क्रीन पर एनीमेशन के अंतिम फ्रेम के अनावश्यक finishAnimation(at: .start) से बचा जाता है।

उपसंहार

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

— , - , . , - .

GitHub .

, , , !

:

1. Custom Container View Controller Transitions, Joachim Bondo.

   
   

   Objective C. Swift.

   
   
   
   

2. Interactive Custom Container View Controller Transitions, Alek Åström

   
   

   , Objective C, Swift.

   
   
   
   

3. SwipeableTabBarController

   
   

   , UITabBarController . .