[안드로이드 코틀린] 속성 애니메이션 (이미지를 움직이게 하는 방법)

이번 시간에는 속성 애니메이션을 통해 아이콘을 가로, 세로, 회전, 사라지고, 보이는 방법을 알아보겠습니다.

---

목차

1. 실행 화면
2. 메인 화면 activity_main.xml
3. 메인 코드 MainActivity.kt

---

1. 실행 화면

2. 메인 화면 activity_main.xml

- 설명 -

 1. 애니메이션 적용할 ImageView

 2. 가로 이동, 세로 이동, 회전, 사라짐, 나타남 Button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:src="@drawable/lion"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="100dp">

        <Button
            android:id="@+id/transX_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="가로방향"/>

        <Button
            android:id="@+id/transY_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="세로방향"/>

        <Button
            android:id="@+id/rotate_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="회전"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/alpha_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="사라짐"/>

        <Button
            android:id="@+id/alpha_btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="나타남"/>
    </LinearLayout>

</LinearLayout>

 

3. 메인 코드 MainActivity.kt

- 설명 - 

 1. iDuration

 지속 시간 (1000: 1초)

 2. ObjectAnimator.ofFloat(imageView, "translationX", 100f, 200f, 50f)

 속성 애니메이션(적용 View, 속성 값, 이동 값)

 3. 참조 사이트

https://developer.android.com/reference/android/animation/ObjectAnimator?hl=ko#ofFloat(java.lang.Object,%20java.lang.String,%20java.lang.String,%20android.graphics.Path) 

ObjectAnimator  |  Android Developers

 4. 아이콘 res -> drawable

lion.png

0.00MB

class MainActivity : AppCompatActivity(), View.OnClickListener {

    private lateinit var imageView: ImageView

    //지속 시간
    private val iDuration: Long = 1000

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //초기화
        imageView = findViewById(R.id.imageView)
        val transXbtn: Button = findViewById(R.id.transX_btn)
        val transYbtn: Button = findViewById(R.id.transY_btn)
        val rotatebtn: Button = findViewById(R.id.rotate_btn)
        val alphabtn: Button = findViewById(R.id.alpha_btn)
        val alphabtn2: Button = findViewById(R.id.alpha_btn2)

        //이벤트 리스너
        transXbtn.setOnClickListener(this)
        transYbtn.setOnClickListener(this)
        rotatebtn.setOnClickListener(this)
        alphabtn.setOnClickListener(this)
        alphabtn2.setOnClickListener(this)

    }//onCreate

    //클릭 이벤트
    override fun onClick(view: View?) {

        when(view?.id){

            //가로
            R.id.transX_btn -> {
                val animatorX: ValueAnimator = ObjectAnimator
                    .ofFloat(imageView, "translationX", 100f, 200f, 50f)

                animatorX.duration = iDuration
                animatorX.start()
            }
            //세로
            R.id.transY_btn -> {
                val animatorY: ValueAnimator = ObjectAnimator
                    .ofFloat(imageView, "translationY", 100f, 200f, 50f)

                animatorY.duration = iDuration
                animatorY.start()
            }

            //회전
            R.id.rotate_btn -> {
                val animatorRotate: ValueAnimator = ObjectAnimator
                    .ofFloat(imageView, "rotation", 100f, 0f, 360f)

                animatorRotate.duration = iDuration
                animatorRotate.start()
            }

            //사라짐
            R.id.alpha_btn -> {
                val animatorAlpha: ValueAnimator = ObjectAnimator
                    .ofFloat(imageView, View.ALPHA, 1.0f, 0f)

                animatorAlpha.duration = iDuration
                animatorAlpha.start()
            }

            //보여짐
            R.id.alpha_btn2 -> {
                val animatorAlpha2: ValueAnimator = ObjectAnimator
                    .ofFloat(imageView, View.ALPHA, 0f, 1.0f)

                animatorAlpha2.duration = iDuration
                animatorAlpha2.start()
            }
        }
    }

}

2022.08.18 - [안드로이드] - [안드로이드 코틀린] 내가 원하는 글씨체 폰트(Font) 적용하는 방법

[안드로이드 코틀린] 내가 원하는 글씨체 폰트(Font) 적용하는 방법

2022.08.17 - [안드로이드] - [안드로이드 코틀린] 소프트 키보드(Soft Keyboard) 보여주는 방법, 숨기는 방법

[안드로이드 코틀린] 소프트 키보드(Soft Keyboard) 보여주는 방법, 숨기는 방법

2022.08.16 - [안드로이드] - [안드로이드 코틀린] 클립보드(Clipboard) 텍스트 복사(Copy)&붙여 넣기(paste) 하는 방법

[안드로이드 코틀린] 클립보드(Clipboard) 텍스트 복사(Copy)&붙여 넣기(paste) 하는 방법