안드로이드 코틀린 에니메이션 기초 Ch0-1

안드로이드 코틀린을 코딩을 하다 보면 애니메이션이 필요할 때가 있습니다. 위젯 이동시 자연스러운 처리나 간단한 게임 만들기 등 적재적소에 필요하지만 애니메이션을 잘 쓰면 사용자 UI는 더욱 고급스러워집니다. 

 

이번 포스트에서는 안드로이드 에니메이션 효과 코틀리에서 회전, 이동, 크기변환, 페이드아웃, 페이드인, 배경색상 바꾸기, 별 쏟아지기입니다. 

 

안드로이드 코틀린 에니메이션 기초

 

안드로이드 코틀린 에니메이션 종속성

dependencies {

    implementation 'androidx.core:core-ktx:1.10.1'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.9.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

    // Dynamic Animation
    implementation "androidx.dynamicanimation:dynamicanimation:1.0.0"

    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
}

implementation "androidx.dynamicanimation:dynamicanimation:1.0.0"

다이내믹 애니메이터 추가

buildFeatures {
    viewBinding  true
}

 

뷰그룹을 사용하기 위한 데이터 바인딩 종속성을 추가해 주세요.

 

안드로이드 코틀린 애니메이션 전체소스

package kr.co.toplink.ch0_1

import android.animation.*
import android.annotation.SuppressLint
import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import android.view.animation.*
import android.view.animation.AccelerateInterpolator
import android.view.animation.LinearInterpolator
import android.widget.Button
import android.widget.FrameLayout
import android.widget.ImageView
import android.widget.Toast
import androidx.appcompat.widget.AppCompatImageView
import com.google.android.material.color.utilities.MaterialDynamicColors.background
import kr.co.toplink.ch0_1.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private val TAG = this.javaClass.simpleName
    private lateinit var binding: ActivityMainBinding


    /* 버튼 선언 */
    lateinit var star: ImageView
    lateinit var rotateButton: Button
    lateinit var translateButton: Button
    lateinit var scaleButton: Button
    lateinit var fadeButton: Button
    lateinit var colorizeButton: Button
    lateinit var showerButton: Button
    lateinit var animpanel : FrameLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        title = "에니메이션 기초"


        star = binding.star
        rotateButton = binding.rotateButton
        translateButton = binding.translateButton
        scaleButton = binding.scaleButton
        fadeButton = binding.sequentialButton
        colorizeButton = binding.colorizeButton
        showerButton = binding.showerButton
        animpanel = binding.animpanel


        /* 별클릭시 별 크기와 좌표를 구하기 */
        star.setOnClickListener{
            val width = star.width
            val height = star.height
            val posX = star.x
            val posY = star.y

            Toast.makeText(
                applicationContext,
                "Start width: $width, height: $height, posX: $posX, posY: $posY",
                Toast.LENGTH_SHORT
            ).show()
        }

        /* 회전 */
        rotateButton.setOnClickListener {
            rotater()
        }

        /* 이동 */
        translateButton.setOnClickListener {
            translater()
        }

        /* 크기 변환 */
        scaleButton.setOnClickListener {
            scaler()
        }

        /* 페이드 효과 점점 나타내기, 점점 없어지기 */
        fadeButton.setOnClickListener {
            fader()
        }

        /* 색상변경 */
        colorizeButton.setOnClickListener {
            colorizer()
        }

        /* 별떨어지기 */
        showerButton.setOnClickListener {
            shower()
        }
    }


    private fun rotater() {
        val animator = ObjectAnimator.ofFloat(
            star, View.ROTATION,
            -360f, 0f
        )
        animator.duration = 1000
        animator.disableViewDuringAnimation(rotateButton)
        animator.start()
    }

    private fun translater() {
        val animator = ObjectAnimator.ofFloat(
            star, View.TRANSLATION_X,
            500f
        )
        animator.duration = 3000
        animator.repeatCount = 1
        animator.repeatMode = ObjectAnimator.REVERSE
        animator.disableViewDuringAnimation(translateButton)
        animator.start()
    }


    private fun scaler() {

        val scaleX = PropertyValuesHolder.ofFloat(View.SCALE_X, 4f)
        val scaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 4f)
        val animator = ObjectAnimator.ofPropertyValuesHolder(
            star, scaleX, scaleY
        )
        animator.repeatCount = 1
        animator.repeatMode = ObjectAnimator.REVERSE
        animator.disableViewDuringAnimation(scaleButton)
        animator.start()

    }

    private fun fader() {
        val animator = ObjectAnimator.ofFloat(star, View.ALPHA, 0f)
        animator.repeatCount = 1
        animator.repeatMode = ObjectAnimator.REVERSE
        animator.disableViewDuringAnimation(fadeButton)
        animator.start()
    }

    private fun colorizer() {
        val container = star.parent as ViewGroup
        val animator = ObjectAnimator.ofArgb(
            container,
            "backgroundColor", Color.BLACK, Color.RED
        )
        animator.repeatCount = 1
        animator.repeatMode = ObjectAnimator.REVERSE
        animator.disableViewDuringAnimation(colorizeButton)
        animator.start()
    }

    private fun shower() {
        val container = star.parent as ViewGroup
        val containerW = container.width
        val containerH = container.height
        var starW: Float = star.width.toFloat()
        var starH: Float = star.height.toFloat()

        val newStar = AppCompatImageView(this)
        newStar.setImageResource(R.drawable.ic_star)
        newStar.layoutParams = FrameLayout.LayoutParams(
            FrameLayout.LayoutParams.WRAP_CONTENT,
            FrameLayout.LayoutParams.WRAP_CONTENT
        )
        container.addView(newStar)

        // Set width and height of new star
        newStar.scaleX = Math.random().toFloat() * 1.5f + .1f
        newStar.scaleY = newStar.scaleX
        starW *= newStar.scaleX
        starH *= newStar.scaleY

        // Set x start position for new star
        newStar.translationX = Math.random().toFloat() *
                containerW - starW / 2

        // Set falling and rotation animation
        val mover = ObjectAnimator.ofFloat(
            newStar, View.TRANSLATION_Y,
            -starH, containerH + starH
        )
        mover.interpolator = AccelerateInterpolator(1f)
        val rotator = ObjectAnimator.ofFloat(
            newStar, View.ROTATION,
            (Math.random() * 1080).toFloat()
        )
        rotator.interpolator = LinearInterpolator()

        // Create animation sets
        val set = AnimatorSet()
        set.playTogether(mover, rotator)
        set.duration = (Math.random() * 1500 + 500).toLong()


        set.addListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator) {
                container.removeView(newStar)
            }
        })
        set.start()
    }
}


/* 에니메이션구동 기간 버튼 활성화 켜기 / 끄기 */
fun ObjectAnimator.disableViewDuringAnimation(view: View) {

    addListener(object : AnimatorListenerAdapter() {
        override fun onAnimationStart(animation: Animator) {
            view.isEnabled = false
        }

        override fun onAnimationEnd(animation: Animator) {
            view.isEnabled = true
        }
    })
}

 

안드로이드 코틀린 미리 보기

 

안드로이드 코틀린 에니메이션

 

 

[전체소스 다운로드하기]

GitHub - makiball/Ch0-1

 

[함께 보면 좋은 정보]

 

안드로이드 코틀린 에니메이션 효과 넣기 Ch1-0

 

안드로이드 코틀린 에니메이션 화면전환 효과 Ch1-1

 

안드로이드 코틀린 리사이클뷰 에니메이션 화면전환 효과 Ch1-2