Android Compose Animation 02 - BicycleAnim.md

안드 콤포즈 자전거 애니메이션

@Composable
fun BicycleView(){

    // 벡터 이미지 가져오기
    val bicycleImg: Painter = painterResource(id = R.drawable.ic_bicycle)
    val infiniteTransition = rememberInfiniteTransition() // 무한 애니메이션

    // 스카이 배경 그래디언트
    val skyGradient = Brush // 브러시를 통해 그레디언트를 만들수 있습니다.
        .verticalGradient(colors = listOf(
            Color(0xFF04009A),
            Color(0xFF3EDBF0),
            Color(0xFFC0FEFC),
            Color.White
        ),
            startY = 0.0f, // 그래디언트 시작지정
            endY = Float.POSITIVE_INFINITY // 그래디언트 끝지점
        )

    val duration: Int = 1500 // 애니메이션 지속시간

    // 전체를 수직으로 컬럼을 잡았습니다.
    Column(Modifier
        .fillMaxWidth() // 가로 모두 채우기
        .fillMaxHeight() // 세로 모두 채우기
    ) {
        // BoxWithConstraints 를 통해 maxWidth 등의 크기를 알 수 있음
        // weight 은 퍼센트로 크기를 조정할 수 있습니다.
        // 현재는 전체 웨잇의 즉 가중치의 합이 1이기 때문에
        // 박스 두개가 반반으로 그려졌습니다.
        BoxWithConstraints(Modifier
            .weight(0.5f) // 전체의 50퍼센트 크기
            .fillMaxWidth()
            .background(brush = skyGradient),
            contentAlignment = Alignment.BottomStart, // 박스 안에 있는 내용물 정렬
        ){

            val startPos : Float = 0.0f
            val endPos : Float = maxWidth.value - 80.0f

            val x by infiniteTransition.animateFloat( // x 축 애니메이션 값
                initialValue = startPos,
                targetValue = endPos,
                animationSpec = infiniteRepeatable(
                    animation =
                    tween(
                        durationMillis = duration,
                        delayMillis = 800,
                        easing = FastOutSlowInEasing // 애니메이션 설정
                    ),
                    repeatMode = RepeatMode.Restart, // 반복시 재시작
                )
            )
            Box(Modifier
                .width(90.dp).height(80.dp)
                .background(Color.Yellow)
                .align(Alignment.BottomEnd)
            )
            Image( // 이미지 뷰
                painter = bicycleImg,
                contentScale = ContentScale.Fit,
                contentDescription = "손 입니다",
                colorFilter = ColorFilter.tint(Color.Black),
                modifier = Modifier
                    .offset(x = x.dp, y = 6.dp) // x 축 애니메이션이 여기서 적용
                    .size(80.dp) // 크기 지정 width, height 동일 적용
            )

        }
        Box(Modifier.weight(0.5f) // 전체의 50퍼센트 크기
            .fillMaxWidth()
            .background(Color(0xFF8BC34A)))
    }
}


@Preview(showBackground = true)
@Composable
fun BicyclePreview() {
    MainTheme {
        BicycleView()
    }
}