🦓 🕉️ 🐤 WPF में एनिमेशन 🤾🏼 👩🏻‍⚕️ ♦️

प्रस्तावना

अभिवादन, प्रिय habrayuzery! आज मैं आपको WPF में एनीमेशन के बारे में बताना चाहता हूँ। बेशक, उन्होंने इसके बारे में पहले हब पर लिखा था, लेकिन मैं और अधिक विस्तार से बताने की कोशिश करूंगा। मेरी पोस्ट शायद अधिक सैद्धांतिक होगी, हालांकि, मुझे उम्मीद है कि आप इससे लाभान्वित होंगे।

WPF में एनीमेशन हर उस चीज़ से अलग है जो आपने अपनी स्पष्टता और सादगी से पहले देखी थी। पहले, आपको टाइमर पर मैन्युअल रूप से दृश्य को फिर से लिखना था, ज़ाहिर है, एक बड़ी मात्रा में कोड लिख रहा था। अब आप XAML फ़ाइल में C # (या किसी अन्य .Net भाषा) में कोड की एक भी पंक्ति लिखे बिना एक एनीमेशन बना सकते हैं। बेशक, कोड में एनीमेशन बनाने का अवसर बना रहा, लेकिन हम इस बारे में बाद में बात करेंगे। WPF में एनीमेशन तत्व को फिर से नहीं बनाता है, लेकिन इसके गुणों को कुछ समय के अंतराल पर (डिफ़ॉल्ट रूप से, प्रति सेकंड लगभग 60 बार, जब तक आप इसे स्टोरीबोर्ड में नहीं बदलते) बदल देते हैं। उदाहरण के लिए, यह स्वयं को बने रहने की अनुमति देता है, यदि आप एक बटन को चेतन करते हैं, तो एनीमेशन के दौरान यह एक "बटन" रहेगा, अर्थात। आप इस पर क्लिक कर सकते हैं, और इस पर विभिन्न जोड़तोड़ कर सकते हैं।

कट के तहत बहुत सारे कोड, उदाहरण और चित्र ...

आर्किटेक्चर

WPF में सभी एनिमेशन System.Windows.Media.Animation नामस्थान में हैं । सभी एनीमेशन कक्षाएं, प्रकार के नाम से शुरू होती हैं, उदाहरण के लिए, DoubleAnimation डबल प्रकार के गुणों को एनिमेट करता है।

एनिमेशन तीन श्रेणियों में आते हैं:

1. लीनियर इंटरपोलेशन ( एनिमेशन प्रॉपर्टी टाइप ) का उपयोग करना

2. Keyframes का उपयोग एनिमेशन ( संपत्ति प्रकार UsingKeyFrames का उपयोग करके )

3. पथ एनिमेशन ( प्रयोग संपत्ति प्रकार )

सभी एनिमेशन एनिमेशनबेस प्रॉपर्टी टाइप से विरासत में मिले हैं। इस नाम स्थान में अधिकांश बीसीएल प्रकारों के लिए एनीमेशन कक्षाएं हैं।

आरंभ करने के लिए, आइए XAML में सबसे सरल एनीमेशन देखें:

< Button > < Button.Triggers > < EventTrigger RoutedEvent ="Button.Click" > < BeginStoryboard > < Storyboard > < ThicknessAnimation From ="0" To ="200" Duration ="0:0:5" Storyboard . TargetProperty ="Margin" /> </ Storyboard > </ BeginStoryboard > </ EventTrigger > </ Button.Triggers > </ Button > * This source code was highlighted with Source Code Highlighter .

आइए प्रत्येक वर्ग पर अधिक विस्तार से विचार करें:

• थिकनेसएनीमेशन - स्वयं एनीमेशन।

• स्टोरीबोर्ड - "टाइमलाइन"। हम बाद में इसके बारे में बात करेंगे।

• स्टार्टस्टोरीबोर्ड - स्टोरीबोर्ड के लिए "रैपर", जो एनीमेशन शुरू करता है।

• EventTrigger - एक घटना पर ट्रिगर।

बटन पर क्लिक करने के बाद, हम देखते हैं कि यह कम हो गया है:

क्लिक करने के लिए छोड़ दिया, सही के बाद।

MSDN पर एक समान उदाहरण। ऑब्जेक्ट टैग, दुर्भाग्य से, हैबरपर को छोड़ता नहीं है।

निर्भरता संपत्ति में परिवर्तन होने पर एनीमेशन को भी ट्रिगर किया जा सकता है:

