[안드로이드] 이미지 포커스 효과, KenBurns 효과!

안녕하세요 푸민입니다.

혹시 KenBurns 효과라고 들어보셨나요?? 저도 얼마전에 이미지 처리해보다가 발견한 기능입니다! 이것이 무엇이냐면 우리가 흔히 알고 있는 이미지 확대 축소를 통해 이미지의 한부분을 포커스하는 효과입니다! 한번 안드로이드에 KenBurns 기능을 뷰로 구현해볼까요?

 코드 

public class KenburnsImageView extends View{

...

}

 설명 

먼저 View 객체를 상속받은 클래스를 만들어줍니다!

다음으로 효과를 줄 이미지를 가지고 있을 수 있는 기능을 추가해 줍니다.

 코드 

private Bitmap bitmap = null;

private Rect rect;

 

public void setBitmap(Bitmap bitmap){

this.bitmap = Bitmap.createScaledBitmap(bitmap, width, height, true);

invalidate();

}

 

@Override

protected void onDraw(Canvas canvas) {

if(width == 0){

width = getWidth();

height = getHeight();

}

if(bitmap != null){

canvas.drawBitmap(bitmap, null, rect, paint);

}

super.onDraw(canvas);

}

 설명 

해당 클래스에 Bitmap 객체를 정의해줍니다. 해당 Bitmap 은 이미지를 저장해두고 효과를 화면에 보여주는 역활을 합니다. Rect 객체를 정의해 줍니다. 해당 Rect 객체는 뷰에 그려줄 영역을 지정하는 역활을 합니다. KenBurns 효과의 핵심이죠!

setBitmap() 메소드를 생성하여 외부에서 이미지를 설정할 수 있도록 해줍니다. width와 height를 설정해줘야하는데요. onDraw()에서 width와 height를 가져오지만, 좀더 확실하게 하기위해서는 메소드를 만들어서 직접 지정해주는 것이 더욱 현명한 방법입니다. 그리고 invalidate()를 불어주어 이미지를 다시 그려줍니다.

onDraw() 메소드에서는 Canvas 객체의 drawBitmap() 를 통해서 그려줍니다. rect로 설정해준만큼의 크기로 그려줍니다. 참 이미지를 화면에 그리려면 Paint 객체가 꼭 필요합니다. 생성하여 추가해주도록 합시다!

그러면 실제로 KenBurns 효과를 적용해볼까요?

 코드 

private ValueAnimator va;

 

public void aniStart(){

va = ValueAnimator.ofFloat(1f,1.5f,1f);

va.setRepeatCount(Animation.INFINITE);

va.setDuration(10000);

va.addUpdateListener(new AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator arg0) {

Float value = (Float)arg0.getAnimatedValue();

float values = value.floatValue();

rect.left = 0;

rect.top = 0;

rect.right = (int)(width*values);

rect.bottom = (int)(height*values);

invalidate();

}

});

va.start();

}

 설명 

저는 ValueAnimator 를 사용했습니다. 다른 타이버나 쓰레드 등 이용하셔도 무방해요~ ValueAnimator 를 먼저 생성해 주시구요. 생성해 줄때 1f -> 1.5f -> 1f 순으로 크기 변화가 되도록 설정해줍니다. setRepeatCount() 를 이용해 무한으로 동작하도록 Animation 객체의 INFINITE 상수를 설정합니다. 그리고 setDuration() 객체를 통해서 반복될 주기를 설정합니다. 

또한 중요한 AnimatorUpdate 리스터를 설정해주어야 해요. 해당 ValueAnimator 가 동작할때 크기를 받아와서 Rec t에 설정해 줄거거든요! AnimatorUpdateListener 인터페이스의 onAnimationUpdate() 메소드를 오버라이딩해줍니다. 그러면 파라미터로 ValueAnimator 객체를 받을수 있는데요. 해당 객체의 getAnimatedValue() 값을 받아서 Float 객체로 캐스팅합니다! 그리고 해당 float 값을 받습니다.

받아온 float 값을 이용하여 이미지가 포커스되는 느낌을 주도록 할건데요. Rect 객체의 left, right, top, bottom 값을 각각 설정해줍니다. 중앙 포커스를 하려면 left 와 top 에는 -1 * float 값을, right 와 bottom에는 float 값을 주시면 되구요. 또 위처럼 하시면 이미지의 왼쪽 상단으로 포커스가 됩니다! 각자 필요에 따라 조금씩 조정해 주실수 있어요! 

참 ValueAnimator 객체에 start() 메소드 꼭 불러주세요.

마지막으로 정지시키는 방법은 간단합니다.

 코드 

public void aniStop(){

va.end();

va.cancel();

va = null;

}

 설명 

ValueAnimator 객체의 end() 와 cancel() 을 불러 ValueAnimator 객체를 멈춰주시고 객체에 null 처리를 해주시면 깔끔하게 종료가 됩니다!

ValueAnimator 객체는 참 다양한 용도로 사용할수 있어서 참 자주 애용하는데요. 다들 한번 사용해보세요~