Make an image fade from one picture to another and back in VB .NET

[nandagopal]

When the program's Timer fires, the event handler makes a ColorMatrix to manipulate the color components for the pixels in the first image. The matrix looks mostly like the identity matrix so the pixels' red, green, and blue components are not changed. The entry of 0.0 in position (3, 3) sets the pixel's alpha component to 0. The value of m_Alpha in entry (4, 3) then adds m_Alpha to the zero alpha value. The result is that every pixel in the image has its alpha component set to m_Alpha.

After defining the ColorMatrix, the program assigns the matrix to an ImageAttribute object and draws the first image into an output Bitmap with this object.

The program then repeats these steps to draw the second picture onto the output Bitmap while setting each pixel's alpha component to 1 - m_Alpha.

After drawing the two pictures, the program displays the result and increments or decrements m_Alpha. When m_Alpha reaches 0 or 1, the program changes m_DAlpha so the changes to m_Alpha switch direction.

Code Select Expand

Private m_Alpha As Single = 0 ' Alpha on a 0-1 scale.
Private m_DAlpha As Single = 0.05

Private Sub tmrDisplayFrame_Tick(ByVal sender As _
    System.Object, ByVal e As System.EventArgs) Handles _
    tmrDisplayFrame.Tick
    Dim bm1 As Bitmap = picSrc1.Image.Clone
    Dim bm2 As Bitmap = picSrc2.Image.Clone

    Dim image_attr As New ImageAttributes
    Dim cm As ColorMatrix

    Dim bm As New Bitmap(bm1.Width, bm1.Height)
    Dim gr As Graphics = Graphics.FromImage(bm)
    Dim rect As Rectangle = _
        Rectangle.Round(bm1.GetBounds(GraphicsUnit.Pixel))

    cm = New ColorMatrix(New Single()() { _
        New Single() {1.0, 0.0, 0.0, 0.0, 0.0}, _
        New Single() {0.0, 1.0, 0.0, 0.0, 0.0}, _
        New Single() {0.0, 0.0, 1.0, 0.0, 0.0}, _
        New Single() {0.0, 0.0, 0.0, 0.0, 0.0}, _
        New Single() {0.0, 0.0, 0.0, m_Alpha, 1.0}})
    image_attr.SetColorMatrix(cm)
    gr.DrawImage(bm1, rect, 0, 0, bm1.Width, bm2.Width, _
        GraphicsUnit.Pixel, image_attr)

    cm = New ColorMatrix(New Single()() { _
        New Single() {1.0, 0.0, 0.0, 0.0, 0.0}, _
        New Single() {0.0, 1.0, 0.0, 0.0, 0.0}, _
        New Single() {0.0, 0.0, 1.0, 0.0, 0.0}, _
        New Single() {0.0, 0.0, 0.0, 0.0, 0.0}, _
        New Single() {0.0, 0.0, 0.0, 1 - m_Alpha, 1.0}})
    image_attr.SetColorMatrix(cm)
    gr.DrawImage(bm2, rect, 0, 0, bm1.Width, bm2.Width, _
        GraphicsUnit.Pixel, image_attr)

    picResult.Image = bm
    picResult.Refresh()

    m_Alpha += m_DAlpha
    If m_Alpha > 1 Then
        m_Alpha = 1
        m_DAlpha *= -1
    ElseIf m_Alpha < 0 Then
        m_Alpha = 0
        m_DAlpha *= -1
    End If
End Sub

[guest37]

Nice code but there is a potential issue.
Unless width = height your code will cause a
potentially undesirable aspect ratio adjustment from these lines:

gr.DrawImage(bm1, rect, 0, 0, bm1.Width, bm2.Width, _
        GraphicsUnit.Pixel, image_attr)

gr.DrawImage(bm2, rect, 0, 0, bm1.Width, bm2.Width, _
        GraphicsUnit.Pixel, image_attr)

Do you see that you've use "width" twice in each DrawImage line?
The way you've used your DrawImage call
uses one width and one height value:
http://msdn.microsoft.com/en-us/library/ms142046.aspx

I would recommend the follow code update:

gr.DrawImage(bm1, rect, 0, 0, bm1.Width, bm2.Height, _
        GraphicsUnit.Pixel, image_attr)

gr.DrawImage(bm2, rect, 0, 0, bm1.Width, bm2.Height, _
        GraphicsUnit.Pixel, image_attr)

This assumes that pictures being used by the following two lines:
Dim bm1 As Bitmap = picSrc1.Image.Clone
Dim bm2 As Bitmap = picSrc2.Image.Clone

..have indicate width and heights for both picturebox control images
but the width and height are unequal.

I used the two 400 pixel by 300 pixel jpg images
from this page to test this code update:
http://www.elated.com/articles/fading-one-image-into-another/

see screenshots to see undesirable white gap produced by
original code.

Note:
I didn't want to update this old thread
but after newly registering was unable to post a new topic thread here:
http://discuss.itacumens.com/index.php?board=52.0

..that would have just referenced this old thread with the code update.

If a moderator can split off this reply post
to a new thread (referencing this old thread) please do so. Thanks!

[dhoni]

this is really good to see this
from this vb.net we can easily change from one image to another in to fade