< Button > < Button.Style > < Style > < Style.Triggers > < Trigger Property ="Button.IsPressed" Value ="True" > < Trigger.EnterActions > < BeginStoryboard > < Storyboard > < ThicknessAnimation From ="0" To ="200" Duration ="0:0:5" Storyboard . TargetProperty ="Margin" /> </ Storyboard > </ BeginStoryboard > </ Trigger.EnterActions > </ Trigger > </ Style.Triggers > </ Style > </ Button.Style > </ Button > * This source code was highlighted with Source Code Highlighter .

हालांकि, इस मामले में यह एक ही परिणाम देगा।

महीन ट्यूनिंग

Storyboard.TargetProperty प्रॉपर्टी

यह संलग्न संपत्ति एनीमेशन के लिए लक्ष्य संपत्ति सेट करती है। इस मामले में, हम मार्जिन को संपत्ति पर लागू करते हैं।

Storyboard.TargetName संपत्ति

यह संलग्न संपत्ति XAML दृश्यता के भीतर लक्ष्य तत्व का नाम निर्धारित करती है। यदि हम XAML में किसी अन्य तत्व के लिए एनीमेशन लागू करना चाहते हैं तो इसका उपयोग किया जाता है।

Storyboard.Target संपत्ति

यह संलग्न गुण लक्ष्य तत्व को सेट करता है, जिस पर हम एनीमेशन लागू करना चाहते हैं। कोड में एनिमेशन बनाते समय आमतौर पर उपयोग किया जाता है। MSDN पर उदाहरण।

संपत्ति से

यह संपत्ति प्रारंभिक मान सेट करती है, अर्थात स्टार्टअप पर, इस मूल्य का उपयोग किया जाएगा। हालांकि, इस संपत्ति को छोड़ा जा सकता है, और फिर वर्तमान मूल्य को प्रारंभिक मूल्य के रूप में उपयोग किया जाएगा। यह एक एनीमेशन के अंत की प्रतीक्षा किए बिना, एक और शुरू करने की अनुमति देता है, और एक ही समय में कोई "झटका" नहीं होगा। यदि आप चौड़ाई और ऊँचाई गुणों को एनिमेट कर रहे हैं, तो जाँच लें कि संपत्ति का मूल्य Double.NaN नहीं है।

को संपत्ति

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

संपत्ति द्वारा

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

संपत्ति सभी वर्गों द्वारा लागू नहीं की जाती है। मूल रूप से, यह संपत्ति संख्यात्मक एनिमेशन में मौजूद है।

IsAdditive संपत्ति

यह संपत्ति आपको सापेक्ष मूल्यों से और बनाने की अनुमति देती है। मोटे तौर पर, अगर यह संपत्ति ट्रू पर सेट है, तो प्रारंभिक मूल्य "वर्तमान मूल्य + से ", और अंतिम "वर्तमान मूल्य + टू " के बराबर होगा।

अवधि संपत्ति

यह संपत्ति एनीमेशन की अवधि निर्धारित करती है। नोट - इस संपत्ति का प्रकार TimeSpan नहीं है, बल्कि अवधि है । फिर समय क्यों लगता है? क्योंकि टाइमस्पैन के लिए एक निहित कास्ट है। "लेकिन फिर आपको अवधि की आवश्यकता क्यों है?" आप कहते हैं। फिर, वह अवधि मान Duration.Automatic (1 सेकंड के बराबर) और Duration.Forever (एनीमेशन कुछ भी नहीं) ले सकती है।

प्रारंभिक संपत्ति

यह संपत्ति एनीमेशन शुरू करने से पहले देरी सेट करती है। यहां मुझे लगता है कि सब कुछ स्पष्ट है। MSDN पर उदाहरण।

स्पीड अनुपात संपत्ति

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

AccelerationRatio और DecelerationRatio गुण

ये गुण त्वरण या मंदी के अंतराल को निर्दिष्ट करते हैं। इसका मूल्य प्रतिशत के रूप में इंगित किया गया है। उदाहरण के लिए, यदि आप AccelerationRatio गुणनफल को 0.5 पर सेट करते हैं, तो इसके आधे समय में एनीमेशन में तेजी आएगी। या यदि आप 4 सेकंड की कुल अवधि के साथ AccelerationRatio और DecelerationRatio 0.25 गुण प्रदान करते हैं, तो सब कुछ इस तरह से होगा:

1. 1 सेकंड से एनीमेशन का त्वरण

2. 2 सेकंड के लिए लगातार गति

3. 1 सेकंड के लिए एनीमेशन धीमा करें

इन संपत्तियों का मूल्य 1 से अधिक या 0 से कम नहीं हो सकता है।

ऑटोरियर प्रॉपर्टी

