Android Jetpack結構運用Compose實現微博長按點贊彩虹效果

//Text通過動畫淡入
var editable by remember { mutableStateOf(true) }
AnimatedVisibility(visible = editable) {
    Text(text = "Edit")
}

//動畫改變 Box 透明度
val alpha: Float by animateFloatAsState(if (enabled) 1f else 0.5f)
Box(
    Modifier.fillMaxSize()
        .graphicsLayer(alpha = alpha)
        .background(Color.Red)
)

// Animtable 包裝瞭一個顏色狀態值
val color = remember { Animatable(Color.Gray) }
LaunchedEffect(ok) {
    // animateTo 是個掛起函數，驅動狀態之變化
    color.animateTo(if (ok) Color.Green else Color.Gray)
}
Box(Modifier.fillMaxSize().background(color.value))

val raduis = Animatable(0f) //初始值 0f
radius.animateTo(
    targetValue = screenSize, //目標值
    animationSpec = tween(
        durationMillis = duration, //動畫時長
        easing = FastOutSlowInEasing //動畫衰減效果
    ) 
)

class AnimatedRainbow(
    //屏幕尺寸（寬邊長邊大的一方）
    private val screenSize: Float,
    //RainbowColors是彩虹的候選顏色
    private val color: Brush = RainbowColors.random(),
    //動畫時長
    private val duration: Int = 3000
) {
    private val radius = Animatable(0f)
    suspend fun startAnim() = radius.animateTo(
        targetValue = screenSize * 1.6f, // 關於 1.6f 後文說明
        animationSpec = tween(
            durationMillis = duration,
            easing = FastOutSlowInEasing
        )
    )
}

//MutableStateList 保存 AnimatedRainbow
val animatedRainbows = mutableStateListOf<AnimatedRainbow>()
//長按屏幕時，向列表加入 AnimtaedRainbow, 意味著增加一個新的彩虹
animatedRainbows.add(
    AnimatedRainbow(
        screenHeightPx.coerceAtLeast(screenWidthPx),
        RainbowColors.random()
    )
)

LaunchedEffect(Unit) {
    //監聽到新添加的 AnimatedRainbow
    snapshotFlow { animatedRainbows.lastOrNull() } 
        .filterNotNull()
        .collect {
            launch {
                //啟動 AnimatedRainbow 動畫
                val result = it.startAnim()
                //動畫結束後，從列表移除，避免泄露
                if (result.endReason == AnimationEndReason.Finished) {
                    animatedRainbows.remove(it)
                }
            }
        }
}

fun DrawScope.draw() {
    drawCircle(
        brush = color, //圓環顏色
        center = center, //圓心：點贊位置
        radius = radius.value,// Animtable 中變化的 radius 值，
        style = Stroke((radius.value * 2).coerceAtMost(_screenSize)),
    )
}

class AnimatedEmoji(
    private val start: Offset, //表情拋點位置，即長按的屏幕位置
    private val screenWidth: Float, //屏幕寬度
    private val screenHeight: Float, //屏幕高度
    private val duration: Int = 1500 //動畫時長
) {
    //拋出距離（x方向移動終點），在左右一個屏幕之間取隨機數
    private val throwDistance by lazy {
        ((start.x - screenWidth).toInt()..(start.x + screenWidth).toInt()).random()
    }
    //拋出高度（y方向移動終點），在屏幕頂端到拋點之間取隨機數
    private val throwHeight by lazy {
        (0..start.y.toInt()).random()
    }
    private val x = Animatable(start.x)//x方向移動動畫值
    private val y = Animatable(start.y)//y方向移動動畫值
    private val rotate = Animatable(0f)//旋轉動畫值
    private val alpha = Animatable(1f)//透明度動畫值
    suspend fun CoroutineScope.startAnim() {
        async {
            //執行旋轉動畫
            rotate.animateTo(
                360f, infiniteRepeatable(
                    animation = tween(_duration / 2, easing = LinearEasing),
                    repeatMode = RepeatMode.Restart
                )
            )
        }
        awaitAll(
            async {
                //執行x方向移動動畫
                x.animateTo(
                    throwDistance.toFloat(),
                    animationSpec = tween(durationMillis = duration, easing = LinearEasing)
                )
            },
            async {
                //執行y方向移動動畫（上升）
                y.animateTo(
                    throwHeight.toFloat(),
                    animationSpec = tween(
                        duration / 2,
                        easing = LinearOutSlowInEasing
                    )
                )
                //執行y方向移動動畫（下降）
                y.animateTo(
                    screenHeight,
                    animationSpec = tween(
                        duration / 2,
                        easing = FastOutLinearInEasing
                    )
                )
            },
            async {
                //執行透明度動畫，最終狀態是半透明
                alpha.animateTo(
                    0.5f,
                    tween(duration, easing = CubicBezierEasing(1f, 0f, 1f, 0.8f))
                )
            }
        )
    }

//默認的 Easing 類型，以加速度起步，減速度收尾
val FastOutSlowInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)
//勻速起步，減速度收尾
val LinearOutSlowInEasing: Easing = CubicBezierEasing(0.0f, 0.0f, 0.2f, 1.0f)
//加速度起步，勻速收尾
val FastOutLinearInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 1.0f, 1.0f)
//勻速接近目標值
val LinearEasing: Easing = Easing { fraction -> fraction }

