• 0

كيف أطبّق تأثير حركي Transform على عنصر في ويندوزفون؟

كيف يمكن تحريك عنصر ما في ويندوز فون كعنصر ellips مثلًا عند الضغط عليه؟ (أريد عند الضغط على كرة ellips مثلًا أن تتحرك للأسفل ثم تعود لمكانها) أرجو الشرح مع مثال

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

التأثيرات الحركية في ويندوز فون لها عدة أنواع منها تحريك Translate ومنها دوران Rotate، لتطبيق تأثير حركي على عنصر نقوم بتحديد الخاصية RenderTransform وبالتالي تحديد الخاصية TranslateTransform التي تعمل على تحريك العنصر بشكل مستقيم إما على المحور X أو المحور Y أي بشكل عمودي أو أفقي.

لكن ليتم تطبيق التأثير الحركي علينا إنشاء StoryBoard لتحديد نوع التأثير animation الذي سيطبق على خاصية التحريك Translate.

لنفرض أنه لدينا عنصر ellips ونريد عند الضغط عليها أن تتحرك للأسفل باتجاه Y ومن ثم تعود لمكانها، التحريك إذن يعتمد على تغيير قيمة Y للعنصر أي سنقوم بإنشاء DoubleAnimation في الـStoryboard وتحديد الخاصية Y في StoryBoard.TargetProperty ومن ثم قيمتها في في الخاصية To.

الآن في الخاصية Storyboard.TargetName نكتب المعرف x:Name الخاص TranslateTransform ليتم تطبيق التأثير animation عليه، مثال:

إنشاء Ellips وStoryboard في الخاصية Resource للـ Ellips:

 <Ellipse Fill="Red" HorizontalAlignment="Left" Height="100" Margin="209,43,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="100" RenderTransformOrigin="-3.386,0.383" ManipulationStarted="Ellipse_ManipulationStarted">
            <Ellipse.Resources>
                <Storyboard x:Name="myStoryBoard">
                    <DoubleAnimation Storyboard.TargetName="traslateTrans" Storyboard.TargetProperty="Y" AutoReverse="True" To="400" Duration="0:0:0.5"></DoubleAnimation>
                </Storyboard>
            </Ellipse.Resources>

تحديد الخاصية RenderTransform في العنصر Ellips

 <Ellipse.RenderTransform>
                
  </Ellipse.RenderTransform>

تحديد نوع التحريك في الخاصية RenderTransform وهو TranslateTransform

 <Ellipse.RenderTransform>
                <TranslateTransform x:Name="traslateTrans"></TranslateTransform>
   </Ellipse.RenderTransform>

في الحدث ManipulationStarted للـEllips نكتب:

private void Ellipse_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
        {
            myStoryBoard.Begin();
        }

عند التشغيل

ellips1.thumb.png.88807a118552812a1f898a

عند الضغط على الكرة

ellips2.thumb.png.499eca6f2098c1d9a54a99

وثم تعود لمكانها

ellips3.thumb.png.ee1cb51b24085e62bc5d59

تطبيق تأثير Animation على عنصر في ويندوز فون

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن