본문 바로가기
App Programming/Kotlin

[Kotlin] 애니메이션 (Animation)

by goatlab 2023. 1. 9.
728x90
반응형
SMALL

애니메이션 (Animation)

 

애니메이션을 사용하면 앱에 일어나고 있는 일을 사용자에게 알려주는 시각적 단서를 추가할 수 있다. 새 콘텐츠가 로드되거나 새 작업이 제공되는 경우와 같이 UI에서 상태가 변경되는 경우 특히 유용하다. 또한, 앱에 세련된 느낌을 더하기 때문에 앱이 더욱 매력적으로 보이는 효과가 있다.

 

  • 회전 (rotate) : 중심점 (pivot)을 기준으로 회전하는 애니메이션
  • 크기 (scale) : 중심점 (pivot)을 기준으로 크기가 커지거나 줄어드는 애니메이션
  • 투명도 (alpha) : View가 흐려지거나 다시 진해지는 애니메이션
  • 이동 (translate) : View가 상,하,좌,우로 이동하는 애니메이션
  • 복합 애니메이션 (set) : 여러 애니메이션을 중첩하는 애니메이션

 

xml : rotate

 

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:repeatCount="infinite"
    android:duration="4000"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="360">
</rotate>

 

xml : scale

 

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4000"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:toXScale="2.0"
    android:toYScale="2.0"
    android:pivotX="50%"
    android:pivotY="50%"
    >
</scale>

 

xml : alpha

 

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

 

xml : translate

 

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

 

xml : 복합 애니메이션

 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="2000" />
    <scale
        android:fromXScale="0.5" android:toXScale="1.5"
        android:fromYScale="0.5" android:toYScale="1.5"
        android:pivotX="50%" android:pivotY="50%"
        android:duration="2000" />
    <scale 
        android:fromXScale="1.5" android:toXScale="1.0"
        android:fromYScale="1.5" android:toYScale="1.0"
        android:pivotX="50%" android:pivotY="50%"
        android:startOffset="2000"
        android:duration="2000" />
</set>
// // 애니메이션이 끝나면 처음 상태로 복귀
android:fillAfter="false"

 

xml : main

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".intro">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
</androidx.constraintlayout.widget.ConstraintLayout>

 

Activity

 

package com.example.foresthealing

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.view.animation.AnimationUtils
import android.widget.ImageView

class intro : AppCompatActivity() {
    lateinit var imageview : ImageView

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

        imageview = findViewById(R.id.imageView)
        val animation = AnimationUtils.loadAnimation(this, R.anim.translate)

        imageview.startAnimation(animation)

        var handler = Handler()
        handler.postDelayed( {
            var intent = Intent( this, MainActivity::class.java)
            startActivity(intent)
        }, 3000)
    }

    override fun onPause() {
        super.onPause()
        finish()
    }
}

 

https://developer.android.com/training/animation/overview?hl=ko 

 

애니메이션 소개  |  Android 개발자  |  Android Developers

애니메이션 소개 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 애니메이션을 사용하면 앱에 일어나고 있는 일을 사용자에게 알려주는 시각적 단서를 추가

developer.android.com

 

728x90
반응형
LIST

'App Programming > Kotlin' 카테고리의 다른 글

[Kotlin] Camera  (0) 2023.01.11
[Kotlin] Jetpack BottomNavigationView  (0) 2023.01.09
[Kotlin]코틀린 실행  (0) 2022.04.28
설치 (Jdk, IntelliJ)  (0) 2022.04.28
코틀린 (Kotlin)  (0) 2022.04.06