اذهب إلى المحتوى
  • 0

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

عامر بيرادي

السؤال

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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 على عنصر في ويندوز فون

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...