Android Jetpack Compose中如何实现Shimmer/Skeleton加载动画？

一、跨平台通用依赖 #

• React Native：使用react-native-shimmer-placeholder，支持函数组件开发，无需复杂的View嵌套：

import ShimmerPlaceholder from 'react-native-shimmer-placeholder';

const LoadingCard = () => (
  <ShimmerPlaceholder
    visible={false}
    style={{ width: '100%', height: 120, borderRadius: 8 }}
  />
);

• Flutter：官方推荐的shimmer包，基于Widget实现，适配任意布局结构：

import 'package:shimmer/shimmer.dart';

Shimmer.fromColors(
  baseColor: Colors.grey[300]!,
  highlightColor: Colors.grey[100]!,
  child: Container(
    width: double.infinity,
    height: 120,
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
  ),
);

二、Web前端场景 #

• 框架适配：React用react-shimmer，Vue用vue-shimmer，组件化复用成本低，React示例：

import { Shimmer } from 'react-shimmer';

<Shimmer width={300} height={200} borderRadius={8} />

• 纯CSS实现：无需任何依赖，手写关键帧动画适配所有Web项目：

.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

使用时只需给容器添加类名：<div class="shimmer" style="width: 100%; height: 120px; border-radius: 8px;"></div>

三、原生移动端非Views方案 #

• Android Jetpack Compose：借助Modifier.shimmer（需导入androidx.compose.foundation:foundation依赖）：

Box(
  modifier = Modifier
    .fillMaxWidth()
    .height(120.dp)
    .clip(RoundedCornerShape(8.dp))
    .shimmer()
)

• iOS SwiftUI：自定义ShimmerView，通过渐变和动画实现：

struct ShimmerView: View {
  @State private var phase = 0.0
  
  var body: some View {
    LinearGradient(
      gradient: Gradient(stops: [
        .init(color: .gray.opacity(0.3), location: 0),
        .init(color: .gray.opacity(0.1), location: 0.5),
        .init(color: .gray.opacity(0.3), location: 1)
      ]),
      startPoint: .leading,
      endPoint: .trailing
    )
    .animation(Animation.linear(duration: 1.5).repeatForever(autoreverses: false), value: phase)
    .onAppear { phase = 1.0 }
    .frame(height: 120)
    .cornerRadius(8)
  }
}

内容的提问来源于stack exchange，提问作者Cristian Alexis Torres Zavala