स्विफ्टयूआई पर एनिमेटेड कार्ड

आइए, SwiftUI पर हावभाव समर्थन के साथ एनिमेटेड कार्ड SwiftUI :

मैं एक विस्तृत पूर्वावलोकन जोड़ना चाहता था, लेकिन जीआईएफ का आकार रूढ़िवादी नहीं है। एक बड़े पूर्वावलोकन को लिंक पर या वीडियो ट्यूटोरियल में देखा जा सकता है।

की आवश्यकता होगी

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

आप Applications अनुभाग में लिंक से इसे डाउनलोड कर सकते हैं।

SwiftUI साथ काम करते हुए आपने रियलटाइम प्रीव्यू देखा SwiftUI । इसे सक्रिय करने के लिए, साथ ही कुछ संदर्भ मेनू में, आपको बीटा macOS Catalina को स्थापित करने की आवश्यकता है। यह दर्द के बिना नहीं होगा। मैंने शर्त नहीं लगाई, इसलिए मैं पुराने ढंग से सिम्युलेटर चलाऊंगा।

नई परियोजना

अतिरिक्त चेकमार्क के साथ एक Single View Application बनाएं - SwiftUI :

ContentView.swift फ़ाइल पर जाएं। पूर्वावलोकन के लिए वारिस PreviewProvider पूर्वावलोकन के लिए जिम्मेदार है। चूंकि हम इसका उपयोग नहीं करेंगे, इसलिए हम न्यूनतम आवश्यक कोड छोड़ देंगे:

 import SwiftUI struct ContentView: View { var body: some View { } } 

मुझे उम्मीद है कि SwiftUI बारे में पहले से ही एक आम समझ है, हम तुच्छ बिंदुओं पर ध्यान नहीं देंगे।

पत्ते

कार्ड एक के बाद एक व्यवस्थित किए जाते हैं, इसलिए हम ZStack उपयोग ZStack । आपको याद दिला दूं कि समूह तत्वों के लिए दो और विकल्प हैं: HStack - क्षैतिज और VStack - अनुलंब रूप से। स्पष्टता के लिए:

पहला कार्ड जोड़ें:

 struct ContentView: View { var body: some View { return ZStack { Rectangle() .fill(Color.black) .frame(height: 230) .cornerRadius(10) .padding(16) } } } 

यहाँ हमने एक आयत जोड़ा, काले रंग का, 230pt ऊँचा, किनारों को 10pt गोल किया और हाशिये के सभी पक्षों को 16pt पर सेट किया।

आयत के बाद कार्ड में पाठ ZStack ब्लॉक में जोड़ा जाता है:

 Text("Main Card") .color(.white) .font(.title) .bold() 

इंटरमीडिएट का रिजल्ट देखने के लिए प्रोजेक्ट चलाएं:

लेकिन उनमें से तीन हैं!

सुविधा के लिए, हम MainCard कोड MainCard करेंगे:

 struct MainCard: View { var title: String var body: some View { ZStack { Rectangle() .fill(Color.black) .frame(height: 230) .cornerRadius(10) .padding(16) Text(title) .color(.white) .font(.largeTitle) .bold() } } } 

title इनिशियलाइज़र में दिखाई देगा। यह टेक्स्ट कार्ड पर होगा। ContentView एक कार्ड जोड़ें, उसी समय हम इनिशियलाइज़र में एक नया पैरामीटर देखेंगे:

 struct ContentView: View { var body: some View { return MainCard(title: "Main Card") } } 

हमें पहले से ही पता है कि कोड कैसे बनाया जाता है, इसलिए तुरंत पृष्ठभूमि कार्ड के लिए एक क्लास परिभाषित करें:

 struct Card: View { var title: String var body: some View { ZStack { Rectangle() .fill(Color(red: 68 / 255, green: 41 / 255, blue: 182 / 255)) .frame(height: 230) .cornerRadius(10) .padding(16) Text(title) .color(.white) .font(.title) .bold() } } } 

पाठ के लिए एक अलग रंग और शैली सेट करें। बाकी कोड मुख्य ब्लैक MainCard दोहराता है। ContentView दो बैकग्राउंड कार्ड जोड़ें। कार्ड एक के बाद एक व्यवस्थित किए जाते हैं, इसलिए हम उन्हें ZStack में ZStack । ContentView कोड:

 struct ContentView: View { var body: some View { return ZStack { Card(title: "Third card") Card(title: "Second Card") MainCard(title: "Main Card") } } } 

