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?