안드로이드 스튜디오_ 애니메이션 효과 넣어주기

안녕하세요~ 초보 코딩러 입니당~

 

오늘은 퀴즈앱에서 사용되는 간단한 애니메이션 효과를 넣어볼까 합니다. 

 

---

우선 처음에는 이 모양대로 layout을 만들어 줍니다!

 

여기서 

저는 색은 따로 Colors 에서 지정을 하여 colorPrimary , colorPrimaryDark , colorAccent 를 색을 지정해 준 색깔이고

drawble에서 끝을 둥굴게 하는 원형을 따로 만들어 준 상태입니다. 

 

drawble에서 둥굴게 하는 것이 궁금하신 분들은 클릭! 

 

---

<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=".MainActivity"
    android:background="@color/colorPrimary"
    android:orientation="vertical">




            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="0dp"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="퀴즈퀴즈퀴즈"
                    android:gravity="center"
                    android:textSize="16sp"
                    android:textStyle="bold"
                    android:textColor="@android:color/white"/>

            </androidx.appcompat.widget.Toolbar>

            <LinearLayout
                android:id="@+id/linearLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:orientation="vertical"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/toolbar">

                <TextView
                    android:id="@+id/question"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp"
                    android:background="@drawable/category_background2"
                    android:padding="16dp"
                    android:text="TextView"
                    android:textSize="30dp"
                    android:textColor="@android:color/black" />

                <TextView
                    android:id="@+id/no_indicator"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="16dp"
                    android:text="5/10"
                    android:textColor="@android:color/white"
                    android:textSize="16sp"
                    android:textStyle="bold" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/options_container"
                android:layout_width="409dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="120dp"
                android:background="@drawable/category_background2"
                android:orientation="vertical"
                android:padding="16dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/linearLayout">

                <Button
                    android:id="@+id/button"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp"
                    android:background="@drawable/rounded_borders"
                    android:backgroundTint="#989898"
                    android:text="Button"
                    android:textColor="@android:color/black"/>

                <Button
                    android:id="@+id/button2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp"
                    android:background="@drawable/rounded_borders"
                    android:backgroundTint="#989898"
                    android:text="Button"
                    android:textColor="@android:color/black"/>

                <Button
                    android:id="@+id/button3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp"
                    android:background="@drawable/rounded_borders"
                    android:backgroundTint="#989898"
                    android:text="Button"
                    android:textColor="@android:color/black"/>

                <Button
                    android:id="@+id/button4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="8dp"
                    android:background="@drawable/rounded_borders"
                    android:backgroundTint="#989898"
                    android:text="Button"
                    android:textColor="@android:color/black"/>
            </LinearLayout>

            <Button
                android:id="@+id/next_btn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_margin="30dp"
                android:text="NEXT!!"
            
                android:textColor="@android:color/white"
                android:textSize="20dp"
                android:background="@drawable/rounded_corner"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/options_container" />



        </androidx.constraintlayout.widget.ConstraintLayout>

 

 

---

  

 

그 다음에 java로 가줍니다.  

ipublic class MainActivity extends AppCompatActivity {
    private TextView question,noIndicator;

    private LinearLayout optionsContainer;
    private Button nextBtn;
    private  int count;

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

        question = findViewById(R.id.question);
        noIndicator = findViewById(R.id.no_indicator);

        optionsContainer = findViewById(R.id.options_container);
        nextBtn = findViewById(R.id.next_btn);

        nextBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                count = 0;
                playAnim(question,0);
            }
        });
    }

    private void playAnim(final View view, final int  value){
         view.animate().alpha(value).scaleX(value).scaleY(value).setDuration(500).setStartDelay(100).setInterpolator(new DecelerateInterpolator())
                .setListener(new Animator.AnimatorListener() {

                    @Override
                    public void onAnimationStart(Animator animation) {
                        if (value ==0 && count <4){
                            playAnim(optionsContainer.getChildAt(count),0);
                            count ++;
                        }
                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        if (value == 0){
                            playAnim(view,1);
                        }
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animation) {

                    }
                });

    }

}

 

 

이렇게 넣어주시면, 끄읕!