IOS पर सर्वव्यापी स्प्लैश स्क्रीन बनाना

हाय हमर!

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

बड़ी परियोजनाओं में शामिल कई डेवलपर्स के लिए, सुंदर एनिमेशन बनाने से जुड़ी समस्याओं को हल करना कीड़े, जटिल सुविधाओं और गर्म फिक्स की दुनिया में ताजी हवा की सांस बन जाता है। ऐसे कार्यों को लागू करना अपेक्षाकृत आसान है, और परिणाम आंख को भाता है और बहुत प्रभावशाली दिखता है! लेकिन ऐसे समय होते हैं जब मानक दृष्टिकोण लागू नहीं होते हैं, और फिर आपको सभी प्रकार के वर्कआर्स के साथ आने की आवश्यकता होती है।

पहली नज़र में, स्प्लैश स्क्रीन को अपडेट करने के कार्य में, एनीमेशन का निर्माण सबसे कठिन प्रतीत होता है, और बाकी सब "नियमित दिनचर्या" है। क्लासिक स्थिति: पहले हम एक स्क्रीन दिखाते हैं, और फिर एक कस्टम संक्रमण के साथ हम अगले एक को खोलते हैं - सब कुछ सरल है!

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

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

प्रत्येक स्थिति को संभालने के लिए कई if-else ब्लॉक की बैसाखी से बचने के लिए, स्प्लैश स्क्रीन को UIWindow स्तर पर दिखाया जाएगा। इस दृष्टिकोण का लाभ यह है कि हम पूरी तरह से परवाह नहीं करते हैं कि छप के नीचे क्या होता है: आवेदन की मुख्य विंडो में, एक टेप लोड हो सकता है, पॉप-अप कर सकता है या कुछ स्क्रीन पर एक एनिमेटेड संक्रमण कर सकता है। आगे, मैं हमारी चुनी हुई विधि के कार्यान्वयन के बारे में विस्तार से बात करूंगा, जिसमें निम्नलिखित चरण हैं:

• एक छप स्क्रीन तैयार करना।
  
• उपस्थिति का एनीमेशन।
  
• एनीमेशन छिपाएँ।
  

स्पलैश स्क्रीन तैयारी

सबसे पहले आपको एक स्थिर छप स्क्रीन तैयार करने की आवश्यकता है - वह है, एक स्क्रीन जो अनुप्रयोग शुरू होने पर तुरंत प्रकट होती है। आप इसे दो तरीकों से कर सकते हैं : प्रत्येक डिवाइस के लिए अलग-अलग रिज़ॉल्यूशन की छवियां प्रदान करें, या LaunchScreen.storyboard में इस स्क्रीन को LaunchScreen.storyboard । दूसरा विकल्प Apple द्वारा स्वयं अधिक तेज़, अधिक सुविधाजनक और अनुशंसित है, इसलिए हम इसका उपयोग करेंगे:


सब कुछ सरल है: एक लोगो के साथ एक ढाल पृष्ठभूमि और imageView साथ imageView ।

जैसा कि आप जानते हैं, यह स्क्रीन एनिमेटेड नहीं हो सकती है, इसलिए आपको एक और, समान रूप से समान बनाने की आवश्यकता है, ताकि उनके बीच का संक्रमण अदृश्य हो। Main.storyboard में एक ViewController जोड़ें:


पिछली स्क्रीन से अंतर यह है कि एक और imageView है जिसमें यादृच्छिक पाठ प्रतिस्थापित किया जाता है (निश्चित रूप से, इसे शुरू में छिपाया जाएगा)। अब इस नियंत्रक के लिए एक क्लास बनाएँ:

 final class SplashViewController: UIViewController { @IBOutlet weak var logoImageView: UIImageView! @IBOutlet weak var textImageView: UIImageView! var textImage: UIImage? override func viewDidLoad() { super.viewDidLoad() textImageView.image = textImage } } 