पृष्ठभूमि कार्ड काले रंग के नीचे स्थित होते हैं और अब तक वे दिखाई नहीं देते हैं। किनारों से ऊपर की ओर ऑफसेट और पैडिंग जोड़ें:

 Card(title: "Third card") .blendMode(.hardLight) .padding(64) .padding(.bottom, 64) Card(title: "Second Card") .blendMode(.hardLight) .padding(32) .padding(.bottom, 32) MainCard(title: "Main Card") 

अब परिणाम ट्यूटोरियल की शुरुआत में घोषणा जैसा दिखता है:

चलो इशारों पर चलते हैं, और इसके साथ ही एनिमेशन तक।

इशारों

जिस तरह से इशारों को लागू किया जाता है वह मुझे शून्य कर्म के लिए मजबूर करेगा और एक विषाक्त समीक्षा छोड़ देगा।

इससे पहले कि आप कोड देखें, कृपया ध्यान दें - यह एक उदाहरण के रूप में developer.apple.com पर सूचीबद्ध है। पहली धारणा भ्रामक है, व्यवहार में मुझे यह पसंद आया।

ContentView में घोषणा करें:

 enum DragState { case inactive case dragging(translation: CGSize) var translation: CGSize { switch self { case .inactive: return .zero case .dragging(let translation): return translation } } var isActive: Bool { switch self { case .inactive: return false case .dragging: return true } } } 

DragState एक इशारे के साथ काम को और अधिक आरामदायक बना देगा। सामग्री दृश्य में ड्रैगस्टेट dragState जोड़ें:

 @GestureState var dragState = DragState.inactive 

जादू होगा।

जहां भी dragState का उपयोग किया जाएगा, नए मूल्य अपने आप लागू हो जाएंगे। एक इशारा घोषित करें:

 let dragGester = DragGesture() .updating($dragState) { (value, state, transaction) in state = .dragging(translation: value.translation) } 

मुख्य कार्ड में एक इशारा जोड़ें और offset सेट करें:

 MainCard(title: "Main Card") .offset( x: dragState.translation.width, y: dragState.translation.height ) .gesture(dragGester) 

जब यह एक्सेस किया जाता है तो क्या ऑफसेट पैरामीटर के मूल्य के बराबर होगा? नहीं, यह हमेशा बराबर होगा । यह जादू है।

कार्ड फॉलो करेंगे एक उंगली से एक माउस के साथ, लेकिन एनिमेशन के बिना:

पृष्ठभूमि कार्ड को भी अपनी स्थिति बदलनी चाहिए ( कम से कम हम ऐसा चाहते थे )। उनके लिए कोड जोड़ें जो इशारे की स्थिति से बंधा हुआ है। rotation3DEffect एडेक्ट कार्ड को घुमाएगा जब तक इशारा सक्रिय नहीं हो जाता:

 Card(title: "Third card") .rotation3DEffect(Angle(degrees: dragState.isActive ? 0 : 60), axis: (x: 10.0, y: 10.0, z: 10.0)) .blendMode(.hardLight) .padding(dragState.isActive ? 32 : 64) .padding(.bottom, dragState.isActive ? 32 : 64) Card(title: "Second Card") .rotation3DEffect(Angle(degrees: dragState.isActive ? 0 : 30), axis: (x: 10.0, y: 10.0, z: 10.0)) .blendMode(.hardLight) .padding(dragState.isActive ? 16 : 32) .padding(.bottom, dragState.isActive ? 0 : 32) 

आप 3D का उपयोग कैसे कर सकते हैं, आप यहां देख सकते हैं । मैंने blendMode भी जोड़ा। मोड फ़ोटोशॉप और स्केच में उपकरण के समान हैं।

जबकि परिवर्तन एनिमेटेड नहीं लागू होते हैं, चलो इसे ठीक करते हैं।

एनीमेशन

आपको आश्चर्य होगा कि यह कितना सरल है। बस एक पंक्ति जोड़ें:

 .animation(.spring()) 

प्रत्येक कार्ड के लिए जोड़ें। अब किसी भी परिवर्तन को एनिमेटेड रूप से लागू किया जाएगा, हमारे मामले में, ये इंडेंटेशन-आकार, 3 डी रोटेशन और offset । यदि आपको घटता के साथ एनीमेशन की आवश्यकता है, तो basic मोड का उपयोग करें।

अलंकरण

ऑफसेट से बंधे मुख्य दृश्य की छाया और रोटेशन जोड़ें:

 .rotationEffect(Angle(degrees: Double(dragState.translation.width / 10))) .shadow(radius: dragState.isActive ? 8 : 0) 

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

साधकों के लिए

→ परियोजना कोड भंडार में पाया जा सकता है

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

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