internal class AnimationManager(
private val target
View:
View,
private val config: SkeletonConfig
) {
private var animator: ValueAnimator? = null
private val appliedDrawables = mutableListOf<Pair<
View, Drawable>>()
private val paint = Paint().apply {
isAntiAlias = true
}
/**
* 启动 Shimmer 动画
* 若已有动画运行，则先停止再启动新动画
*/
fun start() {
stop() // 清理旧状态
animator = createShimmerAnimator()
animator?.start()
}
/**
* 停止当前动画并清理所有已添加的 overlay drawable
*/
fun stop() {
animator?.cancel()
animator = null
appliedDrawables.forEach { (
view, drawable) ->
try {
view.overlay.remove(drawable)
} catch (e: Exception) {
Log.e("AnimationManager", "Failed to remove overlay from
view")
}
}
appliedDrawables.clear()
}
/**
* 创建控制 shimmer 动画的 ValueAnimator
*
* 动画范围从 -1f 到 2f，用于驱动 LinearGradient 水平移动，形成“扫光”效果
*/
private fun createShimmerAnimator(): ValueAnimator {
val animator = ValueAnimator.ofFloat(-1f, 2f).apply {
duration = config.shimmerDuration
repeatCount = ValueAnimator.INFINITE
interpolator = AccelerateDecelerateInterpolator()
addUpdateListener { animation ->
val fraction = animation.animatedValue as Float
updateShader(fraction)
invalidateAllDrawables()
}
}
applyShimmerToTarget
View()
return animator
}
/**
* 更新渐变着色器（Shader），实现移动的高亮光效
*/
private fun updateShader(offsetFraction: Float) {
val width = target
View.width.toFloat()
val height = target
View.height.toFloat()
if (width <= 0f || height <= 0f) return
// === 1. 计算光带实际宽度 ===
val bandWidth = width * config.shimmerWidth
// === 2. 将角度转为弧度，并计算单位方向向量 ===
val angleRad = Math.toRadians(config.shimmerAngle.toDouble())
val cos = Math.cos(angleRad).toFloat()
val sin = Math.sin(angleRad).toFloat()
// === 3. 起始点偏移：让光带动起来 ===
// 总路径长度 ≈ 对角线长度，确保覆盖全区域
val diagonal = Math.sqrt((width * width + height * height).toDouble()).toFloat()
val offset = offsetFraction * diagonal
// 起点沿方向移动
val startX = -diagonal * cos + offset
val startY = -diagonal * sin + offset
val endX = startX + bandWidth * cos
val endY = startY + bandWidth * sin
// === 4. 创建 LinearGradient 并应用旋转 ===
val colors = intArrayOf(Color.TRANSPARENT, config.shimmerColor, Color.TRANSPARENT)
val positions = floatArrayOf(0f, 0.5f, 1f)
val shader = LinearGradient(
startX, startY,
endX, endY,
colors,
positions,
Shader.TileMode.CLAMP
)
// 👇 可选：如果还需要额外变换（比如缩放），可以用 Matrix
paint.shader = shader
}
/**
* 触发所有 shimmer drawable 重绘，使其显示最新 shader 效果
*/
private fun invalidateAllDrawables() {
appliedDrawables.forEach { (_, drawable) ->
drawable.invalidateSelf()
}
}
/**
* 遍历目标视图及其子视图，为每个非
ViewGroup 的叶子视图创建并添加 shimmer drawable
*/
private fun applyShimmerToTarget
View() {
recursivelyApplyShimmer(target
View)
}
private fun recursivelyApplyShimmer(
view:
View) {
if (
view is
ViewGroup) {
for (i in 0 until
view.childCount) {
recursivelyApplyShimmer(
view.getChildAt(i))
}
} else {
// 只有当视图具有有效尺寸时才应用 shimmer
if (
view.width <= 0 ||
view.height <= 0) return
if (
view.tag == "ignore_ani") return
val shimmerDrawable = createShimmerDrawable(
view)
view.overlay.add(shimmerDrawable)
appliedDrawables.add(
view to shimmerDrawable)
}
}
/**
* 为指定视图创建一个自定义 Drawable，用于显示带有圆角支持的 shimmer 效果
*/
private fun createShimmerDrawable(
view:
View): Drawable {
val cornerRadius = config.cornerRadius.coerceAtLeast(0f)
return object : Drawable() {
override fun draw(canvas: Canvas) {
val bounds = this.bounds
if (bounds.isEmpty || paint.shader == null) return
if (cornerRadius > 0f) {
val rectF = RectF(bounds)
val path = Path().apply {
addRoundRect(rectF, cornerRadius, cornerRadius, Path.Direction.CW)
}
canvas.save()
canvas.clipPath(path)
canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint)
canvas.restore()
} else {
canvas.drawRect(bounds, paint)
}
}
/**
* 此处不处理 Alpha 设置，因为 shimmer 效果由 shader 控制透明度
*/
override fun setAlpha(alpha: Int) {
// 忽略：颜色透明度由 LinearGradient 决定
}
/**
* 不支持颜色过滤器
*/
override fun setColorFilter(colorFilter: ColorFilter?) {
// 忽略：shimmer 是纯图形动画，不需要滤镜
}
/**
* 返回半透明像素格式，表示此 Drawable 支持透明度
*/
override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
}.apply {
setBounds(0, 0,
view.width,
view.height)
}
}
}
这个代码还是有问题，主要是光带在当前
view上扫过的时候，由于光带是有颜色的，会导致圆角的地方也被展示出来，该怎么解决，按理来讲clipPath不是就可以做到这个了吗
本文详细解析了ClipView的滚动实现原理，包括如何通过移动Panel和调整Clip范围来模拟内部条目的滚动效果。介绍了条目范围的概念，并给出了计算条目自动居上显示的具体公式。
扫一扫
266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
