कस्टम AnimatableModifier और Animatable
Animatable और AnimatableModifier के अनुरूप बनकर कस्टम बनाए गए कंटेंट को एनिमेट करें।
कस्टम AnimatableModifier और Animatable, CoddyKit पर Swift Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Swift Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Swift Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Animatable प्रोटोकॉल
Animatable SwiftUI को बताता है कि एनीमेशन के दौरान किसी प्रकार के मानों के बीच मध्यवर्ती मान कैसे निकाले जाएँ। आकृतियाँ अपने-आप इसके अनुरूप हो जाती हैं।
struct Wave: Shape, Animatable {
var amplitude: Double
var animatableData: Double {
get { amplitude }
set { amplitude = newValue }
}
func path(in rect: CGRect) -> Path { Path() }
}animatableData गुणधर्म
SwiftUI प्रत्येक एनीमेशन फ़्रेम पर animatableData को पढ़ता और लिखता है, ताकि आरंभिक और अंतिम मानों के बीच मध्यवर्ती मान निकाले जा सकें।
struct GrowingCircle: Shape {
var radius: Double
var animatableData: Double {
get { radius }
set { radius = newValue }
}
func path(in rect: CGRect) -> Path {
Path(ellipseIn: CGRect(x: rect.midX-radius, y: rect.midY-radius, width: radius*2, height: radius*2))
}
}कई मानों के लिए AnimatablePair
दो स्वतंत्र मानों को एक साथ एनिमेट करने के लिए AnimatablePair का उपयोग करें।
struct Sector: Shape {
var startAngle: Double, endAngle: Double
var animatableData: AnimatablePair<Double, Double> {
get { AnimatablePair(startAngle, endAngle) }
set { startAngle = newValue.first; endAngle = newValue.second }
}
func path(in rect: CGRect) -> Path { Path() }
}ViewModifier + Animatable
ViewModifier को Animatable के अनुरूप बनाने से आप मनमाने दृश्य प्रभावों को एनिमेट कर सकते हैं।
struct Shake: ViewModifier, Animatable {
var animatableData: Double = 0
func body(content: Content) -> some View {
content.offset(x: sin(animatableData * .pi * 4) * 8)
}
}एनीमेशन को संचालित करना
withAnimation के अंदर एनिमेट किए जाने वाले मान को बदलें और SwiftUI animatableData के माध्यम से उसके बीच के मान निकाल देगा।
struct ShakeView: View {
@State private var shakes = 0.0
var body: some View {
Text("Hello")
.modifier(Shake(animatableData: shakes))
.onTapGesture {
withAnimation(.linear(duration: 0.5)) { shakes += 1 }
}
}
}AnimatableModifier (अप्रचलित) बनाम Animatable + ViewModifier
बाद के SDK में AnimatableModifier अप्रचलित है। अपने ViewModifier को सीधे Animatable के अनुरूप बनाना बेहतर है।
// Modern approach:
struct MyMod: ViewModifier, Animatable { ... }
// Avoid (deprecated):
// struct MyMod: AnimatableModifier { ... }animatableData के रूप में कस्टम संख्या प्रकार
VectorArithmetic के अनुरूप बनने वाला कोई भी प्रकार animatableData हो सकता है। Swift के सीजीफ़्लोट, डबल और AnimatablePair सभी इसके योग्य हैं।
extension MyColor: VectorArithmetic {
static func += (lhs: inout MyColor, rhs: MyColor) { ... }
mutating func scale(by rhs: Double) { ... }
var magnitudeSquared: Double { ... }
}प्रगति-आधारित मॉडिफ़ायर
एक सामान्य पैटर्न यह है: progress मान को 0 से 1 तक एनिमेट करें और मॉडिफ़ायर के अंदर दृश्य गुणधर्मों की गणना करें।
struct FillModifier: ViewModifier, Animatable {
var progress: Double
var animatableData: Double { get { progress } set { progress = newValue } }
func body(content: Content) -> some View {
content.overlay(Color.blue.opacity(progress))
}
}.animation के साथ श्रृंखलाबद्ध करना
अवस्था में बदलाव होने पर एनिमेट किए जाने वाले मॉडिफ़ायर के प्रगति मान को अपने-आप संचालित करने के लिए उसमें एनीमेशन जोड़ें।
Text("Loading")
.modifier(FillModifier(progress: isLoaded ? 1 : 0))
.animation(.easeInOut(duration: 1.0), value: isLoaded)कस्टम आकृतियों को एनिमेट करना
सबसे शक्तिशाली उपयोग: animatableData के माध्यम से नियंत्रण बिंदुओं के बीच मध्यवर्ती मान निकालकर दो पथ-आकृतियों के बीच रूपांतरण करना।
struct Blob: Shape, Animatable {
var bulge: Double
var animatableData: Double { get { bulge } set { bulge = newValue } }
func path(in rect: CGRect) -> Path {
// compute bezier with bulge-adjusted control points
Path()
}
}प्रदर्शन
SwiftUI प्रत्येक एनीमेशन फ़्रेम पर मॉडिफ़ायर के body को कॉल करता है। सहज 60/120 फ़्रेम प्रति सेकंड के लिए body के अंदर की गणना को न्यूनतम रखें।
// OK: simple math in body
// AVOID: network calls, heavy computation in animated bodyत्वरित जाँच
कस्टम एनिमेट किए जा सकने वाले प्रकार के बीच मध्यवर्ती मान निकालने के लिए SwiftUI प्रत्येक एनीमेशन फ़्रेम पर क्या पढ़ता और लिखता है?
पाठ का पुनरावलोकन
आकृतियों या दृश्य मॉडिफ़ायर को Animatable के अनुरूप बनाएँ और animatableData (एक VectorArithmetic मान) उपलब्ध कराएँ। SwiftUI प्रत्येक फ़्रेम पर इसके बीच के मान निकालता है। दो मानों के लिए AnimatablePair का उपयोग करें। इसे withAnimation या .animation से संचालित करें।
एआई शिक्षक के साथ Swift सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 122
- पाठ
- 409
अक्सर पूछे जाने वाले प्रश्न
क्या “कस्टम AnimatableModifier और Animatable” पाठ निःशुल्क है?
हाँ — Swift Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “कस्टम AnimatableModifier और Animatable” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Swift Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“कस्टम AnimatableModifier और Animatable” में मैं क्या सीखूँगा?
Animatable और AnimatableModifier के अनुरूप बनकर कस्टम बनाए गए कंटेंट को एनिमेट करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Swift Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Swift Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Swift Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“कस्टम AnimatableModifier और Animatable” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Swift Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Swift Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- अंतर्निहित बनाम स्पष्ट एनिमेशन
- Hero ट्रांज़िशन के लिए matchedGeometryEffect
- कस्टम AnimatableModifier और Animatable
- उच्च-प्रदर्शन ड्रॉइंग के लिए TimelineView और Canvas