Guia completo para animações de visão no iOS: Criando efeitos de carregamento impressionantes com o framework Shimmer

O que é o Shimmer e por que usá-lo?

O Shimmer é um framework leve desenvolvido especificamente para aplicativos iOS, projetado para aplicar efeitos de brilho animado em qualquer tipo de viusalização. Ele oferece uma alternativa visualmente atraente aos indicadores de carregamento tradicionais, criando uma experiência mais envolvente para os usuários durante períodos de espera.

Principais benefícios do Shimmer:

  • Leveza: Comopsto por poucos arquivos principais, incluindo FBShimmering.h, FBShimmeringLayer.h e FBShimmeringView.h
  • Customização: Permite ajustes finos como velocidade, direção, transparência e duração do efeito
  • Integração simples: Funciona com UIView ou CALayer
  • Desempenho: Baseado em Core Animation, garantindo execução suave

Passo a passo: Integrando o Shimmer em 5 minutos

1. Clonando o repositório

git clone https://gitcode.com/gh_mirrors/shi/Shimmer

2. Incluindo os arquivos essenciais

Adicione os seguintes arquivos ao seu projeto Xcode:

  • FBShimmering.h e .m
  • FBShimmeringLayer.h e .m
  • FBShimmeringView.h e .m

3. Exemplo básico de uso

Este exemplo mostra como aplicar o efeito a um UILabel:

#import "FBShimmeringView.h"

// Configura o label
UILabel *statusLabel = [[UILabel alloc] initWithFrame:CGRectMake(50, 100, 200, 30)];
statusLabel.text = @"Carregando...";
statusLabel.font = [UIFont systemFontOfSize:16];

// Cria a view com efeito
FBShimmeringView *shimmerContainer = [[FBShimmeringView alloc] initWithFrame:statusLabel.bounds];
shimmerContainer.contentView = statusLabel;
shimmerContainer.shimmering = YES;

// Adiciona à hierarquia
[self.view addSubview:shimmerContainer];

Personalização avançada do efeito

Direção do brilho

// Direção horizontal padrão
shimmerContainer.shimmeringDirection = FBShimmerDirectionRight;

// Outras opções disponíveis:
// FBShimmerDirectionLeft
// FBShimmerDirectionUp
// FBShimmerDirectionDown

Velocidade e pausa do efeito

// Ajuste a velocidade (pontos por segundo)
shimmerContainer.shimmeringSpeed = 300;

// Define pausa entre ciclos (em segundos)
shimmerContainer.shimmeringPauseDuration = 0.6;

Controle de transparência e intensidade

// Nível de transparência durante o brilho
shimmerContainer.shimmeringAnimationOpacity = 0.3;

// Transparência base do conteúdo
shimmerContainer.shimmeringOpacity = 0.8;

// Tamanho do destaque (0 a 1)
shimmerContainer.shimmeringHighlightLength = 0.5;

Casos de uso práticos

  • Placeholder em listas: Exibir efeito em células enquanto carrega conteúdo
  • Feedback em botões: Indicar processamento após clique em ações
  • Estado de rede: Visualizar carregamento durante requisições HTTP

Dicas de otimização de desempenho

  • Evite múltiplos efeitos simultâneos em tela
  • Desative o efeito após conclusão do carregamento
  • Evite aplicar em camadas profundas da hierarquia visual

Tags: ios swift Objective-C CoreAnimation InterfaceDesign

Publicado em 9-7 10:35