BackgroundColor Animation

 

 

BackgroundColor Animation

 

 

 

ㆍ Background Color를 바꿔줄때 Animation을

    추가해보겠습니다

 

 

 

 

만들어볼 화면

 

 

이런식으로 버튼을 눌렀을때

색깔이 딱! 하고 바로 바뀌는게 아니라

부드럽게 바뀌는 Animation을

만들어보도록 하겠습니다.

 

 

먼저 Layout 파일 작성

 

 

ImageView 하나와

Button 하나를

배치하겠습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF0000"
        />
    <Button
        android:layout_marginTop="5dp"
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="색깔 바꾸기"
        android:background="#FFFFFF"
        android:elevation="5dp"
        />
</LinearLayout>

 

딱히 살펴볼 부분은 없습니다

MainActivity 작성

천천히 단계별로 써볼까 하다가..

코드가 짧고 크게 어려운 부분이 없어서

바로 풀코드를 올리고, 주요부분만

잠깐 보도록 하겠습니다.

아마 코드만 복붙하셔서

직접 써보셔도 바로 이해가 가실겁니다.

import android.animation.ArgbEvaluator;
import android.animation.ValueAnimator;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity
{
    ImageView mImageView;
    Button mButton;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mButton = (Button)findViewById(R.id.button);
        mImageView = (ImageView)findViewById(R.id.image_view);

        mButton.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                int beforeColor;
                int afterColor;

                if(((ColorDrawable)mImageView.getBackground()).getColor() == Color.parseColor("#FF0000"))
                {
                    beforeColor = Color.parseColor("#FF0000");
                    afterColor = Color.parseColor("#0000ED");
                }
                else
                {
                    beforeColor = Color.parseColor("#0000ED");
                    afterColor = Color.parseColor("#FF0000");
                }
                ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), beforeColor, afterColor);
                colorAnimation.setDuration(500);
                colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
                {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animator)
                    {
                        mImageView.setBackgroundColor((int) animator.getAnimatedValue());
                    }
                });
                colorAnimation.start();
            }
        });
    }
}

코드는

클릭했을때 이후로만

보도록 하겠습니다.

바로 if문이 나오는데

여기를 먼저 보기보다는

아래쪽을 보면

ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), beforeColor, afterColor);
colorAnimation.setDuration(500);
colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
{
    @Override
    public void onAnimationUpdate(ValueAnimator animator)
    {
        mImageView.setBackgroundColor((int) animator.getAnimatedValue());
    }
});
colorAnimation.start();

ValueAnimiator 클래스를 사용해서

원하는 Object에 Animation을 적용시킬 수 있습니다.

ValueAnimator.ofObject의 참조문서를 살펴보시면

Parameters 값으로

evaluator와 나머지 values값들을

넣어주면 됩니다.

코드를 보면

ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), beforeColor, afterColor);

Color 변경을 위해 ArgbEvaluator를 적어주고

각 argb int값을 매개변수로 적어줍니다.

colorAnimation.setDuration(500);

그 후에 Animation 시간을 적어줍니다

500이라고 적어주면 0.5초입니다.

colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()

addUpdateListener는

애니메이션이 진행되는 동안 매 프레임마다

호출되는 부분입니다.

여기서 setBackgroundColor를 적어주시면

프레임마다 색깔을 바꿔주는 역할을 합니다.

colorAnimation.start();

애니메이션을 시작시키는 부분입니다

여기까지가 Animation 부분입니다.

끝내기 전에 앞에 한줄만 따로 보도록 하겠습니다.

if(((ColorDrawable)mImageView.getBackground()).getColor() == Color.parseColor("#FF0000"))

이 부분은 버튼을 클릭했을때

ImageView의 현재 색깔을 알아내서

그 색깔이 빨간색("#FF0000")인지 아닌지

확인하는 코드입니다.