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

안드로이드 코틀린 애니메이션 기초 두 번째 포스팅입니다. 이전 포스팅에서는 액티비티에서 애니메이션을 처리했지만 이번 포스팅에서는 리소스 res 폴더 안에 리소스 폴더를 이용한 애니메이션 효과입니다. 

 

res 폴더 안에 animator 폴더를 생성후 리소스 파일을 만들어 줍니다. 

 

폴더명은 animator_rotation, animator_scale, animator_sequential, animator_translate_x 회전, 크기, 사각움직임, x축 이동

설정 파일입니다. 

 

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

 

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

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
}

 

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

 

안드로이드 코틀린 에니메이션 리소스 파일 설명

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:anim/linear_interpolator"
    android:propertyName="rotation"
    android:valueFrom="-360"
    android:valueTo="0" />

animator_rotation.xml

duration 1초 시계반대방향으로 별을 회전시킨다. 

 

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/linear_interpolator"
    android:propertyName="translationX"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:valueFrom="0"
    android:valueTo="500" />

animator_translate_x.xml

1번 x 축방향으로 500만큼 이동한다.

 

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:repeatCount="1"
    android:repeatMode="reverse">
    <propertyValuesHolder
        android:propertyName="scaleX"
        android:valueTo="4" />
    <propertyValuesHolder
        android:propertyName="scaleY"
        android:valueTo="4" />
</objectAnimator>

animator_scale.xml

4만큼 크기를 키우고 줄여준다.

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">
    <set android:ordering="sequentially">
        <objectAnimator
            android:duration="500"
            android:interpolator="@android:anim/linear_interpolator"
            android:propertyName="translationX"
            android:valueFrom="0"
            android:valueTo="500" />
        <objectAnimator
            android:duration="500"
            android:interpolator="@android:anim/linear_interpolator"
            android:propertyName="translationY"
            android:valueFrom="0"
            android:valueTo="500" />
        <objectAnimator
            android:duration="500"
            android:interpolator="@android:anim/linear_interpolator"
            android:propertyName="translationX"
            android:valueFrom="500"
            android:valueTo="0" />
        <objectAnimator
            android:duration="500"
            android:interpolator="@android:anim/linear_interpolator"
            android:propertyName="translationY"
            android:valueFrom="500"
            android:valueTo="0" />
    </set>
    <objectAnimator
        android:duration="1000"
        android:propertyName="alpha"
        android:valueFrom="1f"
        android:valueTo="0f" />
    <objectAnimator
        android:duration="1000"
        android:propertyName="alpha"
        android:valueFrom="0f"
        android:valueTo="1f" />
</set>

animator_sequential.xml

알파값을 1000만큼 주고 우측과 하단으로 500만큼 이동한다. 

 

안드로이드 코틀린 전체소스

package kr.co.toplink.ch0_2

import android.animation.*
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.ImageView
import android.widget.Toast
import kr.co.toplink.ch0_2.databinding.ActivityMainBinding
import kr.co.toplink.ch0_2.R

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 sequentialButton: Button

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

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

        star                = binding.star
        rotateButton        = binding.rotateButton
        translateButton     = binding.translateButton
        scaleButton         = binding.scaleButton
        sequentialButton    = binding.sequentialButton

        title = "에니메이션 기초 Ch0-2"

        star.apply {
                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()
        }

        sequentialButton.setOnClickListener {
            sequential()
        }
    }

    private fun rotater() {
        val animator =
            AnimatorInflater.loadAnimator(
                applicationContext,
                R.animator.animator_rotation
        ) as Animator

        animator.apply {
            setTarget(star)
            disableViewDuringAnimation(rotateButton)
            start()
        }
    }

    private fun translater() {
        val animator =
            AnimatorInflater.loadAnimator(
                applicationContext,
                R.animator.animator_translate_x
            ) as Animator

        animator.apply {
            setTarget(star)
            disableViewDuringAnimation(translateButton)
            start()
        }
    }

    private fun scaler() {
        val animator = AnimatorInflater.loadAnimator(applicationContext, R.animator.animator_scale)
        animator.apply {
            setTarget(star)
            disableViewDuringAnimation(scaleButton)
            start()
        }
    }

    private fun sequential() {
        val animator =
            AnimatorInflater.loadAnimator(applicationContext, R.animator.animator_sequential)
        animator.apply {
            setTarget(star)
            disableViewDuringAnimation(sequentialButton)
            start()
        }
    }
}


fun Animator.disableViewDuringAnimation(view: View) {

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

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

 

 

 

GitHub - makiball/ch1-2

 

[함께보면좋은정보]

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