//MutableStateList 保存 animatedEmojis
val animatedEmojis = mutableStateListOf<AnimatedEmoji>()
//一次增加 EmojiCnt 個表情
animatedEmojis.addAll(buildList {
    repeat(EmojiCnt) {
        add(AnimatedEmoji(offset, screenWidthPx, screenHeightPx, res))
    }
})
//監聽 animatedEmojis 變化
LaunchedEffect(Unit) {
        //監聽到新加入的 EmojiCnt 個表情
        snapshotFlow { animatedEmojis.takeLast(EmojiCnt) }
            .flatMapMerge { it.asFlow() }
            .collect {
                launch {
                    with(it) {
                        startAnim()//啟動表情動畫，等待除瞭旋轉動畫外的所有動畫結束
                        animatedEmojis.remove(it) //從列表移除
                    }
                }
            }
    }

//當前 x，y 位移的位置
val offset get() = Offset(x.value, y.value)
//圖片topLeft相對於offset的距離
val d by lazy { Offset(img.width / 2f, img.height / 2f) }
//繪制表情
fun DrawScope.draw() {
    rotate(rotate.value, pivot = offset) {
        drawImage(
            image = img, //表情素材
            topLeft = offset - dCenter,//當前位置
            alpha = alpha.value, //透明度
        )
    }
}

class AnimatedFlower(
    private val intial: Float, //花瓣半徑初始值，一般是表情的尺寸
    private val duration: Int = 2500
) {
    //花瓣半徑
    private val radius = Animatable(intial)
    suspend fun startAnim() {
        radius.animateTo(0f, keyframes {
            durationMillis = duration
            intial / 3 at 0 with FastOutLinearInEasing
            intial / 5 at (duration * 0.95f).toInt()
        })
    }

//animatedFlowers 使用普通列表創建
val animatedFlowers = mutableListOf<AnimatedFlower>()
launch {
    with(it) {//表情動畫執行
        startAnim()
        animatedEmojis.remove(it)
    }
    //創建 AnimatedFlower 動畫
    val anim = AnimatedFlower(
        center = it.offset,
        //使用 Palette 從表情圖片提取煙花顏色
        color = Palette.from(it.img.asAndroidBitmap()).generate().let {
            arrayOf(
                Color(it.getDominantColor(Color.Transparent.toArgb())),
                Color(it.getVibrantColor(Color.Transparent.toArgb()))
            )
        },
        initial = it.img.run { width.coerceAtLeast(height) / 2 }.toFloat()
    )
    animatedFlowers.add(anim) //添加進列表
    anim.startAnim() //執行煙花動畫
    animatedFlowers.remove(anim) //移除動畫
}

//計算 sin45 的值
val sin by lazy { sin(Math.PI / 4).toFloat() }
val points
    get() = run {
        val d1 = initial - radius.value
        val d2 = (initial - radius.value) * sin
        arrayOf(
            center.copy(y = center.y - d1), //0點方向
            center.copy(center.x + d2, center.y - d2),
            center.copy(x = center.x + d1),//3點方向
            center.copy(center.x + d2, center.y + d2),
            center.copy(y = center.y + d1),//6點方向
            center.copy(center.x - d2, center.y + d2),
            center.copy(x = center.x - d1),//9點方向
            center.copy(center.x - d2, center.y - d2),
        )
    }

fun DrawScope.draw() {
    points.forEachIndexed { index, point ->
        drawCircle(color = color[index % 2], center = point, radius = radius.value)
    }
}

@Composable
fun AnimatedLike(modifier: Modifier = Modifier, state: LikeAnimState = rememberLikeAnimState()) {
    LaunchedEffect(Unit) {
        //監聽新增表情
        snapshotFlow { state.animatedEmojis.takeLast(EmojiCnt) }
            .flatMapMerge { it.asFlow() }
            .collect {
                launch {
                    with(it) {
                        startAnim()
                        state.animatedEmojis.remove(it)
                    }
                    //添加煙花動畫
                    val anim = AnimatedFlower(
                        center = it.offset,
                        color = Palette.from(it.img.asAndroidBitmap()).generate().let {
                            arrayOf(
                                Color(it.getDominantColor(Color.Transparent.toArgb())),
                                Color(it.getVibrantColor(Color.Transparent.toArgb()))
                            )
                        },
                        initial = it.img.run { width.coerceAtLeast(height) / 2 }.toFloat()
                    )
                    state.animatedFlowers.add(anim)
                    anim.startAnim()
                    state.animatedFlowers.remove(anim)
                }
            }
    }
    LaunchedEffect(Unit) {
        //監聽新增彩虹
        snapshotFlow { state.animatedRainbows.lastOrNull() }
            .filterNotNull()
            .collect {
                launch {
                    val result = it.startAnim()
                    if (result.endReason == AnimationEndReason.Finished) {
                        state.animatedRainbows.remove(it)
                    }
                }
            }
    }
    //繪制動畫
    Canvas(modifier.fillMaxSize()) {
        //繪制彩虹
        state.animatedRainbows.forEach { animatable ->
            with(animatable) { draw() }
        }
        //繪制表情
        state.animatedEmojis.forEach { animatable ->
            with(animatable) { draw() }
        }
        //繪制煙花
        state.animatedFlowers.forEach { animatable ->
            with(animatable) { draw() }
        }
    }
}