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?