تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
الصور المتحركة في الدوت نت Animation الجزء الرابع
#1
كاتب الموضوع : silverlight

الموضوع : الصور المتحركة في الدوت نت Animation
اللغة المستخدمة: الفيجوال بيسك
التطبيق: فيجوال استوديو 2008
الدوت نت : .Net Framework 3.5


مـقـدمـة:

اليوم سنحاول أن نضيف بعض المؤثرات الإضافية لكن قبل ذلك لنتحدث عن Timer وأهميته في تحريك الصور

الكلاس System.Threading.Timer Class يمتلك دوال رائعة وتسمي CallBack Functions وبالرغم من أن هذا الكلاس يمتلك القليل من القدرات ولكن هذه القدرات ستظل لها أهميتها ويمكن توضيح هذه القدرات كالتالي

المقدرة علي استخدام وتحديد CallBack
المقدرة علي كيفية تحديد الفترة الزمنية المناسبة قبل تنفيذ CallBack
المقدرة علي كيفية تحديد الفترة الزمنية بين كل CallBack وأخر مثله

هذه القدرات الثلاثة أعلاه تعطيك قوة كبيرة جدا لكي لكي يكون لك اليد العليا في أن تتحكم في تسريع عمليات الرسم GDI+ Speed

هناك كلاس أخر له نفس الأهمية وهو System.Timers.Timer Class حيث يفضل البعض إستخدامه بدلا من System.Threading.Timer Class حيث هنا نقوم بعمل Hook مع الحدث Ellapsed Event ثم نقوم بتحديد ما يسمي Ellapsed Time ومن ثم نستخدمه في تسريع عمليات الرسم

عموما الكلاسان سيؤديان نفس الهدف والأمر بالنهاية متروك للمبرمج في إستخدام أي من الكلاسان

لنعطي مثالا علي كيفية استخدام كل من هذان الكلاسان

المثال الأول:


هذا المثال يوضح كيفية استخدام الكلاس System.Timers.Timer Class لكي نرسم شيئا ما علي سطح الفورم

والخطوات اتالية توضح كيفية عمل ذلك

1- نقوم بتعريف متغير بعبر عن Timer


كود :
Private m_timer As New System.Timers.Timer()
2- نقوم ببناء روتين أو إجراء ومن خلاله نقوم بعمل Hook مع Ellapsed Event ومن ثم نقوم بعمل Enable لهذا التايمر


كود :
Private Sub StartTimer(ByVal m_Interval As Integer)
AddHandler m_timer.Elapsed, AddressOf TimerTick
m_timer.Interval = m_Interval
m_timer.Enabled = True
End Sub
3- نقوم بتحديد ما نريده في Ellapsed Event


كود :
Private Sub TimerTick(ByVal source As Object, _
ByVal e As System.Timers.ElapsedEventArgs)
Invalidate()
End Sub
4- نقوم برسم أي شئ داخل الحدث Paint الخاص بالفورم


كود :
Private Sub Form2_Paint(ByVal sender As System.Object, _
ByVal e As PaintEventArgs) Handles MyBase.Paint

Dim path As New Drawing2D.GraphicsPath()
Dim stringText As String = Date.Now
Dim family As New FontFamily("Verdana")
Dim myfontStyle As Integer = CInt(FontStyle.Bold)
Dim emSize As Integer = 20
Dim origin As New Point(0, 0)
Dim format As StringFormat = StringFormat.GenericDefault
path.AddString(stringText, family, myfontStyle, emSize, origin, format)

Using lgb As New Drawing2D.LinearGradientBrush(path.GetBounds(), _
Color.Cyan, Color.Blue, 90, 0)
e.Graphics.FillPath(lgb, path)
End Using
End Sub
5- نقوم بتمرير الإجراء StartTimer الي الحدث Load الخاص بالفورم ثم نقوم بتجربة الكود


كود :
Private Sub Form2_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
StartTimer(1000)
End Sub

المثال الثاني:

هذا المثال يوضح كيفية استخدام الكلاس System.Threading.Timer Class لكي نرسم شيئا ما علي سطح الفورم

