Cómo hacer un mouse hover con efecto fade

El diseño de aplicaciones de escritorio y de páginas web se rige por las tendencias. Actualmente la tendencia de diseño más predominante hoy en día es el flat design. ¿Qué es el flat design? El "Flat Design" o "Diseño Plano" consiste en eliminar o reducir todo tipo de decoración en un diseño de interfaz o web a la mínima espresión para simplificar el mensaje y facilitar la funcionalidad. Se eliminan las texturas, los degradados, los biselados, sombreados… en definitiva, todo lo que no aporte valor al mensaje o información que se quiere transmitir al usuario que interactúa con la interfaz. Es un ejemplo total de usabilidad, pensando siempre en la interacción del usuario con a herramienta, pensando siempre en que tenga una experiencia sencilla y sobre todo apta para que lo pueda utilizar todo tipo de usarios.

En aplicaciones web ya hemos hablado mucho de eso. Existen librerías y plugins css que tienen este marcado estilo de diseño para que los lleves a cabo en tus proyectos. El diseño de aplicaciones de escritorio no se queda atrás con este tema. Los desarrolladores se están poniendo las pilas en cuanto a tendencias y están aplicando los compenentes flat design a sus aplicaciones.

El estilo flat design bebe de colores planos, del minimalismo y de las animaciones. Una de las animaciones más características en este tipo de diseño es el fade. ¿Que es una animación fade? Pues es un estilo de animación que va cambiando progresivamente. Es decir, pongamos el ejemplo de que queremos implementar un botón que, al pasar por encima con el ratón, cambie de color progresivamente, que pase de un color a otro de una manera suave. A eso le llamamos, al cambio progresivo de una forma a otra. A continuación, os voy a mostrar cómo llevar este ejemplo a cabo en .net. Veremos exactamente cómo hacer un mouse hover sobre un botón para que este cambie de color con una animación fade. ¿Estáis listos? Pues vamos a por ello...

Imports System.Drawing.Imaging

Public Class MyFadeEffect : Inherits Control

#Region " Private Declaration "
 
    Private ImgAtt As New ImageAttributes
    Private StartFade As Boolean, Alpha As Single = 0.0, SpeedFade As Single = 0.0
    Private ImgHover As Bitmap, GrHover As Graphics, _SetImage As Image
    Private _SetSpeed As SetSpeed = SetSpeed.Normal

#End Region

#Region " Enum Fade Speed "
   
    ' Preset fading speed
    Public Enum SetSpeed 
        Maximum
        High
        Normal
        Slow
        VerySlow
    End Enum

#End Region

#Region " Properties "
 
    ' This property is for fading effect
    Private Property SetImage() As Image
        Get
            Return _SetImage
        End Get
        Set(value As Image)
            _SetImage = value
            Invalidate()
        End Set
    End Property

    ' Preset property for fade speed
    Public Property FadingSpeed() As SetSpeed
        Get
            Return _SetSpeed
        End Get
        Set(value As SetSpeed)
            _SetSpeed = value
            Invalidate()
        End Set
    End Property
#End Region

#Region " Sub New "
    Sub New()
        SetStyle(ControlStyles.AllPaintingInWmPaint Or _
                 ControlStyles.OptimizedDoubleBuffer Or _
                 ControlStyles.UserPaint, True)
        DoubleBuffered = True
        Size = New Size(150, 50)
    End Sub
#End Region

#Region " Drawing Fade Effect "
 
    Private Sub DrawFadeEffect(G As Graphics)

        If FadingSpeed = SetSpeed.VerySlow Then
            SpeedFade = 0.03
        ElseIf FadingSpeed = SetSpeed.Slow
            SpeedFade = 0.06
        ElseIf FadingSpeed = SetSpeed.Normal
            SpeedFade = 0.11
        ElseIf FadingSpeed = SetSpeed.High
            SpeedFade = 0.21
        ElseIf FadingSpeed = SetSpeed.Maximum
            SpeedFade = 0.31
        End If

        Dim _Matrix As New ColorMatrix(New Single()() { _
                                       New Single() {1, 0, 0, 0, 0}, _
                                       New Single() {0, 1, 0, 0, 0}, _
                                       New Single() {0, 0, 1, 0, 0}, _
                                       New Single() {0, 0, 0, Alpha, 0}, _
                                       New Single() {0, 0, 0, 0, 1}})
        ImgAtt.SetColorMatrix(_Matrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap)

        ImgHover = New Bitmap(Width, Height)
        GrHover = Graphics.FromImage(ImgHover)

        Dim _Brush As New SolidBrush(Color.FromArgb(255, Color.Blue))

        GrHover.FillRectangle(_Brush, 0, 0, Width, Height)

        G.DrawImage(ImgHover, New Rectangle(0, 0, ImgHover.Width, ImgHover.Height), _
                    0, 0, ImgHover.Width, ImgHover.Height, GraphicsUnit.Pixel, ImgAtt)

        ImgHover.Dispose()
        GrHover.Dispose()
    End Sub
#End Region

#Region " On Paint/Background Paint Event "
 
    Protected Overrides Sub OnPaint(e As PaintEventArgs)
        MyBase.OnPaint(e)
        ' Draw Border to control
        e.Graphics.DrawRectangle(Pens.Red, 0, 0, Width - 1, Height - 1)
        ' Draw String to control
        TextRenderer.DrawText(e.Graphics, Text, Font, ClientRectangle, ForeColor)
    End Sub

    Protected Overrides Sub OnPaintBackground(e As PaintEventArgs)
        MyBase.OnPaintBackground(e)
        DrawFadeEffect(e.Graphics)
    End Sub
#End Region

#Region " On Mouse Enter/Leave Events "
 
    Protected Overrides Sub OnMouseEnter(e As EventArgs)
        MyBase.OnMouseEnter(e)
        StartFade = True
        TmrFade.Enabled = True
        Invalidate()
    End Sub

    Protected Overrides Sub OnMouseLeave(e As EventArgs)
        MyBase.OnMouseLeave(e)
        StartFade = False
        TmrFade.Enabled = True
        Invalidate()
    End Sub
#End Region

#Region " Timer Fade Tick "
    Private Sub TmrFade_Tick(sender As Object, e As EventArgs) Handles TmrFade.Tick
        If StartFade Then
            Alpha += SpeedFade
        Else
            Alpha -= SpeedFade
        End If

        ' Here is used SetImage Property for fading effect
        SetImage = ImgHover

        If Alpha >= 1 Then
            Alpha = 1
            TmrFade.Enabled = False
        ElseIf Alpha <= 0
            Alpha = 0
            TmrFade.Enabled = False
        End If

    End Sub
#End Region

    Friend WithEvents TmrFade As New Timer With {.Enabled = False, .Interval = 1}
End Class

Y este ha sido el tutorial sobre cómo hacer un mouse hover sobre un botón para que este cambie de color con una animación fade. Espero que os haya gustado, ya sabéis que podéis sugerirnos más tutoriales, sean del lenguaje que sean, utilizando los zona de comentarios de más abajo. Por cierto, ¿qué tendencia de diseño es la que más te ha cautivado?

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.