O efeito de "shimmer" (cintilação) é uma técnica popular em interfaces móveis, frequentemente usada para indicar carregamento de conteúdo. A implementação de alto desempenho desse efeito, como a encontrada na biblioetca ShimmerLayout, baseia-se em uma combinação sofisticada de shaders gráficos e animações otimizadas. Este artigo decompõe os princípios técnicos por trás da criação desse efeito de forma eficiente em memória.

Princípio Central: Composição de Shaders

O truque fundamental reside em combinar dois shaders distnitos usando ComposeShader. Um LinearGradient fornece o gradiente de destaque em movimento, enquanto um BitmapShader atua como uma máscara para controlar onde esse gradiente é visível. A composição utiliza o modo de mesclagem PorterDuff.Mode.DST_IN, garantindo que o brilho só apareça dentro das áreas definidas pela máscara.

Criação do Gradiente Linear Dinâmico

O gradiente que cria a ilusão de luz deslizante é construído com quatro cores: bordas transparentes ladeando a cor principal do destaque. A inclinação do efeito é calculada trigonométricamente. A instância do LinearGradient pode ser inicializada de forma semelhante a este código:

float endX = (float) Math.cos(Math.toRadians(angle)) * width;
float endY = (float) Math.sin(Math.toRadians(angle)) * width;

LinearGradient gradientShader = new LinearGradient(
    startX, startY, endX, endY,
    new int[] { edgeColor, coreColor, coreColor, edgeColor },
    new float[] { 0f, 0.35f, 0.65f, 1f },
    Shader.TileMode.CLAMP);

Parâmetros como ângulo e largura relativa permitem personalizar a aparência do efeito para diferentes contextos de UI.

Mecanismo de Máscara com Reúso de Bitmap

A forma da área de shimmer é controlada por uma máscara de bitmap. Para minimizar alocações de memória e reduzir a coleta de lixo, o bitmap da máscara é reutilizado sempre que possível. Um método típico para obtê-lo segue o padrão de inicialização preguiçosa:

private Bitmap createOrRetrieveMask() {
    if (cachedMask == null) {
        cachedMask = Bitmap.createBitmap(maskWidth, maskHeight, Bitmap.Config.ARGB_8888);
    } else if (cachedMask.getWidth() != maskWidth || cachedMask.getHeight() != maskHeight) {
        cachedMask.recycle();
        cachedMask = Bitmap.createBitmap(maskWidth, maskHeight, Bitmap.Config.ARGB_8888);
    }
    return cachedMask;
}

Este bitmap é então aplicado a um BitmapShader que é composto com o gradiente.

Sistema de Animação com ValueAnimator

O movimento contínuo do brilho é impulsionado por um ValueAnimator. Este animador modifica continuamente a posição de deslocamento do gradiente, simulando o seu deslizamento. A invalidação da view é acionada de forma condicional para atualizar o desenho apenas quando o deslocamento garante que novas partes do efeito são visíveis, economizando ciclos de CPU.

ValueAnimator offsetAnimator = ValueAnimator.ofFloat(0f, totalAnimationDistance);
offsetAnimator.setDuration(duration);
offsetAnimator.setRepeatCount(ValueAnimator.INFINITE);
offsetAnimator.addUpdateListener(animation -> {
    currentOffset = (float) animation.getAnimatedValue();
    if (shouldBeVisible()) {
        invalidate();
    }
});
offsetAnimator.start();

Otimizações de Desempenho e Compatibilidade

Para garantir fluidez, especialmente em dispositivos mais antigos, verificações de compatibilidade com aceleração de hardware são essenciais. Em versões específicas do Android, forçar a camada de software (LAYER_TYPE_SOFTWARE) pode ser necessário para que ComposeShader funcione corretamente. Além disso, uma limpeza de recursos adequada no método de finalização do ciclo de vida do view é crucial para evitar vazamentos de memória.

Integração e Uso Prático

A biblioteca é itnegrada encapsulando o conteúdo desejado em uma view personalizada. Através de atributos XML ou métodos programáticos, o desenvolvedor controla parâmetros como cor, ângulo, duração da animação e largura da máscara.

<com.example.ui.ShimmerFrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:shimmerHighlightColor="#FFFFFF"
    app:shimmerTiltAngle="25"
    app:shimmerDuration="1200">

    <!-- Seu layout de conteúdo placeholder -->

</com.example.ui.ShimmerFrameLayout>

Chamar startShimmer() e stopShimmer() controla o ciclo da animação de forma explícita.

Android, ShimmerLayout, LinearGradient, ComposeShader, ValueAnimator, CustomView, Graphics, Performance