كيف أطبِّق تأثير Animation يقوم بتغيير درجة لون عنصر مثل مستطيل أو دائرة عند الضغط عليه في الويندوز فون باستخدام Storyboard؟

هناك عدة أنواع من التأثيرات الحركية Animation في الويندوز فون مثل Double animation و Color Animation هما اكثر الأنواع استخدامًا

عندما تريد تطبيق تأثير تغيير درجة لون على عنصر ما فأنت تقوم بتغيير الخاصية Opacity (الشفافية) أي أن شفافية اللون ستتغير من درجة إلى درجة أخرى، وبما أن الخاصية opacity تأخذ قيمها من 0 إلى 1 وهي عبارة عن أرقام إذًا سيكون استخدام double animation هو المناسب في هذه الحالة.

لعمل ذلك نقوم بإنشاء storyboard وإعطاءه x:Name في جهة xaml من الصفحة وفي جزء الـ Resources بالتحديد كما في المثال التالي:

   <Storyboard x:Name="myStoryboard">
            <DoubleAnimation
            Storyboard.TargetName="MyAnimatedRectangle"
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:1"
            AutoReverse="True"/>
        </Storyboard>

وإنشاء DoubleAnimation وتحديد الخصائص:

أولًا خاصية storyboard.TargetName نكتب فيها اسم العنصر المراد تطبيق التأثير عليه أي الـ x:Name

خاصية storyboard.TargetProperty نكتب فيها اسم الخاصية المراد التأثير عليها، هنا سنقوم بالتأثير على الشفافية opacity (تكون هذه الخاصية من ضمن خواص العنصر).

الخاصيتين From و To  نكتب فيهما القيم التي نريد أن تتغير وفقها الشفافية (مثلًا أريد ان يتغير لون المستطيل من أغمق درجة لون للأزرق إلى أفتح درجة لون للأزرق أي الأبيض).

الخاصية Duration هي الزمن الذي سيتم فيه تطبيق التأثير (هل أريد ان يتغير اللون بشكل سريع أم بطيء؟) كلما كانت قيمة Duration أصغر كلما كان تغيير اللون أسرع.

آخر نقطة هي الخاصية AutoReverse  تسمح هذه الخاصية بإعادة تكرار التأثير بشكل متواصل أي من الأغمق إلى الأفتح ومن الأفتح إلى الأغمق (دون توقف)

إن كنت تريد تطبيق التأثير لمرة واحدة فقط قم بجعل AutoReverse  ="false" 

الآن لإنشاء العنصر نكتب الشيفرة التالية في Xaml الصفحة

  <Rectangle MouseLeftButtonUp="Rectangle_Tapped"
        x:Name="MyAnimatedRectangle"
        Width="300" Height="200" Fill="Blue" />

قمت بتحديد الحدث الذي أريد أن يطبق التأثير عند تنفيذه مثلًا الحدث Click أو MouseLeftButtonUp

وتسمية العنصر بـX:Name وتحديد لونه بالخاصية Fill

الآن نكتب الشيفرة التالية في الـCode Behind للحدث MouseLeftButtonUp

ليقوم بتنفيذ الـStoryboard وتنفيذ Animation

private void Rectangle_Tapped(object sender, MouseEventArgs e){
    myStoryboard.Begin();
}

كيف أطبِّق تأثير Animation يقوم بتغيير درجة لون عنصر في ويندو زفون