تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
(درس) كيف تضيف تأثير Fade in - Fade out إلى أدوات التحكم
#1
كاتب الموضوع : Islam Ibrahim

السلام عليكم ورحمة الله تعالى وبركاته

أقدم من خلال هذا المقال كيفية إضافة تأثير Fade in و Fade out إلى أدوات التحكم عامة وأداة التحكم PictureBox خاصةً في هذا المثال

نظرة عامة:





أولاً:

إبدأ مشروع Windows Application جديد وسمِّه FadeEffect

ثانياً:

أضف أداة التحكم PictureBox إلى النموذج الرئيسي للبرنامج, وسمِّه PictureBox1 , ثم أضف Timer كذلك ألى النموذج, وسمِّه tmrBlend.

ثالثاً:

أضف صورتين مناسبتين لحجم أداة PictureBox1 إلى موارد البرنامج Resources

رابعاً:

عرف على مستوى النموذج المتغيرين التاليين:


كود :
[color=#000000][COLOR=#0000bb]Dim increase [/color][color=#007700]As [/color][color=#0000bb]Boolean [/color][color=#007700]= [/color][COLOR=#0000bb]True
Dim speed [/COLOR][color=#007700]As [/color][color=#0000bb]Single [/color][color=#007700]= [/color][color=#0000bb]0.05 The speed is[/color][color=#007700]: [/color][COLOR=#0000bb]0 to 1  
[/COLOR][/COLOR]

خامساً:

في الحدث Tick الخاص بالمؤقِت tmrBlend, أضف الشفرة البرمجية التالية:


كود :
[color=#000000][COLOR=#007700]Static [/color][color=#0000bb]current_alpha [/color][color=#007700]As [/color][color=#0000bb]Single [/color][color=#007700]= [/color][COLOR=#0000bb]0.0
Dim i1 [/COLOR][color=#007700]As New [/color][color=#0000bb]Bitmap[/color][color=#007700]([/color][color=#0000bb]My[/color][color=#007700].[/color][color=#0000bb]Resources[/color][color=#007700].[/color][color=#0000bb]_01[/color][COLOR=#007700])
[/COLOR][color=#0000bb]Dim i2 [/color][color=#007700]As New [/color][color=#0000bb]Bitmap[/color][color=#007700]([/color][color=#0000bb]My[/color][color=#007700].[/color][color=#0000bb]Resources[/color][color=#007700].[/color][color=#0000bb]_02[/color][COLOR=#007700])

[/COLOR][color=#0000bb]Dim g [/color][color=#007700]As [/color][color=#0000bb]Graphics [/color][color=#007700]= [/color][color=#0000bb]Graphics[/color][color=#007700].[/color][color=#0000bb]FromImage[/color][color=#007700]([/color][color=#0000bb]i1[/color][COLOR=#007700])

[/COLOR][color=#0000bb]Dim cm [/color][color=#007700]As New [/color][color=#0000bb]Imaging[/color][color=#007700].[/color][color=#0000bb]ColorMatrix[/color][color=#007700](New [/color][color=#0000bb]Single[/color][color=#007700]()() { [/color][COLOR=#0000bb]_
                     [/COLOR][color=#007700]New [/color][color=#0000bb]Single[/color][color=#007700]() {[/color][color=#0000bb]1[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700]}, [/color][COLOR=#0000bb]_
                     [/COLOR][color=#007700]New [/color][color=#0000bb]Single[/color][color=#007700]() {[/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]1[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700]}, [/color][COLOR=#0000bb]_
                     [/COLOR][color=#007700]New [/color][color=#0000bb]Single[/color][color=#007700]() {[/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]1[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700]}, [/color][COLOR=#0000bb]_
                     [/COLOR][color=#007700]New [/color][color=#0000bb]Single[/color][color=#007700]() {[/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]current_alpha[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700]}, [/color][COLOR=#0000bb]_
                     [/COLOR][color=#007700]New [/color][color=#0000bb]Single[/color][color=#007700]() {[/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]1[/color][COLOR=#007700]}})
[/COLOR][color=#0000bb]Dim ia [/color][color=#007700]As New [/color][color=#0000bb]Imaging[/color][color=#007700].[/color][COLOR=#0000bb]ImageAttributes
ia[/COLOR][color=#007700].[/color][color=#0000bb]SetColorMatrix[/color][color=#007700]([/color][color=#0000bb]cm[/color][color=#007700], [/color][color=#0000bb]Imaging[/color][color=#007700].[/color][color=#0000bb]ColorMatrixFlag[/color][color=#007700].Default, [/color][color=#0000bb]Imaging[/color][color=#007700].[/color][color=#0000bb]ColorAdjustType[/color][color=#007700].[/color][color=#0000bb]Bitmap[/color][COLOR=#007700])
[/COLOR][color=#0000bb]g[/color][color=#007700].[/color][color=#0000bb]DrawImage[/color][color=#007700]([/color][color=#0000bb]i2[/color][color=#007700], New [/color][color=#0000bb]Rectangle[/color][color=#007700]([/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]i2[/color][color=#007700].[/color][color=#0000bb]Width[/color][color=#007700], [/color][color=#0000bb]i2[/color][color=#007700].[/color][color=#0000bb]Height[/color][color=#007700]) [/color][COLOR=#0000bb]_
       [/COLOR][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]0[/color][color=#007700], [/color][color=#0000bb]i2[/color][color=#007700].[/color][color=#0000bb]Width[/color][color=#007700], [/color][color=#0000bb]i2[/color][color=#007700].[/color][color=#0000bb]Height[/color][color=#007700], [/color][color=#0000bb]GraphicsUnit[/color][color=#007700].[/color][color=#0000bb]Pixel[/color][color=#007700], [/color][color=#0000bb]ia[/color][COLOR=#007700])
[/COLOR][color=#0000bb]g[/color][color=#007700].[/color][color=#0000bb]Dispose[/color][COLOR=#007700]()

If [/COLOR][COLOR=#0000bb]increase Then
    current_alpha [/COLOR][color=#007700]+= [/color][COLOR=#0000bb]speed
[/COLOR][COLOR=#007700]Else
    [/COLOR][color=#0000bb]current_alpha [/color][color=#007700]-= [/color][COLOR=#0000bb]speed
End [/COLOR][COLOR=#007700]If

[/COLOR][color=#0000bb]PictureBox1[/color][color=#007700].[/color][color=#0000bb]Image [/color][color=#007700]= [/color][COLOR=#0000bb]i1

[/COLOR][color=#007700]If [/color][color=#0000bb]current_alpha [/color][color=#007700]>= [/color][COLOR=#0000bb]1 Then
    current_alpha [/COLOR][color=#007700]= [/color][COLOR=#0000bb]1
    tmrBlend[/COLOR][color=#007700].[/color][color=#0000bb]Enabled [/color][color=#007700]= [/color][COLOR=#0000bb]False
[/COLOR][color=#007700]ElseIf [/color][color=#0000bb]current_alpha [/color][color=#007700]<= [/color][COLOR=#0000bb]0 Then
    current_alpha [/COLOR][color=#007700]= [/color][COLOR=#0000bb]0
    tmrBlend[/COLOR][color=#007700].[/color][color=#0000bb]Enabled [/color][color=#007700]= [/color][COLOR=#0000bb]False
End [/COLOR][COLOR=#007700]If  
[/COLOR][/COLOR]

حيث يشير المتغيران My.Resources._01 و My.Resources._02 إلى الصورتين التين قمت بإضافتهما إلى موارد البرنامج.

سادساً:

في الحدث MouseEnter الخاص بأداة التحكم PictureBox1:
  • قم بتغغير قيمة المتغير Increase إلى القيمة True
  • قم بتمكين المؤقِّت tmrBlend.


كود :
[color=#000000][COLOR=#007700]Private [/color][color=#0000bb]Sub PictureBox1_MouseEnter[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]Object[/color][color=#007700], [/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]EventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles PictureBox1[/color][color=#007700].[/color][COLOR=#0000bb]MouseEnter
        increase [/COLOR][color=#007700]= [/color][COLOR=#0000bb]True
        tmrBlend[/COLOR][color=#007700].[/color][color=#0000bb]Enabled [/color][color=#007700]= [/color][COLOR=#0000bb]True
    End Sub  
[/COLOR][/COLOR]

سابعاً:

في الحدث MouseLeave الخاص بأداة التحكم PictureBoc1, قم بتغيير قيمة المتغير Increase إلى القيمة False.


كود :
[color=#000000][COLOR=#007700]Private [/color][color=#0000bb]Sub PictureBox1_MouseLeave[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]Object[/color][color=#007700], [/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]EventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles PictureBox1[/color][color=#007700].[/color][COLOR=#0000bb]MouseLeave
        increase [/COLOR][color=#007700]= [/color][COLOR=#0000bb]False
        tmrBlend[/COLOR][color=#007700].[/color][color=#0000bb]Enabled [/color][color=#007700]= [/color][COLOR=#0000bb]True
    End Sub  
[/COLOR][/COLOR]

المثال مرفق
المصدر: من هنا
}}}}
تم الشكر بواسطة:


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


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