소개

디자이너 "여기 버튼 누르고 싶어지는 애니메이션하자!"

나 「알았어!」

라는 것으로, 니코니코의 코멘트풍 애니메이션을 구현하기로 했다.
생각보다 간단하게 할 수 있었으므로, 실장 방법을 소개.

완성형

이런 느낌의 것을 만들거야.
전제로서, 루트의 ViewGroup은 ConstraintLayout을 사용하고 있다.

할 일

화면 크기 취득

TextView 생성

Y 위치를 무작위로 설정합니다

생성 된 TextView에 제약 조건 설정

오른쪽에서 왼쪽으로 이동

1. 화면 사이즈 취득

3의 「Y위치를 랜덤으로 설정」과 5의 「오른쪽에서 왼쪽으로 이동」을 하기 위해서, 화면 사이즈가 필요하게 된다.
폭과 높이 따로따로 취득해도 좋지만, 화면 사이즈의 클래스 만들어 버리는 편이 저는 좋아.

data class WindowSize(
    val width: Int,
    val height: Int
)

private fun getWindowSize(): WindowSize {
    val outMetrics = DisplayMetrics()
    display?.getRealMetrics(outMetrics)
    return WindowSize(
        width = outMetrics.widthPixels,
        height = outMetrics.heightPixels
    )
}

2.TextView 생성

우선은 코멘트를 표시시키는 화면에 대해 TextView를 인플레이트 시킨다.

val textView = TextView(baseContext).apply {
    id = View.generateViewId()
    text = "Hello World!"
    layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
}
textView.setTextColor(Color.BLACK)
constraintLayout.addView(textView)

id는 나중에 사용하기 때문에 설정하고 있어.

3.Y위치를 랜덤으로 설정

코멘트가 표시되는 높이의 범위는 画面の高さ - TextViewの高さ 로 구해진다.



이것보다 낮아 버리면 버림 버리니까.

val random = Random(System.currentTimeMillis())
val transitionY = random.nextInt(windowSize.height - textView.layoutParams.height)
textView.translationY = transitionY.toFloat()

난수의 시드는 뭐든지 좋지만, 이번은 System.currentTimeMillis() 를 사용해.

4. 생성된 TextView에 제약 설정

설정하는 위치는 화면의 오른쪽.

ConstraintSet().also {
    it.clone(constraintLayout)
    it.connect(
        textView.id,
        ConstraintSet.LEFT,
        ConstraintSet.PARENT_ID,
        ConstraintSet.RIGHT
    )
    it.applyTo(constraintLayout)
}

어쩌면 "무슨 일이야?"라는 느낌이겠지만, ConstraintSet에 대해 알아보면 알겠다고 생각한다.
본근과 빗나가니까 여기에서는 해설하지 않지만, @soranakk씨의 Kotlin (Java) 코드에서 ConstraintLayout 제약 조건 편집 라고 기사를 알기 쉽게 해설해 주고 있어.
그리고는 공식 문서 읽으면 완벽.

5. 오른쪽에서 왼쪽으로 이동

이것은 아마 여러 가지 방법이 있겠지만, 이번은 ObjectAnimator를 사용해.

이동하는 범위는 画面幅 + TextViewの幅 로 구해지므로, doOnLayout 를 사용해 레이아웃이 결정한 타이밍에 애니메이션의 설정을 하고 있다.
이것도 좀 좋은 느낌으로 할 수 있을 것 같지만.

textView.doOnLayout {
    val textViewWidth = it.width.toFloat()
    val objectAnimator = ObjectAnimator.ofFloat(
        textView,
        "translationX",
        0f,
        -(windowSize.width + textViewWidth)
    ).apply {
        interpolator = LinearInterpolator()
        duration = 3000L
    }.also {
        it.doOnEnd {
            // アニメーションが終わったViewを削除
            constraintLayout.removeView(textView)
        }
    }
    objectAnimator.start()
}

interpolator는 디폴트가 마음에 들지 않았기 때문에, 등속으로 이동하는 LinearInterpolator로 변경.

애니메이션이 끝나면 doOnEnd 로 remove 하는 것을 잊지 마세요.
하지 않으면 버튼 누르면 누를수록 View가 모여 무한하게 앱이 무거워져 갈거야.

여기까지 하면 나머지는 버튼에 클릭 이벤트 붙여 완성~.

마지막으로

이런 것, 의외로 열심히 하면 어떻게 되겠지.
또 굳은 애니메이션 도전하고 싶다고 생각했다.

일단 여기 로 샘플 공개하고 있으니까, 「알겠지!」라고 되면 봐.

끝!