【Android】ニコニコのコメント風アニメーションを実装する【Animation】

10385 ワード
Android Layout アニメーション Kotlin Android テキストリンク

はじめに

デザイナー「ここボタン押したくなるようなアニメーションさせてください！」

ぼく「わかりました！」

ってことで、ニコニコのコメント風アニメーションを実装することにした。
思ったより簡単にできたので、実装方法をご紹介。

完成形

こんな感じのものを作るよ。
前提として、ルートのViewGroupはConstraintLayoutを使ってる。

やること

  1. 画面サイズ取得
  2. TextViewを生成する
  3. Y位置をランダムで設定する
  4. 生成したTextViewに制約を設定する
  5. 右から左に移動する

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が溜まって、無限にアプリが重くなっていくよ。

ここまでやったらあとはボタンにクリックイベントつけて完成〜。

最後に

こういうの、意外と頑張ればなんとかなるものね。
また凝ったアニメーション挑戦したいなと思った。

一応ここでサンプル公開してるから、「わかんねえよ！！」ってなったら見てね。

おわり！