1- نقوم بتعريف متغير يشير الي Timer


كود :
Private ThreadTimer As System.Threading.Timer
2- نقوم بكتابة روتين أو إجراء ثم نقم بتحديد CallBack ثم نمرره الي Thread Timer


كود :
Private Sub StartTimer(ByVal Interval As Integer)
Dim CallBackTimer As New Threading.TimerCallback(AddressOf TimerTick)
ThreadTimer = New System.Threading.Timer(CallBackTimer, Nothing, 0, Interval)
End Sub
ثم أعد كتابة الخطوات كما في المثال الأول ستحصل علي نفس النتيجة والفارق بين المثالان فقط هو المتغير الذي يشير الي Timer وكيفية استخدامه


كيف نستفيد من الفكرة الموجودة في الأمثلة أعلاه في عملية Animation المثال التالي يوضح ذلك

المثال الثالث

1 - نقوم بتعريف بعض المتغيرات


كود :
Public Class frmTransition

Private m_timer As New System.Timers.Timer()
Private m_Steps As Single
Private m_startTime As DateTime

' .......... rest of code

End Class
2- وكما فعلنا بالمثال الأول تحديدا نقوم بتعريف إجراء ومن خلاله نقوم بعمل Hook مع Ellapsed Event ومن ثم نقوم بعمل Enable لهذا التايمر وبه أيضا نعطي بعض القيم للمتغيرات التي تم تعريفها في الخطوة رقم 1


كود :
Private Sub StartTimer(ByVal m_Interval As Integer)
AddHandler m_timer.Elapsed, AddressOf TimerTick
m_timer.Interval = m_Interval
m_timer.Enabled = True
m_Steps = 0
m_startTime = DateTime.Now
Invalidate()

End Sub
' .......... rest of code
3- وكما فعلنا في المثال الأول أيضا نقوم بتحديد ما نريده في Ellapsed Event


كود :
Private Sub TimerTick(ByVal source As Object, _
ByVal e As System.Timers.ElapsedEventArgs)

' define & calculate ellapsed time
Dim timeEllapsed As TimeSpan = DateTime.Now - m_startTime
' define animation time
'the lowest the value the highest the speed
Dim AnimationTime As Integer = 2
' calcualte transition steps
m_Steps = CSng((100.0F / AnimationTime * timeEllapsed.TotalSeconds))
' check transition steps value & fix it
If m_Steps > 100 Then
m_Steps = 100
End If
' invalidate the paint
Invalidate()

End Sub
' .......... rest of code
4- الأن نرسم ما نريده داخل الحدث Paint

حيث هنا نقوم بتعريف صورة وتعريف مستطيل ثم نقوم برسم الجزء العلوي من الصورة ثم نقوم برسم الجزء السفلي من الصورة وعمليات الرسم هنا يتم ربطها مع المتغير m_Steps الذي قمنا بحساب قيمته في الخطو رقم 3 أعلاه حيث تم ربط هذا المتغير مع المتغير الذي يشير الي Timer


كود :
Private Sub frmTransition_Paint(ByVal sender As Object, _
ByVal e As PaintEventArgs) Handles MyBase.Paint

' define transition bitmap
Dim bmp As New Bitmap(My.Resources.baby_5)

' define transition rectangle
Dim m_rect As New Rectangle(0, 0, 100, 100)

' draw the top part barns effect
' draw the top part of the image based on transition steps

' define the top part of destination rectangle
Dim destTopRect As New Rectangle(0, 0, m_rect.Width, CInt(m_rect.Height * m_Steps / 200))

' define the image top part source rectangle
Dim srcTopRect As New Rectangle(0, 0, bmp.Width, CInt(bmp.Height / 2))

' draw the top part of the image
e.Graphics.DrawImage(bmp, destTopRect, srcTopRect, GraphicsUnit.Pixel)


' let us repeat the steps above to draw the bottom part of the barns effect

' define the destination rectangle bottom part
Dim destBottomRect As New Rectangle(0, _
CInt(m_rect.Height - CInt(m_rect.Height * m_Steps / 200)), _
m_rect.Width, _
CInt((m_rect.Height * m_Steps / 200)))
' define the image's bottom part source rectangle
Dim srcBottomRect As New Rectangle(0, CInt(bmp.Height / 2), _
bmp.Width, CInt(bmp.Height / 2))