जिन तत्वों को हम चेतन करना चाहते हैं, उनके लिए IBOutlet अलावा, इस वर्ग में एक textImage गुण भी है - एक यादृच्छिक रूप से चयनित चित्र इसे पारित किया जाएगा। अब हम Main.storyboard वापस Main.storyboard और SplashViewController क्लास को संबंधित कंट्रोलर को इंगित करते हैं। उसी समय, प्रारंभिक ViewController में यूला के स्क्रीनशॉट के साथ एक imageView ताकि स्प्लैश के नीचे कोई खाली स्क्रीन न हो।

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

 protocol SplashPresenterDescription: class { func present() func dismiss(completion: @escaping () -> Void) } final class SplashPresenter: SplashPresenterDescription { func present() { //     } func dismiss(completion: @escaping () -> Void) { //     } } 

एक ही वस्तु छप स्क्रीन के लिए पाठ का चयन करेगी। पाठ को चित्र के रूप में प्रदर्शित किया गया है, इसलिए आपको Assets.xcassets में उपयुक्त संसाधन जोड़ने की आवश्यकता है। संसाधनों के नाम समान हैं, संख्या को छोड़कर - यह यादृच्छिक रूप से उत्पन्न होगा:

  private lazy var textImage: UIImage? = { let textsCount = 17 let imageNumber = Int.random(in: 1...textsCount) let imageName = "i-splash-text-\(imageNumber)" return UIImage(named: imageName) }() 

यह संयोग से नहीं था कि मैंने textImage को एक साधारण संपत्ति नहीं बनाया, अर्थात् lazy , बाद में आप समझेंगे कि क्यों।

शुरुआत में, मैंने वादा किया था कि स्प्लैश स्क्रीन को अलग UIWindow में प्रदर्शित किया जाएगा, इसके लिए आपको चाहिए:

• UIWindow बनाएं;
  
• SplashViewController और इसे rootViewController `ओम;
  
• windowLevel को .normal (डिफ़ॉल्ट मान) से बड़ा windowLevel ताकि यह विंडो मुख्य के ऊपर दिखाई दे।
  

SplashPresenter जोड़ें:

  private lazy var foregroundSplashWindow: UIWindow = { let splashViewController = self.splashViewController(with: textImage) let splashWindow = self.splashWindow(windowLevel: .normal + 1, rootViewController: splashViewController) return splashWindow }() private func splashWindow(windowLevel: UIWindow.Level, rootViewController: SplashViewController?) -> UIWindow { let splashWindow = UIWindow(frame: UIScreen.main.bounds) splashWindow.windowLevel = windowLevel splashWindow.rootViewController = rootViewController return splashWindow } private func splashViewController(with textImage: UIImage?) -> SplashViewController? { let storyboard = UIStoryboard(name: "Main", bundle: nil) let viewController = storyboard.instantiateViewController(withIdentifier: "SplashViewController") let splashViewController = viewController as? SplashViewController splashViewController?.textImage = textImage return splashViewController } 

आपको यह अजीब लग सकता है कि splashViewController और splashWindow का निर्माण अलग-अलग कार्यों में splashWindow किया जाता है, लेकिन बाद में यह काम आएगा।

हमने अभी तक एनिमेशन लॉजिक लिखना शुरू नहीं किया है और SplashPresenter पहले से ही बहुत सारे कोड हैं। इसलिए, मैं एक ऐसी संस्था बनाने का प्रस्ताव करता हूं जो सीधे तौर पर एनीमेशन से निपटेगी (साथ ही जिम्मेदारियों का यह विभाजन):

 protocol SplashAnimatorDescription: class { func animateAppearance() func animateDisappearance(completion: @escaping () -> Void) } final class SplashAnimator: SplashAnimatorDescription { private unowned let foregroundSplashWindow: UIWindow private unowned let foregroundSplashViewController: SplashViewController init(foregroundSplashWindow: UIWindow) { self.foregroundSplashWindow = foregroundSplashWindow guard let foregroundSplashViewController = foregroundSplashWindow.rootViewController as? SplashViewController else { fatalError("Splash window doesn't have splash root view controller!") } self.foregroundSplashViewController = foregroundSplashViewController } func animateAppearance() { //     } func animateDisappearance(completion: @escaping () -> Void) { //     } 

rootViewController को कंस्ट्रक्टर को पास किया जाता है, और सुविधा के लिए, rootViewController को इससे "एक्सट्रैक्टेड" किया जाता है, जिसे गुण में भी संग्रहीत किया जाता है, जैसे कि foregroundSplashViewController rootViewController ।

SplashPresenter जोड़ें:

  private lazy var animator: SplashAnimatorDescription = SplashAnimator(foregroundSplashWindow: foregroundSplashWindow) 

और उसके present और dismiss ठीक करें:

  func present() { animator.animateAppearance() } func dismiss(completion: @escaping () -> Void) { animator.animateDisappearance(completion: completion) } 

सब कुछ, पीछे सबसे उबाऊ हिस्सा, आप अंत में एनीमेशन शुरू कर सकते हैं!

सूरत एनीमेशन

चलो छप स्क्रीन की उपस्थिति के एनीमेशन के साथ शुरू करते हैं, यह सरल है:

• लोगो logoImageView ( logoImageView )।
  
• पाठ fader पर प्रकट होता है और थोड़ा सा उगता है ( textImageView )।
  

आपको याद दिला दूं कि डिफ़ॉल्ट रूप से UIWindow को अदृश्य बनाया जाता है, और इसे ठीक करने के दो तरीके हैं:

• उस पर makeKeyAndVisible मेथड makeKeyAndVisible कॉल करें;
  
• सेट संपत्ति। isHidden = false ।
  

दूसरी विधि हमारे लिए उपयुक्त है, क्योंकि हम नहीं चाहते हैं कि keyWindow ।

इसे SplashAnimator में SplashAnimator animateAppearance() में animateAppearance() विधि लागू करते हैं:

  func animateAppearance() { foregroundSplashWindow.isHidden = false foregroundSplashViewController.textImageView.transform = CGAffineTransform(translationX: 0, y: 20) UIView.animate(withDuration: 0.3, animations: { self.foregroundSplashViewController.logoImageView.transform = CGAffineTransform(scaleX: 88 / 72, y: 88 / 72) self.foregroundSplashViewController.textImageView.transform = .identity }) foregroundSplashViewController.textImageView.alpha = 0 UIView.animate(withDuration: 0.15, animations: { self.foregroundSplashViewController.textImageView.alpha = 1 }) } 

मुझे आपके बारे में पता नहीं है, लेकिन मैं जल्द से जल्द इस परियोजना को शुरू करना चाहूंगा और देखूंगा कि क्या हुआ! यह केवल AppDelegate खोलने के लिए बनी हुई है, splashPresenter संपत्ति को जोड़ें और उस पर present पद्धति को कॉल करें। उसी समय, 2 सेकंड के बाद, हम dismiss को कॉल करेंगे ताकि हमें इस फ़ाइल पर वापस न लौटना पड़े:

  private var splashPresenter: SplashPresenter? = SplashPresenter() func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { splashPresenter?.present() let delay: TimeInterval = 2 DispatchQueue.main.asyncAfter(deadline: .now() + delay) { self.splashPresenter?.dismiss { [weak self] in self?.splashPresenter = nil } } return true } 

स्प्लैश को छिपाने के बाद ऑब्जेक्ट को मेमोरी से हटा दिया जाता है।

हुर्रे, आप चला सकते हैं!

छिपने का एनीमेशन

दुर्भाग्य से (या सौभाग्य से), कोड की 10 लाइनें छिपने के एनीमेशन का सामना नहीं करेंगी। छेद के माध्यम से बनाना आवश्यक है, जो अभी भी घूमेगा और बढ़ेगा! अगर आपको लगता है कि "यह एक मुखौटा के साथ किया जा सकता है", तो आप बिल्कुल सही हैं!

हम मुख्य एप्लिकेशन विंडो की layer एक मुखौटा जोड़ देंगे (हम किसी विशिष्ट नियंत्रक से बंधना नहीं चाहते)। आइए इसे तुरंत करें, और एक ही समय में foregroundSplashWindow छिपाना।

  func animateDisappearance(completion: @escaping () -> Void) { guard let window = UIApplication.shared.delegate?.window, let mainWindow = window else { fatalError("Application doesn't have a window!") } foregroundSplashWindow.alpha = 0 let mask = CALayer() mask.frame = foregroundSplashViewController.logoImageView.frame mask.contents = SplashViewController.logoImageBig.cgImage mainWindow.layer.mask = mask } 

यहां यह ध्यान रखना महत्वपूर्ण है कि मैंने foregroundSplashWindow को छुपा दिया। एक और दिलचस्प बिंदु: चूंकि यह मुखौटा एनीमेशन के दौरान बढ़ेगा, आपको इसके लिए एक उच्च रिज़ॉल्यूशन लोगो का उपयोग करने की आवश्यकता है (उदाहरण के लिए, 1024x1024)। इसलिए मैंने SplashViewController जोड़ा:

  static let logoImageBig: UIImage = UIImage(named: "splash-logo-big")! 

देखिए क्या हुआ?


मुझे पता है, अब यह बहुत प्रभावशाली नहीं दिखता है, लेकिन सब कुछ आगे है, हम आगे बढ़ते हैं! विशेष रूप से चौकस देख सकता है कि एनीमेशन के दौरान लोगो तुरंत पारदर्शी नहीं बनता है, लेकिन कुछ समय के लिए। ऐसा करने के लिए, imageView subviews सभी imageView शीर्ष पर subviews एक लोगो के साथ एक imageView जोड़ें जो फीका द्वारा छिपाया जाएगा।

  let maskBackgroundView = UIImageView(image: SplashViewController.logoImageBig) maskBackgroundView.frame = mask.frame mainWindow.addSubview(maskBackgroundView) mainWindow.bringSubviewToFront(maskBackgroundView) 

तो, हमारे पास लोगो के रूप में एक छेद है, और छेद के नीचे ही लोगो है।


अब एक सुंदर ढाल पृष्ठभूमि और पाठ के स्थान पर वापस जाएं। किसी भी विचार यह कैसे करना है?
मेरे पास: windowLevel तहत एक और UIWindow (जो कि एक छोटी windowLevel साथ है, चलो इसे backgroundSplashWindow कॉल करते हैं), और फिर हम इसे ब्लैक बैकग्राउंड के बजाय देखेंगे। और, ज़ाहिर है, rootViewController' में एक SplashViewContoller , केवल आपको logoImageView को छिपाने की आवश्यकता होगी। ऐसा करने के लिए, SplashViewController में एक संपत्ति SplashViewController :

  var logoIsHidden: Bool = false 

और viewDidLoad() विधि में, जोड़ें:

  logoImageView.isHidden = logoIsHidden 

SplashPresenter अंतिम रूप SplashPresenter : splashViewController (with textImage: UIImage?) एक और logoIsHidden: Bool जोड़ें logoIsHidden: Bool पैरामीटर, जिसे SplashViewController पर पारित किया जाएगा।

 splashViewController?.logoIsHidden = logoIsHidden 

तदनुसार, जहां foregroundSplashWindow बनाया गया है, इस पैरामीटर के लिए false पारित किया जाना चाहिए, और backgroundSplashWindow लिए true

  private lazy var backgroundSplashWindow: UIWindow = { let splashViewController = self.splashViewController(with: textImage, logoIsHidden: true) let splashWindow = self.splashWindow(windowLevel: .normal - 1, rootViewController: splashViewController) return splashWindow }() 

आपको इस ऑब्जेक्ट को SplashAnimator में कंस्ट्रक्टर के माध्यम से फेंकने की आवश्यकता है ( foregroundSplashWindow समान)।

  private unowned let backgroundSplashWindow: UIWindow private unowned let backgroundSplashViewController: SplashViewController 

ताकि एक काले रंग की पृष्ठभूमि के बजाय हम एक ही स्पलैश स्क्रीन देखें, foregroundSplashWindow छिपने से ठीक पहले। आपको backgroundSplashWindow दिखाने की जरूरत है।

  backgroundSplashWindow.isHidden = false 

सुनिश्चित करें कि योजना सफल रही:


अब सबसे दिलचस्प हिस्सा छिपा हुआ एनीमेशन है! चूँकि आपको CALayer की आवश्यकता है, UIView नहीं, हम मदद के लिए CoreAnimation ओर रुख करेंगे। चलो रोटेशन के साथ शुरू करते हैं:

  private func addRotationAnimation(to layer: CALayer, duration: TimeInterval, delay: CFTimeInterval = 0) { let animation = CABasicAnimation() let tangent = layer.position.y / layer.position.x let angle = -1 * atan(tangent) animation.beginTime = CACurrentMediaTime() + delay animation.duration = duration animation.valueFunction = CAValueFunction(name: CAValueFunctionName.rotateZ) animation.fromValue = 0 animation.toValue = angle animation.isRemovedOnCompletion = false animation.fillMode = CAMediaTimingFillMode.forwards layer.add(animation, forKey: "transform") } 

जैसा कि आप देख सकते हैं, रोटेशन कोण की गणना स्क्रीन के आकार के आधार पर की जाती है, ताकि सभी उपकरणों पर यूला ऊपरी बाएं कोने में घूमती है।

लोगो स्केलिंग एनीमेशन:

  private func addScalingAnimation(to layer: CALayer, duration: TimeInterval, delay: CFTimeInterval = 0) { let animation = CAKeyframeAnimation(keyPath: "bounds") let width = layer.frame.size.width let height = layer.frame.size.height let coefficient: CGFloat = 18 / 667 let finalScale = UIScreen.main.bounds.height * coeficient let scales = [1, 0.85, finalScale] animation.beginTime = CACurrentMediaTime() + delay animation.duration = duration animation.keyTimes = [0, 0.2, 1] animation.values = scales.map { NSValue(cgRect: CGRect(x: 0, y: 0, width: width * $0, height: height * $0)) } animation.timingFunctions = [CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut), CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut)] animation.isRemovedOnCompletion = false animation.fillMode = CAMediaTimingFillMode.forwards layer.add(animation, forKey: "scaling") } 

यह finalScale ध्यान देने finalScale : अंतिम पैमाने की गणना स्क्रीन के आकार (ऊंचाई के अनुपात में) के आधार पर भी की जाती है। यही है, 667 अंक (iPhone 6) की स्क्रीन ऊंचाई के साथ, यूला को 18 गुना बढ़ना चाहिए।

लेकिन सबसे पहले, यह थोड़ा कम हो जाता है ( scales और keyTimes में दूसरे तत्वों के अनुसार)। यही है, उस समय 0.2 * duration (जहां duration स्केलिंग एनीमेशन की कुल अवधि है), युला का पैमाना 0.85 होगा।

हम पहले से ही फिनिश लाइन पर हैं! animateDisappearance विधि में animateDisappearance सभी एनिमेशन चलाएं:

1) मुख्य विंडो ( mainWindow ) की स्केलिंग।
2) रोटेशन, स्केलिंग, लोगो का गायब होना ( maskBackgroundView )।
3) रोटेशन, "छेद" ( mask ) के स्केलिंग।
4) पाठ का गायब होना ( textImageView )।

  CATransaction.setCompletionBlock { mainWindow.layer.mask = nil completion() } CATransaction.begin() mainWindow.transform = CGAffineTransform(scaleX: 1.05, y: 1.05) UIView.animate(withDuration: 0.6, animations: { mainWindow.transform = .identity }) [mask, maskBackgroundView.layer].forEach { layer in addScalingAnimation(to: layer, duration: 0.6) addRotationAnimation(to: layer, duration: 0.6) } UIView.animate(withDuration: 0.1, delay: 0.1, options: [], animations: { maskBackgroundView.alpha = 0 }) { _ in maskBackgroundView.removeFromSuperview() } UIView.animate(withDuration: 0.3) { self.backgroundSplashViewController.textImageView.alpha = 0 } CATransaction.commit() 

एनीमेशन को पूरा करने के लिए मैंने CATransaction का उपयोग किया। इस मामले में, यह CAAnimation तुलना में अधिक सुविधाजनक है, क्योंकि CAAnimation माध्यम से सभी एनिमेशन नहीं किए जाते हैं।

निष्कर्ष

इस प्रकार, आउटपुट में हमें एक घटक मिला है जो एप्लिकेशन लॉन्च के संदर्भ पर निर्भर नहीं करता है (चाहे वह एक डिप्लोमा था, एक धक्का अधिसूचना, एक सामान्य शुरुआत, या कुछ और)। एनीमेशन वैसे भी सही ढंग से काम करेगा!

आप यहां प्रोजेक्ट डाउनलोड कर सकते हैं।