[안드로이드] 그라데이션(Gradation) 애니메이션(Animation) 효과 쉽게 주는 방법

- 나무 위키 -

그라데이션(Gradation)은 하나의 색채에서

다른 색채로 변하는 단계

---

이번 시간에는 그라데이션에 애니메이션

효과 쉽게 주는 방법에 대하여 알아보겠습니다.

---

목차

1. 실행 화면

2. 라이브러리 등록

3. 메인 화면 구성 activity_main.xml

4. 그라데이션 파일 만들기

5. 그라데이션 애니메이션 만들기

6. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

  implementation 'io.github.tonnyl:spark:0.1.0-alpha'

 참조 문서

https://github.com/TonnyL/Spark

GitHub - TonnyL/Spark: 🎨 An Android library to create gradient animation like Instagram&Spotify

 

 

3. 메인 화면 구성

activity_main.xml

<?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"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
</LinearLayout>

 

4. 그라데이션 파일 만들기

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: gradation1

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:endColor="#FCE38A"
        android:startColor="#F38181"
        android:type="linear"/>

    <corners android:radius="0dp"/>
</shape>

file name: gradation2

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:endColor="#F54EA2"
        android:startColor="#FF7676"
        android:type="linear"/>

    <corners android:radius="0dp"/>
</shape>

 

5. 그라데이션 애니메이션 만들기

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: custom_anim_list

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/gradation1"
        android:duration="4500"/>

    <item
        android:drawable="@drawable/gradation2"
        android:duration="4500"/>
</animation-list>

 

6. 메인 코드 구현

MainActivity.java

 - 속성 -

 setView: 적용할 화면

 setDuration: 지속시간

 setAnimList: 적용할 애니메이션

public class MainActivity extends AppCompatActivity {

    Spark spark;

    LinearLayout mainLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mainLayout = findViewById(R.id.mainLayout);

        spark = new Spark.Builder()
                .setView(mainLayout)
                .setDuration(4000)
                .setAnimList(R.drawable.custom_anim_list)
                .build();
    }

    @Override
    protected void onResume() {
        super.onResume();
        spark.startAnimation();
    }

    @Override
    protected void onStop() {
        super.onStop();
        spark.stopAnimation();
    }
} //MainActivity

2022.02.11 - [안드로이드] - [안드로이드] View(뷰) 애니메이션(Animation) 쉽게 적용하는 방법

[안드로이드] View(뷰) 애니메이션(Animation) 쉽게 적용하는 방법

2022.02.10 - [안드로이드] - [안드로이드] 별점(RatingBar) 쉽게 꾸미는 방법

[안드로이드] 별점(RatingBar) 쉽게 꾸미는 방법

2022.02.09 - [안드로이드] - [안드로이드] 패턴(patternLockView) 잠금 쉽게 만드는 방법

[안드로이드] 패턴(patternLockView) 잠금 쉽게 만드는 방법