' draw the bottom part of the image
e.Graphics.DrawImage(bmp, destBottomRect, srcBottomRect, GraphicsUnit.Pixel)

End Sub

5- أخيرا نمرر الإجراء StartTimer الي الحدث Load الخاص بالفورم


كود :
Private Sub frmTransition_Load(ByVal sender As Object, _
ByVal e As EventArgs) Handles MyBase.Load
StartTimer(60)
End Sub
لو قمت بتنفيذ الكود أعلاه ستحصل علي ما يشبه حركة الستائر الموجودة علي اي شباك أو نافذة موجودة بمنزلك ولكن الحركة هنا ستكون بشكل رأسي

المثال الرابع

والكود التالي يوضح كيفية رسم نفس حركة الستائر ولكن في إتجاه أفقي وعليك استبدال الكود التالي مع الكود الموجود في الحدث Paint في المثال الثالث أعلاه


كود :
Private Sub frmTransition_Paint(ByVal sender As Object, _
ByVal e As PaintEventArgs) Handles MyBase.Paint

Dim bmp As New Bitmap(My.Resources.baby_5)
Dim m_rect As New Rectangle(0, 0, 100, 100)

' draw the left part barns effect
Dim destTopRect As New Rectangle(0, 0, CInt(m_rect.Width * m_Steps / 200), m_rect.Height)
Dim srcTopRect As New Rectangle(0, 0, CInt(bmp.Width / 2), bmp.Height)
e.Graphics.DrawImage(bmp, destTopRect, srcTopRect, GraphicsUnit.Pixel)

' draw the right part barns effect
Dim destBottomRect As New Rectangle(CInt(m_rect.Width - CInt(m_rect.Width * m_Steps / 200)), _
0, _
CInt((m_rect.Width * m_Steps / 200)), _
m_rect.Height)
Dim srcBottomRect As New Rectangle(CInt(bmp.Width / 2), 0, _
CInt(bmp.Width / 2), bmp.Height)

e.Graphics.DrawImage(bmp, destBottomRect, srcBottomRect, GraphicsUnit.Pixel)

End Sub
المثال الخامس

ماذا لو قمنا بعمل خليط من الفكرة الموجودة بالمثال الثالث والموجودة بالمثال الرابع بالتأكيد سنحصل علي Animation مختلف تماما وعليك فقط استبدال الكود التالي مع الكود الموجود في الحدث Paint في المثال الثالث أعلاه


كود :
Private Sub frmTransition_Paint(ByVal sender As Object, _
ByVal e As PaintEventArgs) Handles MyBase.Paint

Dim bmp As New Bitmap(My.Resources.baby_5)
Dim m_rect As New Rectangle(0, 0, 100, 100)

' ------------------------------------------------------->
' draw the left part of the barn
Dim destLeftRect As New Rectangle(0, 0, CInt(m_rect.Width * m_Steps / 200), m_rect.Height)
Dim srcLeftRect As New Rectangle(0, 0, CInt(bmp.Width / 2), bmp.Height)
e.Graphics.DrawImage(bmp, destLeftRect, srcLeftRect, GraphicsUnit.Pixel)

' ------------------------------------------------------->
' draw the right part of the barn
Dim destRightRect As New Rectangle(CInt(m_rect.Width - CInt(m_rect.Width * m_Steps / 200)), _
0, _
CInt((m_rect.Width * m_Steps / 200)), _
m_rect.Height)
Dim srcRightRect As New Rectangle(CInt(bmp.Width / 2), 0, _
CInt(bmp.Width / 2), bmp.Height)
e.Graphics.DrawImage(bmp, destRightRect, srcRightRect, GraphicsUnit.Pixel)

' ------------------------------------------------------->
' draw the top part of the barn
Dim destTopRect As New Rectangle(0, 0, m_rect.Width, CInt(m_rect.Height * m_Steps / 200))
Dim srcTopRect As New Rectangle(0, 0, bmp.Width, CInt(bmp.Height / 2))
e.Graphics.DrawImage(bmp, destTopRect, srcTopRect, GraphicsUnit.Pixel)