यदि यह संपत्ति सत्य है, तो एनीमेशन के अंत में इसे विपरीत दिशा में फिर से शुरू किया जाएगा। यानी यदि बटन बढ़ गया, तो यह घट जाएगा।

बिगिनटाइम केवल एनीमेशन की शुरुआत में लागू किया जाता है, विपरीत दिशा में देरी नहीं होगी।

एनिमेशन के प्रकार

अब प्रत्येक दृश्य पर अधिक विस्तार से विचार करें:

रैखिक एनीमेशन

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

कीफ़्रेम एनीमेशन

यह एनीमेशन कीफ़्रेम द्वारा संपत्ति को एनिमेट करता है। यदि आप 3 डी एनीमेशन के साथ काम कर रहे थे, तो आप मुझे समझेंगे।

कुंजी फ़्रेमों का एनीमेशन साधारण एनीमेशन के समान है, केवल एक शर्त के साथ - 1 से अधिक अंतिम मान हो सकते हैं।

इस XAML स्निपेट पर विचार करें:

< Border Background ="White" > < Border.Triggers > < EventTrigger RoutedEvent ="Border.MouseDown" > < EventTrigger.Actions > < BeginStoryboard > < Storyboard > < ColorAnimationUsingKeyFrames Storyboard . TargetProperty ="(Border.Background). (SolidColorBrush.Color)" > < LinearColorKeyFrame KeyTime ="0:0:2" Value ="Blue" /> < LinearColorKeyFrame KeyTime ="0:0:4" Value ="Red" /> < LinearColorKeyFrame KeyTime ="0:0:6" Value ="Green" /> </ ColorAnimationUsingKeyFrames > </ Storyboard > </ BeginStoryboard > </ EventTrigger.Actions > </ EventTrigger > </ Border.Triggers > </ Border > * This source code was highlighted with Source Code Highlighter .

ColorAnimationUsingKeyFrames - कीफ्रेम का उपयोग करके चेतन रंग।

LinearColorKeyFrame - प्रक्षेप के साथ रंग एनीमेशन की keyframes।

हमारे पास 3 चाबियां हैं। अब एनीमेशन को स्वयं कल्पना करें, इसलिए "फ्रेम द्वारा फ़्रेम" कहने के लिए :):

कीफ़्रेम के चार प्रकार हैं:

1. रैखिक प्रॉपर्टी टाइप KeyFrame - रैखिक प्रक्षेप का उपयोग कर एक कीफ़्रेम।

2. असतत संपत्ति टाइप करें KeyFrame - प्रक्षेप के बिना एक कीफ्रेम । यदि आप किसी संपत्ति के मूल्य को नाटकीय रूप से बदलना चाहते हैं तो इसका उपयोग किया जाता है। ObjectAnimationUsingKeyFrames के लिए कीफ़्रेम का एकमात्र प्रकार।

3. स्पाय प्रॉपर्टी टाइप KeyFrame - बेज़ियर कर्व द्वारा प्रक्षेपित एक कीफ़्रेम। वक्र बिंदु KeySpline संपत्ति द्वारा निर्धारित किए जाते हैं। बाकी LinearKeyFrame के समान है (मैं सादगी के लिए प्रकार को छोड़ देता हूं)।

4. आसान संपत्ति प्रकार KeyFrame - LinearKeyFrame के समान, केवल आपको चिकनाई फ़ंक्शन का उपयोग करने की अनुमति देता है। EasingFunction प्रॉपर्टी EasingFunctionBase के ऑब्जेक्ट को स्वीकार करती है , जो एक सुचारू फ़ंक्शन है। सभी उपलब्ध चिकनाई सुविधाएँ यहाँ देखें। MSDN पर चिकनेपन की गैलरी सुविधाएँ।

प्रत्येक कीफ़्रेम में दो गुण होते हैं:

• कीटाइम - वह समय निर्धारित करता है जब संपत्ति लक्ष्य मान लेती है।

• मूल्य - फ्रेम का लक्ष्य मूल्य। एनीमेशन के प्रकार पर निर्भर करता है।

पथ आधारित एनीमेशन

एक मूल्य निर्धारित करने के लिए पाथ-आधारित एनीमेशन एक PathGeometry ऑब्जेक्ट का उपयोग करता है।

आइए इस XAML टुकड़े पर करीब से नज़र डालें:

