🥟 🍬 🍍 पैंतालिव अवलोनिया 🈳 👨🏿‍⚖️ 🎞️

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

यहाँ कुछ उदाहरण दिए गए हैं:

हम सबसे सरल एनीमेशन को देखेंगे, जिससे बहुत से लोग परिचित हैं:

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

समाधान में 2 फाइलें जोड़ें:

सीएस फाइल में, बस एक वर्ग बनाएं जो हमें ContentControl से विरासत में मिलेगा, और हमने इसमें कुछ और नहीं जोड़ा, क्योंकि सारा जादू केवल xaml से ही होगा।

    public class LoadRound:ContentControl
    {
        
  }

सबसे पहले, हमारे भविष्य के एनीमेशन के लिए एक टेम्पलेट बनाएं:

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cc="clr-namespace:Load.Controls">
    <Style Selector="cc|LoadRound">
  </Style>
</Styles>

यहां हमने संकेत दिया कि भविष्य का डिजाइन उपरोक्त वर्ग के साथ जुड़ा होगा।
अब टेम्पलेट में भरें। ऐसा करने के लिए, हमें कैनवास पर एक सर्कल में रखे गए 8 काले घेरे चाहिए।

<Style Selector="cc|LoadRound">
        <Setter Property="Template">
            <ControlTemplate>
                <Grid ClipToBounds="True">

                    <ContentPresenter Name="Content"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}" />
                    <Canvas Width="160" Height="160" 
                            IsHitTestVisible="False">
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_8" Canvas.Left="60" Canvas.Top="20"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_7" Canvas.Left="100" Canvas.Top="40"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_6" Canvas.Left="120" Canvas.Top="80"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_5" Canvas.Left="100" Canvas.Top="120"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_4" Canvas.Left="60" Canvas.Top="140"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_3" Canvas.Left="20" Canvas.Top="120"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40" Classes="ellipse pos_el_2" Canvas.Left="0" Canvas.Top="80"
                                 Fill="Black" />
                        <Ellipse Width="40" Height="40"  Classes="ellipse pos_el_1" Canvas.Left="20" Canvas.Top="40"
                                 Fill="Black" />
                    </Canvas>
                </Grid>
            </ControlTemplate>
        </Setter>
    </Style>

इसलिए हमें किसी प्रकार की स्थिर तस्वीर मिलती है।

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

<Style Selector="Ellipse.pos_el_1">
        <Style.Animations>
            <Animation Duration="0:0:0.5" IterationCount="INFINITE">
                <KeyFrame Cue="0%">
                    <Setter Property="Opacity" Value="0.17" />
                </KeyFrame>
                <KeyFrame Cue="14%">
                    <Setter Property="Opacity" Value="0.34" />
                </KeyFrame>
                <KeyFrame Cue="28%">
                    <Setter Property="Opacity" Value="0.50" />
                </KeyFrame>
                <KeyFrame Cue="42%">
                    <Setter Property="Opacity" Value="0.67" />
                </KeyFrame>
                <KeyFrame Cue="56%">
                    <Setter Property="Opacity" Value="0.84" />
                </KeyFrame>
                <KeyFrame Cue="70%">
                    <Setter Property="Opacity" Value="1" />
                </KeyFrame>
                <KeyFrame Cue="84%">
                    <Setter Property="Opacity" Value="0" />
                </KeyFrame>
                <KeyFrame Cue="100%">
                    <Setter Property="Opacity" Value="0.07" />
                </KeyFrame>
            </Animation>
        </Style.Animations>
    </Style>

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

और हमें ऐसी झपकी आती है। और इस एनीमेशन (सभी समय के साथ) को सभी सर्कल में लागू करने से हमें "आंदोलन" का प्रभाव मिलता है जो हमारे लिए आवश्यक है।

हमारे नए नियंत्रण का उपयोग करने के लिए, आपको मुख्य विंडो के विवरण में इसके नामस्थान को जोड़ना होगा।

xmlns:controls="clr-namespace:Load.Controls"

पेज पर ही नियंत्रण जोड़ें

<controls:LoadRound />

और खिड़की के भीतर एक शैली लागू करें जो हमारे नियंत्रण में दृश्य जोड़ता है।

    <Window.Styles>
        <StyleInclude Source="avares://Load/Controls/LoadRound.xaml" />
    </Window.Styles>

सी # के लिए समर्थन यहां पाया जा सकता है , और यहां एवलोनिया के लिए ।

पैंतालिव अवलोनिया

More articles: