Onboarding

Onboarding

• Start 화면

• 감정버튼(8) 선택

• 문장버튼(3) 선택

• 선택 문장 가운데 배치 화면

• 선택 문장 상단으로 이동하며 타이핑& 커서 효과

• 깊이 선택 효과

깊이를 선택하고 시작하기 버튼을 누르면 선택한 깊이가 로그인 화면에 반영됨.

-구현

1. Start 화면의 물결 : Lottie 사용

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_marginTop="34dp"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toTopOf="@+id/under_background"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.156"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tv_start"
    app:lottie_autoPlay="true"
    app:lottie_fileName="OnboardingWave.json"
    app:lottie_loop="true" />

override fun onPause() {
    super.onPause()
    viewBinding.lottie.cancelAnimation()
    handler.removeCallbacksAndMessages(null)
}

private fun initOnboardingAnimation() {
    viewBinding.lottie.apply {
            setAnimation("OnboardingCircle.json")
            playAnimation()
            addAnimatorListener(animatorListener)
        }
}

private val animatorListener = object : Animator.AnimatorListener {
    override fun onAnimationStart(animation: Animator?) {}
    override fun onAnimationRepeat(animation: Animator?) {}
    override fun onAnimationCancel(animation: Animator?) {}
    override fun onAnimationEnd(animation: Animator?) {
        startActivityIntent()
        finish()
    }
}

2. Activity 간 전환 효과 사용

override fun onBackPressed() {
    super.onBackPressed()
    finish()
    overridePendingTransition(R.anim.horizontal_right_in, R.anim.horizontal_left_out)
}

private fun startActivityIntent() {
    val intent = Intent(this, OnboardingDepthActivity::class.java)
    handler.postDelayed({
        startActivity(intent)
        overridePendingTransition(R.anim.horizontal_left_in, R.anim.horizontal_right_out)
    }, 6500L)
}

3. FadeIn FadeOut 효과

fadeIn.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="0.0"
    android:toAlpha="1.0" />

fadeOut.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="1.0"
    android:toAlpha="0.0" />

horizontal_left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:duration="600"
        android:fromXDelta="100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />
</set>

4.타이핑 효과

<com.example.momo_android.util.ui.TypeWriter
    android:id="@+id/tv_write"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/notosanskrmedium"
    android:gravity="center"
    android:includeFontPadding="false"
    android:letterSpacing="-0.06"
    android:lineSpacingExtra="4sp"
    android:text=""
    android:textColor="@color/blue_2"
    android:textFontWeight="500"
    android:textSize="16dp"
    app:layout_constraintEnd_toStartOf="@+id/tv_cursor"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

private val handler = Handler()

private fun setOnboardingFeeling() {
    handler.postDelayed({
        viewBinding.tvCursor.blink()
        viewBinding.tvCursor.visibility = View.VISIBLE
        viewBinding.tvWrite.setCharacterDelay(150)
        when (ONBOARDING_FEELING) {
            1 -> viewBinding.tvWrite.animateText("새로운 인연이 기대되는 하루였다.")
            2 -> viewBinding.tvWrite.animateText("삶의 소중함을 느낀 하루였다.")
            3 -> viewBinding.tvWrite.animateText("나를 위한 진한 위로가 필요한 하루였다.")
            4 -> viewBinding.tvWrite.animateText("끓어오르는 속을 진정시켜야 하는 하루였다.")
            5 -> viewBinding.tvWrite.animateText("마음이 찌릿하게 아픈 하루였다.")
            6 -> viewBinding.tvWrite.animateText("눈물이 왈칵 쏟아질 것 같은 하루였다.")
            7 -> viewBinding.tvWrite.animateText("오래된 기억이 되살아나는 하루였다.")
            8 -> viewBinding.tvWrite.animateText("평안한 하루가 감사한 날이었다.")
            else -> Log.d("TAG", "setOnboardingFeeling: unknown felling")
        }
    }, 1500L)
}

5. Blink 효과

private fun View.blink(
    times: Int = Animation.INFINITE,
    duration: Long = 50L,
    offset: Long = 700L,
    minAlpha: Float = 0.0f,
    maxAlpha: Float = 1.0f,
    repeatMode: Int = Animation.REVERSE
) {
    startAnimation(AlphaAnimation(minAlpha, maxAlpha).also {
        it.duration = duration
        it.startOffset = offset
        it.repeatMode = repeatMode
        it.repeatCount = times
    })
}

6. 깊이를 선택하면 선택 깊이가 로그인 화면에 반영

btn_edit_deep.setOnClickListener {
    val intent=Intent(this@OnboardingDepthActivity,MainLoginActivity::class.java)
    Log.d("btn","clicked")
    intent.putExtra("deep",mainSeekbar.progress)
    startActivity(intent)
    finishAffinity()
}