< Window.Resources > < PathGeometry x:Key ="path" > < PathFigure IsClosed ="True" > < ArcSegment Point ="1,0" Size ="50,25" IsLargeArc ="True" /> </ PathFigure > </ PathGeometry > < Storyboard x:Key ="storyboard" Storyboard . TargetName ="rect" > < DoubleAnimationUsingPath Storyboard . TargetProperty ="(Canvas.Left)" PathGeometry ="{StaticResource path}" Source ="X" Duration ="0:0:5" /> < DoubleAnimationUsingPath Storyboard . TargetProperty ="(Canvas.Top)" PathGeometry ="{StaticResource path}" Source ="Y" Duration ="0:0:5" /> </ Storyboard > </ Window.Resources > < Canvas > < Path Data ="{StaticResource path}" StrokeThickness ="2" Stroke ="Black" Canvas . Left ="50" /> < Rectangle x:Name ="rect" Stroke ="Black" StrokeThickness ="2" Width ="10" Height ="10" > < Rectangle.RenderTransform > < TranslateTransform X ="45" Y ="-5" /> </ Rectangle.RenderTransform > </ Rectangle > </ Canvas > * This source code was highlighted with Source Code Highlighter .

सब कुछ समान है, केवल पथ-आधारित एनीमेशन का उपयोग किया जाता है। PathGeometry गुण PathGeometry ऑब्जेक्ट सेट करता है जिसमें पथ की ज्यामिति होती है। स्रोत संपत्ति अपना आउटपुट मान सेट करती है, उदाहरण के लिए, X या Y समन्वय।

अंतिम परिणाम

MSDN पर उदाहरण। बेशक, उदाहरण एनीमेशन के प्लेबैक को नियंत्रित करने के बारे में है, लेकिन यह एकमात्र उदाहरण है जो मैंने पाया है कि पथ-आधारित एनीमेशन का उपयोग करता है।

स्टोरीबोर्ड - यह किस तरह का जानवर है?

आपने पहले ही देखा है कि मैं अक्सर स्टोरीबोर्ड का उपयोग करता हूं। मुझे लगता है कि यह आपके लिए स्पष्ट था कि यह एक एनीमेशन नहीं था। यह वर्ग आपको कई एनिमेशन समूहित करने की अनुमति देता है (इसलिए, यह टाइमलाइनग्रुप से विरासत में मिला है)। हम कह सकते हैं कि यह एनिमेशन के लिए एक कंटेनर है। यह बहुत सुविधाजनक है कि यह आपको उन सभी को एक साथ प्रबंधित करने की अनुमति देता है, अर्थात। उदाहरण के लिए प्रारंभ () विधि का उपयोग करके, तुरंत 10 एनिमेशन शुरू करें। बेशक, एकल एनिमेशन के लिए, यह पूरी तरह से वैकल्पिक है। हालाँकि, जैसा कि मैंने ऊपर लिखा है, BeginStoryboard.Storyboard संपत्ति स्टोरीबोर्ड प्रकार की है, इसलिए इसका उपयोग करने के लिए आपको इसके साथ एनीमेशन को "रैप" करने की आवश्यकता है।

कोड में एनीमेशन बनाएँ

यहाँ सब कुछ सरल है अगर आपने XAML का पता लगाया। यदि आप एक तत्व में एनीमेशन लागू करना चाहते हैं, तो बस इसे बनाएं और अंतिम तत्व पर बिगिनिमेशन () विधि को कॉल करें।

 var animation = new ThicknessAnimation(); animation.From = new Thickness(20); animation.To = new Thickness(100); animation.Duration = TimeSpan.FromSeconds(5); button.BeginAnimation(MarginProperty, animation);

आप संलग्न गुणों Storyboard.Target और Storyboard.TargetProperty का उपयोग करके एनीमेशन के लिए अंतिम तत्व और संपत्ति को मैन्युअल रूप से सेट कर सकते हैं, जो मैंने ऊपर लिखा था।

 var animation1 = new ThicknessAnimation(); animation1.From = new Thickness(5); animation1.To = new Thickness(25); animation1.Duration = TimeSpan.FromSeconds(5); Storyboard.SetTarget(animation1, button1); Storyboard.SetTargetProperty(animation1, new PropertyPath(MarginProperty)); var animation2 = new ThicknessAnimation(); animation2.From = new Thickness(5); animation2.To = new Thickness(25); animation2.Duration = TimeSpan.FromSeconds(5); Storyboard.SetTarget(animation2, button2); Storyboard.SetTargetProperty(animation2, new PropertyPath(MarginProperty)); var storyboard = new Storyboard(); storyboard.Children = new TimelineCollection {animation1, animation2}; storyboard.Begin();

पुनश्च मैं आपको नए साल की शुभकामनाएं देने का अवसर लेता हूं!

PSS मोबाइल डिवाइस पर पठनीयता बढ़ाने के लिए मार्कअप कोड "संकुचित" है (मैं अक्सर अपने WP7 से हब पढ़ता हूं)।

WPF में एनिमेशन