' ------------------------------------------------------->
' draw the bottom part of the barn
Dim destBottomRect As New Rectangle(0, _
CInt(m_rect.Height - CInt(m_rect.Height * m_Steps / 200)), _
m_rect.Width, _
CInt((m_rect.Height * m_Steps / 200)))
Dim srcBottomRect As New Rectangle(0, CInt(bmp.Height / 2), _
bmp.Width, CInt(bmp.Height / 2))

e.Graphics.DrawImage(bmp, destBottomRect, srcBottomRect, GraphicsUnit.Pixel)

End Sub

عموما الأفكار اعلاه قد تبدو صعبة للمبتدئين ولكن لو تم تنفيذها بشكل دقيق ستكتشفون أن الأمر أسهل مما تتصورون وبالتالي يمكنكم التعديل والتلاعب بها كيفما شئتم ومن ثم تصنعون Animation الذي يناسبكم

بشكل عام لقد تطرقنا الي توضيح بعض الأفكار في المقالات السابقة وفي المثال المرفق ستجدون كمية لا بأس بها من الأفكار فهناك حوالي 28 فكرة Animation يمكن استخدامها للتعامل مع الصور يمكنكم دراستها فالهدف من المقالات هو إعطاء الفكرة لدراستها وليس إستخدامها بأسلوب القص واللصق فقط


بالمرفقات ستجدون نسخة كاملة من المشروع وطريقة استخدامه و الملف المرفق بنسخة الفيجوال استوديو 2008

يوجد سخة من المقال باللغة الانجليزيةعلي موقع CodeProject لمن يريد الاطلاع عليها يمكنه ذلك من اللينك التالي

المقال في موقع CodeProject


مع تحياتي للجميع
أخوكم عمر


الملفات المرفقة
.rar   Animation.rar (الحجم : 274.05 ك ب / التحميلات : 58)
الرد }}}}
تم الشكر بواسطة:


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  مشروع لجلب الصور من الماسحة الضوئية (Scanner) m.sami.ak 12 4,013 25-08-16, 09:30 PM
آخر رد: jassim316
  شرح خوارزميات معالجة الصور (من دروس الاستاذ فوزي برزنجي) ناديه الشجيري 14 7,758 09-04-16, 11:26 PM
آخر رد: بديع
  [VB.NET] تشغيل Twain الخاص بسحب الصور من السكنر في حالة net framework4 ahmed saleh 4 663 25-10-15, 07:20 PM
آخر رد: عدنان الشمري
  [VB.NET] التعامل مع الصور في vb net أحمد النجار 2 1,000 03-06-15, 10:45 PM
آخر رد: أحمد النجار
  تحويل الفيديو في برامجك-الجزء الثاني( إصلاح للمشاكل + تعديل للروابط + توضيح للأمر ) RaggiTech 1 710 10-12-14, 06:37 PM
آخر رد: abulayth
  الجزء الثالث من:كيف تجعل الـ Text Box ذكي!يترجم العمليات الحسابية ويخرج الناتج (الأقواس المتعددة) !! أنس محمود 9 2,063 06-12-14, 10:11 PM
آخر رد: RFEE3 ALSHAN
  [مقال] تشغيل برمجيات الدوت نت بدون تنصيب النت فروم ويرك m0075 13 4,113 13-02-14, 08:29 PM
آخر رد: Omar Mekkawy
  تفقيط الارقام فى الدوت نت مبرمج أوتار 16 3,723 30-08-13, 01:01 AM
آخر رد: abatenovtch
  حساب قيمة معادلة(اقصد صيغة دون مجاهيل) مكتوبة بالتكست : الجزء الخامس والاخير محمد شريقي 3 905 28-05-13, 01:06 PM
آخر رد: Sajad
  التــعامل مع cmd من خلال الدوت نت مبتدئ في الاحتراف 2 530 24-04-13, 07:58 PM
آخر رد: مبتدئ في الاحتراف

التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم